文件上传、下载的几种方法

下载：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
<form id="addInfoForm" enctype="multipart/form-data" noinvalid>
    <div style="position: relative;width: 60%;;padding: 0;">
        <button class="ui button green" type="button">上传规则文件</button>
        <input type="file" id="ruleFile" name="file" style="position: absolute;top: 0;left:0;opacity: 0;height: 35px;width: 37% !important;"/>
        <span id="filename" style="display: inline-block;max-width: 60%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;"></span>
    </div>
</form>

//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上传

（这个自己还未使用，查资料看到就先记录一下，礼貌贴原文链接：https://www.cnblogs.com/clumiere/p/4444073.html）

// HTML
<input type="file" id="ipt-file"/>
<button type="button" id="btn-upload">上传</button>
<div class="progress-bar">
    <div class="progress" id="progress"></div>
</div>
<p id="info"></p>

//JS
var button = document.querySelector("#btn-upload"),
    input = document.querySelector("#ipt-file"),
    progress = document.querySelector("#progress"),
    info = document.querySelector("#info"),
    loadPercent = 0;
 
var upload = function() {
    if (input.files.length === 0) {
        console.log("未选择文件");
        return;
    };
    var formData = new FormData();
    formData.append("file", input.files[0]);
    var xhr = new XMLHttpRequest();
    //文件上传的进度
    xhr.addEventListener("progress", function(evt) {
        if (evt.lengthComputable) {
            loadPercent = Math.round(evt.loaded * 100 / evt.total);
        };
    }, false);
    //uploadComplete
    xhr.addEventListener("load", function(res){
        
    }, 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）

（详细可查看官网：https://fex.baidu.com/webuploader/doc/index.html）

// HTML
<div class="uploadBox">
    <div class="uploadBtnBox">
        <label id="uploadFileInput">点击选择文件</label>
    </div>
    <div id="uploadifyList"></div>
</div>

// 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();  // 上传
    };
};