JavaScript使用Ajax上传文件的示例代码

2024-12-05 10:42:27

本文介绍了JavaScript使用Ajax上传文件的示例代码，分享给大家，具体如下：

实现文件的上传主要有两种方式：

使用form表单提交上传

html代码如下：

<form id="uploadForm" enctype="multipart/form-data">
  <input id="file" type="file" name="file"/>
  <button id="upload" type="button">上传</button>
</form>

此时的JavaScript代码如下：

 var formData = new FormDate($('#uploadForm')[0]);

 $.ajax({
        url: 'http://10.10.2.254:8080/file/associateupload',
        type: 'POST',
        cache: false,
        data: formData,
        processData: false,
        contentType: false,
        success:function(res){
            console.log(res);
        }
    });

需要注意：

processData设置为false。因为data值是FormData对象，不需要对数据做处理。
<form>标签添加enctype="multipart/form-data"属性。
cache设置为false，上传文件不需要缓存。
contentType设置为false。因为是由<form>表单构造的FormData对象，且已经声明了属性enctype="multipart/form-data"，所以这里设置为false。

使用FormData对象添加字段方式上传文件

html代码如下：

<div id="uploadDiv">
  <input id="file" type="file"/>
  <button id="upload" type="button">上传</button>
</div>

JavaScript实现如下：

var formData = new FormData();
formData.append('file', $('#file')[0].files[0]);
$.ajax({
  url: '/upload',
  type: 'POST',
  cache: false,
  data: formData,
  processData: false,
  contentType: false,
  success:function(res){
     console.log(res);
  }

这里有几处不一样：

append()的第二个参数应是文件对象，即$('#file')[0].files[0]。contentType也要设置为false。
从代码$('#file')[0].files[0]中可以看到一个<input type="file">标签能够上传多个文件，只需要在<input type="file">里添加multiple或multiple="multiple"属性。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

基于jstree使用AJAX请求获取数据形成树

概述: 一般情况下都是通过ajax进行请求获取数据.boostrap+ajax 1.代码 //权限分配 $('#authority').click(function() { $("#jstree").jstree({ "core" : { "themes" : { "responsive": false }, // so that create works "check_callback" : true,
浅谈Vue.js应用的四种AJAX请求数据模式

如果您闲的没事干去两个Vue.js开发人员:"在Vue应用中使用AJAX的正确姿势是咋样的?",您将会得到三种或更多的不同回答. Vue.js官方没有提供实现AJAX的指定方式,并且有许多不同的设计模式可以被有效地使用.每个都有自己的利弊,应根据要求进行判断.你甚至可以同时使用几个! 在本文中,我将向您展示您可以在Vue应用程序中实现AJAX的四个位置: 1.根实例 2.组件Components 3.Vuex actions 4.路线导航卫士 5.另加:奖金模式我将解释每个方法,举一
vuejs使用FormData实现ajax上传图片文件

我相信很多使用vuejs的朋友,都有采用ajax上传图片的需求,因为前后端分离后,我们希望都能用ajax来解决数据问题,传统的表单提交会导致提交成功后页面跳转,而使用ajax能够无刷新上传图片等文件. 其实已经有朋友封装了相关的npm包,但是我想说用原生的js api来实现,也用不了多少代码,而且更灵活,能使用原生就尽量用原生.接下来就以一个简单的头像上传来说明如何使用. 效果图前端实现 <template> <div class="admin"> <d
js如何编写简单的ajax方法库

本文实例为大家分享了js编写ajax方法库的具体代码,供大家参考,具体内容如下具体代码 ~function(){ //ajax:实现ajax请求的公共方法;当一个方法传递的参数过多,而且还不固定,我们使用对象统一传值法(把需要传递的参数值都放在一个对象中,一起传递进去即可) function ajax(options){ //把需要使用的参数值设定一个规则和初始值 var _default = { url:"",//请求的地址 type:"get",//请求的方式
原生js中ajax访问的实例详解

原生js中ajax访问的实例详解 form表单中登录名: 失去光标即触发事件 function createXmlHttp() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch (e) { try {// Internet Explorer xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (
JS+Ajax实现百度智能搜索框

首先浏览实现后的结果,输入一个a之后会出现包含a的下拉列表,当我们点击某一个的时候,搜索框中就会出现点击的值.实现所需要的主要是ajax+js. 前端search.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <title>Insert
JavaScript 通过Ajax 动态加载CheckBox复选框

废话不多说了,直接给大家贴代码了,具体代码如下所示: <pre name="code" class="html"> <div class="controls" id="compareyear"> </div></pre><br> <img src="http://img.blog.csdn.net/20170830165326131?watermark
Struts2.5 利用Ajax将json数据传值到JSP的实例

AJAX +JSON=>JSP AJAX AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面. JSON JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式.它基于 ECMAScript (w3c制定的js规
JavaScript使用Ajax上传文件的示例代码

本文介绍了JavaScript使用Ajax上传文件的示例代码,分享给大家,具体如下: 实现文件的上传主要有两种方式: 使用form表单提交上传 html代码如下: <form id="uploadForm" enctype="multipart/form-data"> <input id="file" type="file" name="file"/> <button id=&
Python flask使用ajax上传文件的示例代码

目录前言 JS Form的enctype属性 Input MIME类型(更多直接百度,类型超乎你的想想) 上传单个文件 html代码部分 javascript代码部分 flask 视图函数部分上传多个文件 html js 出问题解决方案前言 JS 为什么要用ajax来提交在使用from提交时,浏览器会向服务器发送选中的文件的内容而不仅仅是发送文件名. 为安全起见,即file-upload 元素不允许 HTML 作者或 JavaScript 程序员指定一个默认的文件名.HTML value
vue el-upload上传文件的示例代码

话不多说直接上代码 <el-upload :action="actionUrl" class="avatar-uploader" :multiple="false" name="files" ref="upload" :file-list="fileList" :on-preview="handlePreview" :on-success="hand
PHP使用HTML5 FileApi实现Ajax上传文件功能示例

本文实例讲述了PHP使用HTML5 FileApi实现Ajax上传文件功能.分享给大家供大家参考,具体如下: FileApi是HTML5的一个新特性,有了这个新特性,js就可以读取本地的文件了,然后实现真正的Ajax上传文件了,而不是iframe方法,下面会介绍api的使用,以及实现Ajax上传文件: FileApi使用定义上传控件: <input type="file" name="pic" onchange="selfile();"
PHP+iframe模拟Ajax上传文件功能示例

本文实例讲述了PHP+iframe模拟Ajax上传文件功能.分享给大家供大家参考,具体如下: 在xmlhttprequest level 1中,Ajax是不能够上传文件的,因为js不能操作本地文件,但是市场上有一些Ajax异步上传文件的插件,是怎么完成的呢?答案:可以使用iframe模拟Ajax上传文件.接下来博主将使用iframe来模拟Ajax来上传文件. 首先看一下效果图: 文件结构图: 09-iframe-upload.html文件: 页面中有一个表单,表单中有一个上传文件按钮和提交按钮,
vuejs+element-ui+laravel5.4上传文件的示例代码

前言之前的文章讲得太多安装了,今天就不说这个了,因为我的项目是前后端分离的,所以基本是分开执行代码逻辑.其中还有跨域问题,主要还是在laravel中添加头信息放行之类的,这里会提一下做法. element-ui的upload组件我的vue代码: <template> <el-upload :action="uploadAction" list-type="picture-card" :on-remove="handleRemove&q
php 生成自动创建文件夹并上传文件的示例代码

复制代码代码如下: <?session_start();if($_SESSION['Company']==''){ //exit();}?><?php //上传图片 $uptypes=array('image/jpg','image/jpeg','image/png','image/pjpeg','image/gif','image/bmp','application/x-shockwave-flash','image/x-png'); $max_file_size=5000000;
Spring Boot 与 Kotlin 上传文件的示例代码

如果我们做一个小型的web站,而且刚好选择的kotlin 和Spring Boot技术栈,那么上传文件的必不可少了,当然,如果你做一个中大型的web站,那建议你使用云存储,能省不少事情. 这篇文章就介绍怎么使用kotlin 和Spring Boot上传文件构建工程如果对于构建工程还不是很熟悉的可以参考<我的第一个Kotlin应用> 完整 build.gradle 文件 group 'name.quanke.kotlin' version '1.0-SNAPSHOT' buildscript
AngularJS上传文件的示例代码

使用AngularJS上传文件前台是Angular页面后台使用SpringBoot/SpirngMVC 上传文件 html <div> <input id="fileUpload" type="file" /> <button ng-click="uploadFile()">上传</button> </div> js $scope.upload = function(){ var f
Ajax上传文件进度条Codular

现在,人们喜欢在浏览网页时做一些其他事情而不离开该网页,这通常是通过ajax来实现.大多数情况,人们使用jQuery来实现,但是随着浏览器的进步,人们比不需要这么做.这里我们将介绍如何在不离开页面的情况下将文件上传到服务器,我们将使用与我们之前的文章中使用的相同的后端PHP代码. 该脚本将上传文件至服务器,同时显示上传进度,并最终返回上传文件的链接地址.在某些情况下,你可能想要返回上传文件的id或者其他的应用信息. Note: 该代码不支持较老的ie浏览器,通过Can I use我们只支持ie1

JavaScript使用Ajax上传文件的示例代码

相关推荐

随机推荐