jquery上传文件

首先给大家推荐一下我老师大神的人工智能教学网站。教学不仅零基础,通俗易懂,而且非常风趣幽默,还时不时有内涵黄段子!点这里可以跳转到网站

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方式传递的:

这是通过form.js传递的:

原来后台定义的接受文件的key值是file而form.js默认把接受文件的key定义为了fileupload所以导致能接收到自定义参数却接受不到file。

点这里可以跳转到人工智能网站

发表评论