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

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

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

使用form表单提交上传

html代码如下：

上传

此时的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对象，不需要对数据做处理。

标签添加enctype="multipart/form-data"属性。

cache设置为false，上传文件不需要缓存。

contentType设置为false。因为是由

表单构造的FormData对象，且已经声明了属性enctype="multipart/form-data"，所以这里设置为false。

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

html代码如下：

上传

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]中可以看到一个标签能够上传多个文件，只需要在里添加multiple或multiple="multiple"属性。

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

ajax 上传文件实例,JavaScript使用Ajax上传文件的示例代码相关推荐

[转]掌握Ajax 第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求 [IBM]
转自:http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/ 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步 ...
ajax与java交互实例,1、Ajax与Java通过GET方式交互
1.关于Ajax交互的步骤 1.1 获取到xmlhttprequest 1.2 设置xmlhttprequest的onreadystatechange响应事件 1.3 准备获取ajax请求 xm ...
linux上传文件操作,每天一个linux命令（文件上传下载文件操作）：【转载】gzip命令(示例代码)...
减少文件大小有两个明显的好处,一是可以减少存储空间,二是通过网络传输文件时,可以减少传输的时间.gzip是在Linux系统中经常使用的一个对文件进行压缩和解压缩的命令,既方便又好用.gzip不仅可以用 ...
c语言.h文件实例,C 语言项目中.h文件和.c文件的关系
那是一个被遗忘的年代,在编译器只认识.c(.cpp))文件,而不知道.h是何物的年代. 那时的人们写了很多的.c(.cpp)文件,渐渐地,人们发现在很多.c(.cpp)文件中的声明语句就是相同的, ...
Java Web--HTML、CSS、JavaScript详细学习笔记（内含丰富示例代码）
** Java Web–HTML.CSS.JavaScript学习笔记 ** HTML(Hyper Text Markup Language超文本标记语言):控制的是页面的内容,是由标签组成的语言,能 ...
linux查找一个文件中abc字段命令,Linux查询命令整理(示例代码)
在linux中,查找命令主要有find和grep,以及mlocate/locate 区别: (1)find命令是根据文件的属性进行查找,如文件名,文件大小,所有者,所属组,是否为空,访问时间,修改时间 ...
mangos服务器文件,Mangos Zero服务器搭建简要过程及常见问题(示例代码)
1.源码下载首先是下载 git for windows:Git-2.14.1-64-bit.exe.然后新建D:mangos文件夹,在该文件夹下右键选择"Git Bash Here&quo ...
ajax中res和req,javascript – 来自AJAX调用的res.redirect
我正在尝试在ajax put请求之后进行重定向.我打算使用纯JS客户端进行验证. 客户: $(document).ready(function() { login = () => { var u ...
html ajax提交表单实例,jQuery使用$.ajax提交表单完整实例
本文实例讲述了jQuery使用$.ajax提交表单的方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: /p> "http://www.w3.org/TR/x ...

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

ajax 上传文件实例,JavaScript使用Ajax上传文件的示例代码相关推荐

最新文章

热门文章