js 上傳文件功能

時間 2019-11-12

標籤上傳文件功能欄目 JavaScript 简体版

原文原文鏈接

一，文件上傳插件webUploader 使用方法請見 http://fex.baidu.com/webuploader/getting-started.htmljavascript

這個插件有個坑，困擾我很久才找到解決辦法，就是使用webUploader點擊瀏覽沒有反應，必定要按F12才能點擊請參照此文：https://blog.csdn.net/rock154/article/details/80289696css

webuploader插件若是你要本身獲取到瀏覽的文件上傳給後臺的話，可使getFiles()方法來獲取html

上傳文件到後臺：參照此文：https://www.cnblogs.com/labnizejuly/p/5588444.html https://www.cnblogs.com/007sx/p/7520529.htmljava

webuploader 使用upload()方法上傳文件如何傳自已的參數值給後臺 https://blog.csdn.net/tuchui88/article/details/77856968jquery

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　https://blog.csdn.net/w592376568/article/details/78733511web

//上傳文件以前，添加要給後臺傳的參數
uploader.off('uploadBeforeSend').on('uploadBeforeSend', function (object, data, header) {
     data.json = JSON.stringify({bjNo: bjNo, delFileId: delFileId.join(',')});
});

webuploader 的 fileNumLimit 定義了，不能再動態更改了，看了一下源碼，是經過 beforeFileQueued 事件控制，若是想實現動態改變話，本身能夠重寫此方法，以下：ajax

　　　　　　　　　 //圖片上傳識別後，再次點入彈窗刪除已上傳的圖片，再點取消還原圖片，由於圖片已從uploader對象中刪除了，會致使能夠多上傳刪除又取消的文件個數
                var flag=true;
                var max=9;
                //重寫beforeFileQueued  處理文件數量控制
                uploader.off('beforeFileQueued').on( 'beforeFileQueued', function( file ) {
                    var count=$('.fileBoxUl li').length;//當前圖片個數
                    if ( count >= max && flag ) {
                        flag = false;
                        this.trigger( 'error', 'Q_EXCEED_NUM_LIMIT', max, file );
                        setTimeout(function() {//setTimeout添加異步，會等待主線程所有執行完成，纔來執行此處，這樣有多個文件是多餘的，也只會彈一次錯誤框
                            flag = true;
                        }, 0);
                    }
                    return count >= max ? false : true;
                });

二，html 文件上傳控件，生成縮略圖展現，並上傳給後臺chrome

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <!-- <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> -->
    <script src="../jquery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#file0").change(function () {
                $('#imgDiv').empty();
                for(var i=0;i<this.files.length;i++){
                     var objUrl = getObjectURL(this.files[i]);
                    if (objUrl) {
                        $('#imgDiv').append('<img src="'+objUrl+'" height="70" id="img0">');
                    }
                }           
            });
            //尚未上傳到服務器以前要顯示圖處縮略圖，獲取url
            function getObjectURL(file) {
                var url = null ; 
                if(file){
                    if (window.createObjectURL!=undefined) { // basic
                        url = window.createObjectURL(file) ;
                    } else if (window.URL!=undefined) { // mozilla(firefox)
                        url = window.URL.createObjectURL(file) ;
                    } else if (window.webkitURL!=undefined) { // webkit or chrome
                        url = window.webkitURL.createObjectURL(file) ;
                    }
                }
                return url;
            }
            $('#btnUpload').click(function(){
                console.log($("#file0")[0].files);
                var formData = new FormData();
                formData.append('file', $("#file0")[0].files);
                $.ajax({
                    url: 'http://common1.trafree.com:33050/bj/manager/manual/importFile',
                    type: 'POST',
                    cache: false,
                    data: formData,
                    processData: false,
                    contentType: false
                  }).done(function(res) {
                     console.log("success");
                  })
                .fail(function(res) {
                     console.log("fail");
                });                 
                 });        
         });
    </script>
</head>
<body>
    <input type="file" name="file0" id="file0" multiple="multiple">
    <div id="imgDiv"><img src="" height="70" id="img0"></div>
    <input type="button" id="btnUpload" value="上傳">
</body>
</html>

要把以上的上傳文件功能設計得漂亮點，參照此文：https://www.cnblogs.com/kongxianghai/p/5624785.htmljson

三，上傳文件控件裏的文件上傳給後臺還可以使用jquery.form.js的 ajaxSubmit 方法 ajaxSubmit 會將整個form表單傳給後臺，後臺本身去解析表單數據segmentfault

如下事例是，當文件上傳時傳給後，後臺將excel裏的信息解析出來，返回給前臺展現：

<form id="importExcelForm" enctype="multipart/form-data" style="display:inline;">
      <span class="btn btn-warning fileinput-button">
           <span>導入</span>
      <input type="file" id="uploadExcel" name="uploadExcel" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
      </span>
</form>

//乘客信息導入彈窗導入Excel文件改變事件
            .on('change'+eventSpace,'#uploadExcel',function () {
                $('#importExcelForm').ajaxSubmit({
                    dataType: "json",
                    type:'POST',
                    url:options.config.url.importTravExcel,
                    success: function (res) {
                        if(res.error.code==0) {
                            var data=res.data;
                            $('#importTravDialog [name="adtNum"]').text(data.adtNum);
                            $('#importTravDialog [name="cnnNum"]').text(data.cnnNum);
                            $('#importTravDialog [name="infNum"]').text(data.infNum);
                            $('#importTravDialog [name="stuNum"]').text(data.stuNum);
                            loadTravsTable(data.travs||[]);
                            $('#uploadExcel').val('');//把上傳文件控件清空，以便下次再選擇同一個文件時也能觸發事件
                        }
                    }
                });
            })