jquery上传文件_上传文件 jq-CSDN博客

本文链接：https://blog.csdn.net/ld767416042/article/details/80135331

input file 控件上传文件相信很多小伙伴都遇到过。

首先就样式问题就能说一大堆，毕竟初始样式实在是不敢恭维。但是今天这篇文章我们不讨论input的样式。只提供一下大致思路，先包一个div里面包含input和一个span设置div的position为relative设置input的opacity为0 并且充满外部div然后设置span的样式就可以了。

接下来才是重点，我们都知道ajax不能传递文件，但是html新出的一个formdata可以。我首先想到的就是这个方法。

var formData = new FormData(this);
    var file = $(that)[0].files[0];
    formData.append("file",file); //传给后台的file的key值是可以自己定义的
    formData.append("params",JSON.stringify(typeData))
    $.ajax({
        url: baseUrl + '/cms/dataImport/import_excel', 
        type:'POST',
        cache: false, 
        processData: false,
        contentType: false,
        data: formData,
        success: function(data){

        },
        error: function(err) {

        }
    })

FormData类型其实是在XMLHttpRequest 2级定义的，它是为序列化表以及创建与表单格式相同的数据（当然是用于XHR传输）提供便利,但是后来发现这个类型的兼容性不是很好，不兼容ie9以下，没办法只能再想其他办法。

在网上搜了一下发现有两个库用的最多一个是ajaxfileupload.js还有一个是jquery.form.js。

于是试了一下jquery.min.js：写法很简单

给原来的input套一个form：

<form id="form1" name="form1">
	<input type="file" id="file" name="fileupload" class="inputfile poa" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" οnchange="upload(this)"></input>	<span class="btn btn-primary mr10 btn-sm pointer" οnclick="uploadSure()">上传</span>
</form>

调用：

var ajaxFormOption = {
            type: "post", //提交方式 
            dataType: "json", //数据类型 
            data: {params:JSON.stringify(typeData)},//自定义数据参数 只能定义自定义参数的key不能修改file的key
            url: baseUrl + '/cms/dataImport/import_excel', 
            success: function (res) {  
              
            }
    };
    $("#form1").ajaxSubmit(ajaxFormOption);

结果显示二者都是可以的，但是文件和参数是传给后台了，但是后台却说取不到文件。

后来又把方法改回了formdata方式，发现能接收到。说明后台是没问题的，问题肯定是出在前端。于是把两种方式传递的请求进行了比较：

这是通过formData方式传递的：