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('');//把上传文件控件清空，以便下次再选择同一个文件时也能触发事件
                        }
                    }
                });
            })

form 在使用包含文件上传控件的表单时，form需加上enctype="multipart/form-data"

四，js容许上传多个文件，假如选择了多个上传，又删除了几张，如何实现不把删除的文件传给后台

参考此文：inputfile多图片上传，删除其中的一张

如下方法彷佛也是OK的：

file multiple多选没法删除里面已经选中的文件，会一块儿回发服务器，可是能够经过js记录删除的图片下标，一块儿回发服务器，而后服务器遍历Files容器保存的时候对比被删除下标，对比成功则不保存这张图片