通过Ajax方式提交含有文件的表单
2016-03-31 22:33
483 查看
前言:我们通常使用form表单,通过submit来将form表单中含有的文件上传到服务器。通过这种方式页面将会刷新,但是我们有时需要不刷新页面来提交含有文件的表单,这时我们就会想到通过ajax的方式。但是,如何通过ajax来提交含有文件的表单呢?
Html代码:
JS代码:
这里使用了FormData对象,那FormData对象是什么呢?我们可以在mozilla的web开发者指南中看到FormData的详细使用方法。简单的说我们可以使用FormData,使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个”表单”.
在上面的js代码中,我们使用Jquery的ajax方法来提交数据。注意:我们应该使用较新的Jquery,老版本的可能不支持,同时必须设置contentType : false和processData : false。否则,jquery会报“Uncaught TypeError: Illegal invocation”这样的错误。因为jquery会试图将不是字符串的内容进行转换,设置processData : false禁止其转换,设置contentType : false是告诉jquery不要为其设置Content-Type头,防止上传失败。参见:http://www.cainiaoer.com/2013/09/388.html
以上。
Html代码:
<form id="uploadForm"> 回复内容:<input type="text" name="msg" /> 上传图片:<input type="file" name="file"/> <input type="button" value="确定" onclick="saveMsg()"/> </form>
JS代码:
function saveMsg() { var formData = new FormData($("#uploadForm")[0]); $.ajax({ async : flase, cache : flase, type : "post", data : formData, url : 'http://localhost:8080/ajaxupload', dataType : 'json', contentType: false, //必须 processData: false, //必须 success : function() { console.log('success'); }, error : function(arg1, arg2, arg3) { console.log(arg1 + "--" + arg2 + "--" + arg3); } }); }
这里使用了FormData对象,那FormData对象是什么呢?我们可以在mozilla的web开发者指南中看到FormData的详细使用方法。简单的说我们可以使用FormData,使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个”表单”.
在上面的js代码中,我们使用Jquery的ajax方法来提交数据。注意:我们应该使用较新的Jquery,老版本的可能不支持,同时必须设置contentType : false和processData : false。否则,jquery会报“Uncaught TypeError: Illegal invocation”这样的错误。因为jquery会试图将不是字符串的内容进行转换,设置processData : false禁止其转换,设置contentType : false是告诉jquery不要为其设置Content-Type头,防止上传失败。参见:http://www.cainiaoer.com/2013/09/388.html
以上。
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 最后一次说说闭包
- Ajax
- $.ajax()方法详解
- jQuery ajax - ajax() 方法
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法