js,jq文件上傳，圖片預覽，formData，fileReader

formData是向後臺傳輸文件，fileReader是讀取文件，實現預覽 同時formData ，fileReader 都可以實現文件上傳， 他們都可以轉爲二進制流

添加multiple屬性，就可上傳多個文件

 <input type="file" onchange="changepic(this)"></div>
 <input multiple type="file" onchange="changepic(this)"></div>

fileReader

關鍵代碼：
var reader = new FileReader();
reader.readAsDataURL(file);//轉化二進制流


function changepic(event) {
    var reader = new FileReader();
    var file = event.files[0];
    if (file) {
        var fileSize = file.size / (1024 * 1024);
        // 限制文件大小
        if (fileSize > 5) {
            commPopup.HTML_Page_HintBox(file.name + " 文件大小超過5M");
            return;
        }
        // 限制文件類型
        if (!(file.type == "image/png" || file.type == "image/jpeg" || file.type == "image/jpg")) {
            commPopup.HTML_Page_HintBox(file.name + " 不支持的文件類型");
            return;
        }
    }
    let request = new XMLHttpRequest();// XMLHttpRequest 對象
    reader.readAsDataURL(file);//轉化二進制流
    reader.onload = function (e) {
        //圖片路徑設置爲讀取的圖片
        request.open("POST", url);//要上傳的接口
        $(".userHeadImg")[0].src = e.target.result;
        $(".userHeadImg").attr("data_img", e.target.result);
         request.send(e.target.result);//上傳
    };
    
}
 

formData

關鍵代碼：
var formData = new FormData();
formData.append("files", evt.target.files[0]);//文件

 $.ajax({
        type: "POST",
        url: "/contract/filing/upload",
        enctype: 'multipart/form-data',
        processData: false,
        contentType: false,
        cache: false,
        data: formData,
        beforeSend: function() {
            $that.attr('disabled', 'disabled');
        },
        success: function(data) {
        	$that.removeAttr("disabled");
        },
        error: function(err) {
            $that.removeAttr("disabled");
        }
    })
    
    或者
    
      
  function up(){    
        let fileObj = document.getElementById("file").files[0];
        let formData = new FormData();// FormData 對象
        formData.append("file", fileObj); // 文件對象
        let request = new XMLHttpRequest();// XMLHttpRequest 對象
        xhr.open("post", url, true); //post方式，url爲服務器請求地址，true 該參數規定請求是否異步處理。
        xhr.setRequestHeader("token", "878");
        request.onloadstart = function () {   //上傳前執行
            console.log('我要開始上傳了')  
        }
        request.onabort = function () {      //上傳中斷執行
            alert("文件上傳中斷,請重試")
        };
        request.onprogress = function (event) {  // 會在上傳完成前週期執行，可以用來做進度條
            console.log((event.loaded / event.total) * 100)        
        };  
        request.onerror = function () {      //上傳錯誤執行
            alert("文件上傳出錯，請重試")
        };
        request.onload = function () {        //上傳成功執行
            alert("上傳完成!");
        };
        request.send(formData);
    }

上傳多個文件加預覽

上傳文件：
<div class="imgList">
                                <ul class="clear">
                                </ul>
  </div>
 <input type="file" multiple="multiple" accept="image/jpeg,image/jpg,image/png"
                                    onchange="viewInputImage(this)" style="opacity: 0;">
<span class="fl">支持批量上傳,最多可上傳5張圖片,單張大小不超過5M</span>


   // 待上傳文件列表
    var jubaoAttachments = [];
    function viewInputImage(input) {
        if (!jubaoAttachments) {
            jubaoAttachments = [];
        }
        if (input.files.length + jubaoAttachments.length > 5) {
            throw new Error('文件總數量[' + (input.files.length + jubaoAttachments.length) + ']超過限制');
        } else {
            for (var i = 0; i < input.files.length; ++i) {
                var file = input.files[i];
                try {
                    if (file) {
                        var fileSize = file.size / (1024 * 1024);
                        // 限制文件大小
                        if (fileSize > 5) {
                            throw new Error(file.name + " 文件大小超過5M");
                        }
                        // 限制文件類型
                        if (!(file.type == "image/png" || file.type == "image/jpeg" || file.type == "image/jpg")) {
                            throw new Error(file.name + " [" + (file.type || "未知格式") + "] 不支持的文件類型");
                        }

                        var fileReader = new FileReader();
                        fileReader.fid = "id" + Math.random();
                        fileReader.file = file;
                        fileReader.onload = function () {
                            var fileViewItem = $('<li><a data-fid="' + this.fid + '" οnclick="removeJubaoAttachment(this)"></a></li>');
                            $('.imgList ul').append(fileViewItem);

                            var img = new Image();
                            img.onload = function () {
                                if (this.height < 100) { // 圖片上下居中
                                    this.style.marginTop = (100 - this.height) / 2 + "px";
                                }
                            }.bind(img);
                            img.src = this.result;
                            fileViewItem.append(img);
                        }.bind(fileReader);
                        fileReader.readAsDataURL(file);

                        jubaoAttachments.push(fileReader);
                    }
                } catch (e) {
                    alert(e);
                }
            }
        }
        input.value = "";
        // console.log(jubaoAttachments);
    }

    /**
     * 移除某個附件文件
     * @param {} fid        要移除的附件的FID
     */
    function removeJubaoAttachment(fileViewItemDom) {
        var fid = fileViewItemDom.getAttribute('data-fid');
        fileViewItemDom.parentNode.remove();
        // i4app.jubaoFormPopWindow && i4app.jubaoFormPopWindow.find(".popWindow_body").css("margin-top", -$(".popWindow_body").height() / 2);
        if (jubaoAttachments && jubaoAttachments.length > 0) {
            for (var i = 0; i < jubaoAttachments.length; ++i) {
                if (jubaoAttachments[i].fid == fid) {
                    jubaoAttachments.splice(i, 1);
                    break;
                }
            }
        }
        return true;
    }

預覽圖片的關鍵代碼

首先要作爲構造函數得到一個FileReader的實例對象

 var reader = new FileReader();
 
 利用readAsDataURL()方法讀取指定的內容 //把圖片數據轉成base64字符串數據
 
 reader .readAsDataURL(file);
 
 最後就是一個事件處理，相當於監控讀取進度，我們這裏是當讀取完成時渲染圖片，
 所以用onload。
 
reader.onload = function (evt) {
    img.src = evt.target.result; //fileReader.result
}