文件上传—Ajax形式

最新推荐文章于 2024-09-19 13:22:45 发布

龙之家

最新推荐文章于 2024-09-19 13:22:45 发布

阅读量605

点赞数

分类专栏：网页技术文章标签：文件上传非表单 FormData Ajax文件上传

本文链接：https://blog.csdn.net/ltaihyy/article/details/80079159

版权

网页技术专栏收录该内容

22 篇文章 0 订阅

订阅专栏

大家都知道，表单文件上传，会刷新页面，很多时候，上传文件时不需要刷新页面，这就需要使用Ajax形式的文件上传，在使用过程中遇到过一些问题，在此记录下。

表单如下：

<form id="excelForm">					
  <input type="file" name="file">					
  <input type="button" value="上传" οnclick="excel()">
</form>

上传文件函数如下：

function excel(){
    var data = new FormData($('#excelForm')[0]);
    $.ajax({
	    type: "post", 
	    url: "url", 
	    data: data,
        processData: false, //不序列化数据 
        contentType: false, //multipart request
        success: function (data) {
	        alert(data.status+"::"+data.info);
        },
	    error: function (data) {
	        alert(data.status+"::"+data.info);
	    }
    });
}

其中需要注意的有：

（1）new FormData($('#excelForm')[0]); 可传送二进制文件，即上传文件

new FormData的参数是一个DOM对象，而非jQuery对象

（2）processData: false, 不去预处理数据

（3）contentType: false, 不去设置Content-Type请求头

让我们一起遨游在代码的海洋里！