安然不哭-西坝阿超个人博客

做技术一定要一颗恒心,这样才不会半途而废。

通过Ajax方式提交含有文件的表单

2018-3-18 钟建超

前言:我们通常使用form表单,通过submit来将form表单中含有的文件上传到服务器。通过这种方式页面将会刷新,但是我们有时需要不刷新页面来提交含有文件的表单,这时我们就会想到通过ajax的方式。但是,如何通过ajax来提交含有文件的表单呢?


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 : false,
       cache : false,
       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头,防止上传失败。

标签: js