JavaScript----upload/download-文件下载和上传的方法封装
采用原生写法下载,这里下载的支持多文件集合,即最后下载时为zip压缩包文件。一、原生的xhr的方式去下载文件,具体写法如下,不懂的评论区直接问我!二、采用ajax的方式去下载文件的写法AJAX直接调用上传:......
·
采用原生写法下载,这里下载的支持多文件集合,即最后下载时为zip压缩包文件。
这里说明下 layer和layui等写法,是引入了layui组件开发的,
下面方法实际功能可移除,只是作为加载样式!
一、原生的xhr的方式去下载文件,具体写法如下,不懂的评论区直接问我!
// loading弹窗的位置样式
#fileLoading.layui-layer-content {
white-space: nowrap;
top: 23px;
text-indent: -6em;
line-height: 50px;
color: white;
}
let postDownload = function (url, ids) {
// -----------------------这个是loading可以删除
var loadIndex = layer.load(2, {
id: "fileLoading",
content: "文件下载中,请耐心等待!",
shade: [0.5, "#000"],
scrollbar: false,
});
// -----------------------这个是loading可以删除
var xhr = new XMLHttpRequest();
xhr.open("POST", url, true); // 也可用POST方式
xhr.setRequestHeader("Content-Type", "application/json");
xhr.responseType = "blob";
xhr.onload = function () {
console.log("this.response", this.response);
if (this.status === 200) {
var blob = this.response;
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = function (e) {
var a = document.createElement("a");
a.download = "压缩包" + Date.now() + ".zip";
a.href = e.target.result;
$("body").append(a); // 修复firefox中无法触发click
a.click();
$(a).remove();
};
let timer = setTimeout(() => {
layer.close(loadIndex);
clearTimeout(timer);
}, 1500);
}
};
xhr.send(JSON.stringify({ ids }));
};
let getDownload = function (url) {
// -----------------------这个是loading可以删除
var loadIndex = layer.load(2, {
id: "fileLoading",
content: "文件下载中,请耐心等待!",
shade: [0.5, "#000"],
scrollbar: false,
});
// -----------------------这个是loading可以删除
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true); // 也可用POST方式
xhr.responseType = "blob";
xhr.onload = function () {
console.log('this.response', this.response);
if (this.status === 200) {
var blob = this.response;
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = function (e) {
var a = document.createElement('a');
a.download = '压缩包' + Date.now() + ".zip";
a.href = e.target.result;
$("body").append(a); // 修复firefox中无法触发click
a.click();
$(a).remove();
};
let timer = setTimeout(() => {
layer.close(loadIndex)
clearTimeout(timer)
}, 1500)
}
};
xhr.send()
};
// 调用方式如下: get的方式文件id直接拼在了路径url上
let url = base_url + "/file/downloadZip/" + uuidList;
getDownload(url)
// post的方式下载,入参的方式是通过xhr.send的方式去传的
let url = base_url + "/TechnicalManage/downloadTechnicalZip";
postDownload(url, uuidList);
二、采用ajax的方式去上传文件的写法
// ... do something.
采用layui的uploader组件:choose中处理好参数相关的东西,最后直接采用ajax方式调用
let submitData ;
var uploadListIns = upload.render({
elem:'#uploadAttachments'
,accept: 'file'
,multiple: true
,auto: false
,choose: function(obj){
var that = this;
var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
var form = new FormData()
for (let i in files) {
form.append('file',files[i])
//删除文件队列已经上传成功的文件,防止下次获取时先前文件还存在
delete this.files[i];
}
form.append("uuid", '883ded-eerer-e3-d-dfd334')
submitData = form
asyncUploadAJAX(); // ajax方法调文件上传接口,如下
}
});
AJAX直接调用上传接口:
关键属性设置:
contentType: false,//这里一定设置为false
processData: false,//这两个一定设置为false
async function asyncUploadAJAX() {
$.ajax({
url: base_url + 'xxx',
type: "POST",
data:submitData, // formData类型
contentType: false,//这里一定设置为false
processData: false,//这两个一定设置为false
success: function (data) {
if(data && data.code == "200"){
layer.msg("上传成功!", { time: 500 }, function () {layer.closeAll()});
}else {
layer.msg(data.message, { icon: 2,time: 500 }, function () {layer.close(loadIndex)})
}
}
})
}
更多推荐


所有评论(0)