js处理文件上传方式
1.通过FormData封装数据对象提交到服务端(这样的好处是,可以通过ajax方式提交)
1)如果是表单提交,则通过如下方式提交:
<form id="uploadForm" enctype="multipart/form-data">
<input id="file" type="file" name="file"/>
<button id="upload" type="button">upload</button>
</form>
$("#upload").click(function(){
$.ajax({
url: '/upload',
type: 'POST',
cache: false,
data: new FormData($('#uploadForm')[0]),
processData: false, //不要去处理发送的数据
contentType: false //不要去设置Content-Type请求头
}).done(function(res) {
}).fail(function(res) {});
});
2)如果不是表单提交,则通过如下方式
<div id="uploadForm">
<input id="file" type="file"/>
<button id="upload" type="button">upload</button>
</div>
var formData = new FormData();
formData.append('file', $('#file')[0].files[0]);
$.ajax({
url: '/upload',
type: 'POST',
cache: false,
data: formData,
processData: false,
contentType: false
}).done(function(res) {
}).fail(function(res) {});
2.直接通过的表单的形式,将文件提交的到服务端(注意:表单中enctype 填写"multipart/form-data")
<form id="uploadForm" enctype="multipart/form-data" action="url" method="post">
<input id="file" type="file" name="file"/>
<input type="submit" value="提交">
</form>
3.通过第三方插件的方式提交。这里提高ajaxFileUpload
语法:$.ajaxFileUpload([options])
options参数说明:
1、url 上传处理程序地址。
2,fileElementId 需要上传的文件域的ID,即<input type="file" id=“fileData” name="fileName">的ID。
3,secureuri 是否启用安全提交,默认为false。
4,dataType 服务器返回的数据类型。可以为xml,script,json,html。如果不填写,jQuery会自动判断。
5,success 提交成功后自动执行的处理函数,参数data就是服务器返回的数据。
6,error 提交失败自动执行的处理函数。
7,data 自定义参数.
8, type 当要提交自定义参数时,这个参数要设置成post
<body>
<p><input type="file" id="fileName" name="fileName" /></p>
<input type="button" value="上传" />
</body>
function ajaxFileUpload() {
$.ajaxFileUpload
(
{
url: '/upload.do', //用于文件上传的服务器端请求地址
secureuri: false, //是否需要安全协议,一般设置为false
fileElementId: 'fileName', //文件上传域的ID
dataType: 'json', //返回值类型 一般设置为json
success: function (data, status) //服务器成功响应处理函数
{
//do something
},
error: function (data, status, e)//服务器响应失败处理函数
{
alert(e);
}
}
)
return false;
}