j2ee之自定义文件上传

定义静态js方法

var UploadFileModel = /** @class */ (function(){
        function UploadFileModel(url,title,accept,hiddenInput,callBack){
            _upload = this;
            _upload.url = url;//请求地址
            _upload.title = title;//modal标题
            _upload.accept = accept;//文件类型
            _upload.hiddenInput = hiddenInput;//需要添加的隐藏域等
            _upload.callBack = callBack;//回调函数
        }
        /**
         * 判断是否是IE浏览器
         */
        UploadFileModel.prototype.isIE = function(){
            if (!!window.ActiveXObject || "ActiveXObject" in window){
                return true;
            }else{
                return false;
            }
        };
        UploadFileModel.prototype.isDom = ( typeof HTMLElement === 'object' ) ?
                function(obj){
                    return obj instanceof HTMLElement;
                } :
                function(obj){
                    return obj && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string';
                };
        /**
         * 导入
         */
        UploadFileModel.prototype.upload = function(){
            var cur = this;//这里this是触发事件的dom
            var file =  $("#_file").val() ;
            if(file == '' || file == null){
                $("#_errorMsg").show();
                $("#_errorMsg").text("请选择文件！");
                return;
            }
            $.ajax({
                url: _upload.url,
                type: 'POST',
                cache: false,
                data: new FormData($('#_uploadForm')[0]),
                processData: false,
                contentType: false
            }).done(function(rspData) {
                if (_upload.callBack != null && typeof _upload.callBack == "function")//如果是函数
                    _upload.callBack.call(cur, rspData);
            }).fail(function(res) {
                swal("提示","ajax请求异常，请联系管理员！"+res,"error");
            });
        };
        
        
        UploadFileModel.prototype.hide = function(){
            $("#_uploadModal").modal("hide");
        };
        
        UploadFileModel.prototype.clear = function(){
            $("#_uploadModal").remove();
        };
        
        UploadFileModel.prototype.appendUploadModal = function(){
            var modalHtml =  '<div class="modal fade" id="_uploadModal" tabindex="-1" role="dialog" aria-labelledby="uploadModalTitle" data-backdrop="static">';
                modalHtml += '    <div class="modal-dialog" role="document">';
                modalHtml += '        <div class="modal-content">';
                modalHtml += '      <div class="modal-header">';
                modalHtml += '            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>';
                modalHtml += '            <h4 class="modal-title" id="_uploadModalTitle">上传文件</h4>';
                modalHtml += '      </div><!-- /.modal-header -->';
                modalHtml += '      <div class="modal-body">';
                modalHtml += '          <form id="_uploadForm" method="post" enctype="multipart/form-data">';
                modalHtml += '              <div id="_diyFile" class="row">';
                modalHtml += '                     <div class="col-lg-10 col-md-10 col-sm-10">';
                modalHtml += '                          <input type="text" class="form-control" readonly="readonly"  id="_fileNameView" placeholder="未选择文件">';
                modalHtml += '                    </div>';
                modalHtml += '                    <div class="col-lg-2 col-md-2 col-sm-2" style="padding-left:0px">'
                modalHtml += '                        <button type="button" class="btn btn-primary" id="_selectFile">选择文件</button>';
                modalHtml += '                    </div>';
                modalHtml += '              </div>';
                modalHtml += '                <input type="file" style="width:400px;height:30px;display: none" id="_file" name="uploadfile" accept="" />';
                modalHtml += '                <span id="_errorMsg" style="display: none;color: red;"></span>';
                modalHtml += '            </form>';
                modalHtml += '        </div>';
                modalHtml += '        <div class="modal-footer">';
                modalHtml += '            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>';
                modalHtml += '            <button type="button" class="btn btn-primary" id="_uploadSubBtn">上传</button>';
                modalHtml += '        </div>';
                modalHtml += '        </div><!-- /.modal-content -->';
                modalHtml += '    </div>';
                modalHtml += '</div>';
                $("body").append(modalHtml);
        };
        
        /**
         * 初始化
         */
        UploadFileModel.prototype.init = function(){
            //1、在body里添加modal
            _upload.appendUploadModal();//在body里添加modal
            //2、为上传按钮绑定上传函数
            $("#_uploadSubBtn").unbind().on('click',_upload.upload);
            
            //3、将隐藏域添加进form表单'
            if(_upload.hiddenInput != null && _upload.hiddenInput != ""){
                if(_upload.isDom(_upload.hiddenInput)){
                    $("#_uploadForm").appendChild(_upload.hiddenInput);
                }else{
                    $("#_uploadForm").append(_upload.hiddenInput);
                }
            }
            //设置标题
            if(_upload.title == null && _upload.title == ''){
                _upload.title = "文件上传";
            }
            $("#_uploadModalTitle").html(_upload.title);
            //设置文件类型
            $("#_file").attr("accept",_upload.accept);
            
            //4、如果是IE，用原生的type='file'
            if(_upload.isIE()){
                $("#_diyFile").hide();
                $("#_file").show();
                $("#_file").unbind().on("change",function(){
                    $("#_errorMsg").hide();
                });
            } else {
                $("#_selectFile,#_fileNameView").unbind().on('click',function(){
                    $("#_file").click();
                });
                $("#_file").unbind().on("change",function(){
                    var filePath = $(this).val();
                    var pos = filePath.lastIndexOf("\\");
                    $("#_fileNameView").val(filePath.substring(pos+1));
                    $("#_errorMsg").hide();
                });
            }
            //5、modal隐藏后移除
            $("#_uploadModal").on("hidden.bs.modal",function(){
                _upload.clear();
            });
            //5、初始化结束展示modal
            $("#_uploadModal").modal("show");
        };
        
        
        return UploadFileModel;
}());

jsp 即你的页面中

<div class="panel-heading data-model-header-right">
        <button class="btn btn-primary btn-sm" id="uploadFileBtn">上传报文回执</button>
    </div>
<script type="text/javascript" src="${ctx}/static/js/uploadFileModel.js"></script>

你页面中对应的js

$(function(){ 
    var uploadFileModel = new UploadFileModel(URLConstant.backManager.toUpLoadMsgFile,"上传报文回执","application/zip",null,function(data){
        if(data.status == globalConstant.status.success){//成功
            /**
             * 给个提示
             * */
            swal({
              title: "回执报文上传成功！",
              text: data.msg,
              icon: "success",
              buttons: "确定",
            })
            .then(function(value) {//回调函数
                uploadFileModel.hide();
                queryByPage(1);//加载第一页
            });
        } else {
            //提示框
            swal("回执报文上传失败！",data.msg,"error");
        }
    });
    $("#uploadFileBtn").on("click",uploadFileModel.init);
    
    queryByPage(1);
});