上传下载

来源：互联网发布：江西网络问政编辑：程序博客网时间：2024/05/02 00:55

一、表单上传

</form>

1、文件只能通过表单来提交，若不想提交后页面发生跳转，将target 设置为一个隐藏的iframe。

2、文件框的onchange处理函数的事件参数，包含了所选的文件信息。

$("form input").change(function(event){

console.log(event.target.files);

});

3、文件提交成功后，目标iframe发生onload事件，可以监听这个事件，来回调提交成功后的处理函数。

响应头如果有X-Frame-Options:SAMEORIGIN，禁止该响应被放在iframe中，会导致目标iframe发生onload不会发生

二、工具上传

flash、applet 、ftp、jquery插件

三、XHR 2 (XMLHttpRequest Level 2)文件上传下载

/********** 表单转 ajax **********/

//构造表单数据对象，FormData是HTML5新增对象
var formData = new FormData(document.getElementById('uploadForm'));
//添加字段
formData.append('user', 'haolin');
//添加文件
var files = $("input[type=file]");
for (var i = 0; i < files.length;i++) {
　　formData.append('files[]', files[i]);
}

var xhr = new XMLHttpRequest();
//重写响应类型，使得响应被当成二进制数据
xhr.responseType = 'blob';
xhr.open('POST', 'url');
//send可以传入任何Blob对象，File、FormData是Blob的子类，Blob的slice方法可以对自己进行切割
xhr.send(formData);

//请求完成事件
xhr.onload = function(event) {
if (xhr.status === 200) {

} else {
alert('出错了');
}
};
// 下载进度事件，HTML5新增事件
xhr.addEventListener("progress", progress_handler, false);
// 上传进度事件，HTML5新增事件
xhr.upload.addEventListener("progress", progress_handler, false);
//进度处理函数
function progress_handler(event){
if(event.lengthComputable) {
progressBar.max = event.total;
progressBar.value = event.loaded;
}
}
//其他事件
onloadstart,onabort,onerror,ontimeout,onloadend,onreadystatechange

/**** 文件和字段混合的数据 ****/

//content-type必须是multipart/form-data
<form id="uploadForm" action="" method="post" enctype="multipart/form-data">
<input id="upfile" type="file" name="upfile"/>
<input type="file" id="Files" name="files[]" multiple /> //多文件选择控件

<input type='hidden' name='sex' value='1'/> //用隐藏域来携带参数
<input type="button" value="上传" onclick="upload()"/>
</form>

四、下载

在新窗口或iframe 中打开链接，用于get请求下载文件

响应中要有：Content-Disposition: attachment; filename=filename.xlsx; size=80883

表单target指向新窗口或iframe，用于post请求（避免get请求参数长度限制）下载文件，post参数可以写在表单隐藏域中

响应中要有：Content-Disposition: attachment; filename=filename.xlsx; size=80883

前端生成下载文件链接
<a href="data:text/csv;charset=utf-8,下载文件的内容" download="export.csv">download</a>

0 0