文件上传、下载的几种方法本文已参与「新人创作礼」活动，一起开启掘金创作之路。下载：AngularJs - http.g

本文已参与「新人创作礼」活动，一起开启掘金创作之路。下载：AngularJs - http.get/post请求文件下载（下载还可以直接使用a标签）

// $http.post var searchExport = { id: data.id };$ http.post('', searchExport, {responseType:'blob'}).success(function (msg, status, headers, config) {
var blob = new Blob([msg], { type: headers('Content-Type')}); var objectUrl = URL.createObjectURL(blob); var a = document.createElement("a"); document.body.appendChild(a); a.style = "display: none"; a.href = objectUrl; a.download = headers("Content-Disposition").split(";")[1].split("filename=")[1]; a.click(); document.body.removeChild(a); }); $http({ method: 'POST', url: '', data: {}, responseType: 'blob' }).success(function (data, status, headers) { ... }).error(function (msg) { ... });

// $http.get$ http.post('', {'params': searchExport}, {responseType:'blob'}).success(function (msg, status, headers, config) { ... }); $http({ url: '', method: "GET", params: {}, responseType: "blob"
}).then(function (response, status, header, config, statusText) { ... }); 上传：使用form-data上传 enctype="multipart/form-data" 不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。

// input 的name属性是必须值，用于获取表单数据

// HTML

上传规则文件

//JS $('#addInfoForm').undelegate('#ruleFile', 'change').delegate('#ruleFile', 'change', function (e) { self.ruleFile = e.target.files[0]; if (self.ruleFile.size<=0) { Base.alert('所选文件为空白文件！', 3); self.ruleFile = null; return; }$ ("#addInfoForm").html(self.ruleFile); }); var form = new FormData(document.getElementById("addInfoForm")); form.append('isOk', self.isOk); $.ajax({ url:"", type:"post", headers: {}, data: form, processData:false, contentType:false, success:function(res){ }, error:function(res){ } }); 上传：使用XMLHttpRequest上传（这个自己还未使用，查资料看到就先记录一下，礼貌贴原文链接：www.cnblogs.com/clumiere/p/…

// HTML 上传

//JS var button = document.querySelector("#btn-upload"), input = document.querySelector("#ipt-file"), progress = document.querySelector("#progress"), info = document.querySelector("#info"), loadPercent = 0;

}, false);
//文件上传失败
xhr.addEventListener("error", function() {
    input.files= null;
    loadPercent = 0;
}, false);
//取消了上传
xhr.addEventListener("abort", function(){
    
}, false);
xhr.open("POST", '', true);
xhr.responseType = "blob";
// xhr.setRequestHeader(header, token);
xhr.send(formData);

}; button.addEventListener("click", upload, false); 上传：使用第三方插件上传（WebUploader）（详细可查看官网：fex.baidu.com/webuploader…

// HTML

点击选择文件

// JS var uploader = WebUploader.create({ auto: false, swf: "", server: '', //上传URL headers: {}, pick: { id: "#uploadFileInput", label: '点击选择文件', name: "multiFile" }, fileVal: "file", duplicate: false, formData: {}, //上传的其他参数 resize: false, //不压缩img prepareNextFile: true, chunked: false, threads: 1, fileNumLimit: 10, // 限制上传文件个数 fileSizeLimit: '', //总共文件限制大小 fileSingleSizeLimit: 500 * 1024 * 1024, //单个文件限制50M大小 method: 'POST', timeout: 0, //超时时间(0,不限制)、2 * 60 * 1000（2min） accept: { title: "文件上传", extensions: "", //上传文件格式 mimeTypes: '' } });

// 选择文件 uploader.on("fileQueued", function (file) { }); // 准备上传 uploader.on("startUpload", function () {}); // 上传进度 uploader.on("uploadProgress", function (file, percentage) {}); // 上传完成 uploader.on("uploadAccept", function (file, data) {}); // 上传失败 uploader.on("uploadError", function (file, reason) { if (file.name == uploader.getFiles()[uploader.getFiles().length - 1].name) { uploader.reset();
}; }); // 选择文件报错 uploader.on("error", function (str, file) {}); // 上传函数 $scope.fnSubmit = function () { if (uploader.getFiles().length !== 0) { uploader.upload(); // 上传 }; };