分享兼容ie6-9和现代浏览器以及ios，android，pad等触屏设备的异步文件上传插件

Posted 2020-08-02 码农下的天桥

核心代码

/**
 * 该插件用于兼容ie6-7-8-9及现代浏览器的异步上传文件。
 * 请注意，在ie6-7-8-9上面的原理是：
 * 新添加一个表单和一个iframe，然后每次选择都将file输入框复制到该表单上面，然后submit整个表单，这样就可以实现类似ajax提交文件的效果，
 * 但是有一点是没办法处理的，就是在客户端预览图片及判断文件大小。现代浏览器则可以。
 */
var AjaxFileInput=function(opts){
    var settings={
        container:"" //放置input框的容器
        ,inputFileElement:"" //input file的文件输入框的elemnt，可以是jquery元素，也可以是dom元素。 请注意，由于每次上传重新生成一个input输入框到container里面，所以建议container里面除了file输入框什么都别放了。
        ,onValidate:function(fileName,fileDom){

            return true;
        } //这是选择文件之后的验证逻辑。假如返回true的话，那么就可以继续上传图片到服务端的某个url，否则不执行。
        ,max_size:5*1024*1024 //限制上传大小--注意，在ie6-9上面是没办法在客户端获取尺寸的，所以这种时候这个属性相当于没用。
        ,url:"" //上传时候的url。
        ,beforeUpload:function(paras){

        }//上传文件之前会调用这个方法。你可以返回一个Object来，譬如：{birthday:"2016-2-05"}这样，假如有这种形式的参数，那么无论在兼容模式下面还是google等现代浏览器的正常模式下面，该参数都会添加到表单然后上传上去。
        ,onError:function(errorMsg){

        }
        ,onComplete:function(serverResult){

        }
    };

    $.extend(settings,opts);

    var _container=$(settings.container);
    var _currentFileButton={};
    _currentFileButton=$(settings.inputFileElement);
    var _tpl_file_html=_container.html(); //获取文本框的html，为以后替换新的文本框而做准备。


    var userIEMode=false;
    if(window.FileReader==undefined){
        userIEMode=true;
    }

    var innerTools={
        getBase4FromImgFile:function(file,callBack){
            var reader = new FileReader();
            reader.onload = function(e) {
                var base64Img= e.target.result;
                //var $img = $(‘<img>‘).attr("src", e.target.result)
                //$(‘#preview‘).empty().append($img)
                if(callBack){
                    callBack(base64Img);
                }
            };
            reader.readAsDataURL(file);
        }
    };


    var _rid="rid_"+util.getRandomWords(5)+"_"+new Date().getTime();
    var _form_id="form_"+_rid;
    var _ifr_id="ifr_"+_rid;

    var el_iframe={};
    var el_form={};
    var isBusy=false;


    var _i_app={
        init:function(){
            var me=this;
            if(userIEMode){
                me.initIEForm();
            }

            me.resetFileInput(settings.inputFileElement);

        }
        //--生成ie6-9必须的form表单和iframe来进行ajax异步提交。
        ,initIEForm:function(){

            var me=this;
            var _ifr_html=‘<iframe id="__ifr_id__" name="__ifr_id__" style="position: absolute; opacity: 0.0; visibility: visible; left:0;top:0; width:100px; height: 50px;"></iframe>‘;
            _ifr_html=_ifr_html.replace(/__ifr_id__/g,_ifr_id);
            var _form_html=‘<form id="__form_id__" action="__url__" target="__ifr_id__" method="post" enctype="multipart/form-data" style="border: 1px solid;" ></form>‘;

            _form_html=_form_html.replace(/__ifr_id__/g,_ifr_id);
            _form_html=_form_html.replace(/__form_id__/g,_form_id);
            _form_html=_form_html.replace(/__url__/g,settings.url);

            el_form=$(_form_html);
            el_iframe=$(_ifr_html);
            $(document.body).append(el_form);
            $(document.body).append(el_iframe);


            //--初始化iframe为ajax的相关操作。
            me.initIFrameLoaded();

        }
        //--初始化iframe onload的相关事件。
        ,initIFrameLoaded:function(){
            var me=this;
            var ifr_json=document.getElementById(_ifr_id);


            function handle_return(){

                var doc = ifr_json.contentDocument || ifr_json.document;
                var _json_str=doc.body.innerText;
                var res={};
                try{
                    res=JSON.parse(_json_str);


                    isBusy=false;
                    var _new_file_input=$(_tpl_file_html);
                    me.resetFileInput(_new_file_input);
                    _container.empty().append(_new_file_input);
                    settings.onComplete(res);
                }
                catch(ex){
                    res=_json_str;

                    isBusy=false;
                    var _new_file_input=$(_tpl_file_html);
                    me.resetFileInput(_new_file_input);
                    _container.empty().append(_new_file_input);

                    settings.onError(_json_str);
                }
            }
            if (ifr_json.attachEvent){
                ifr_json.attachEvent("onload", function(){
                    handle_return();
                });
            } else {
                ifr_json.onload = function(){
                    handle_return();
                };
            }
        }

        //--上传，用iframe及form方式。
        ,uploadByForm:function(paras){
            var me=this;

            el_form.empty();
            el_form.append(‘<input type="submit" value="提交">‘);
            for(var key in paras){
                var _hide_val=$(‘<input type="hidden" value="" name="‘+key+‘">‘);
                _hide_val.val(paras[key]);
                el_form.append(_hide_val);
            }
            if(util.checkEmpty(_currentFileButton.attr("name"))){
                _currentFileButton.attr("name","file");
            }
            el_form.append(_currentFileButton);

            setTimeout(function(){
                el_form[0].submit();
            },20);

        }
        ,uploadByHttpRequest:function(paras){
            var me=this;

            var file=$(_currentFileButton)[0].files[0];

            var xhr = new XMLHttpRequest();
            function uploadFile() {
                var fd = new FormData();
                var _uploadKey="file";
                if(util.checkEmpty(_currentFileButton.attr("name"))==false){
                    _uploadKey=_currentFileButton.attr("name");
                }
                fd.append(_uploadKey, file);


                for(var key in paras){
                    fd.append(key,paras[key]);
                }

                xhr.upload.addEventListener("progress", uploadProgress, false);
                xhr.addEventListener("load", uploadComplete, false);
                xhr.addEventListener("error", uploadFailed, false);
                xhr.addEventListener("abort", uploadCanceled, false);
                xhr.open("POST", settings.url);
                xhr.send(fd);
            }

            function uploadProgress(evt) {
                if (evt.lengthComputable) {
                    var percentComplete = Math.round(evt.loaded * 100 / evt.total);
                    //uploadItemObject.setProgress(percentComplete);
                    //document.getElementById(‘progressNumber‘).innerHTML = percentComplete.toString() + ‘%‘;
                }
                else {
                    //document.getElementById(‘progressNumber‘).innerHTML = ‘unable to compute‘;
                    //uploadItemObject.setStateTips("未知上传进度");
                }
            }

            function uploadComplete(evt) {
                /* This event is raised when the server send back a response */
                //alert(evt.target.responseText);
                /*1.xhr.readyState:XMLHttpRequest狀態，等於4表示數據已經接收完畢

                 2.xhr.status:狀態碼，200表示正常

                 3.xhr.responseText:server回應的文字數據*/
                //console.log(evt.target.status);
                //console.log(evt.target.readyState);
                //console.log(xhr.status);
                if(evt.target.status!=200){
                    isBusy=false;
                    var _new_file_input=$(_tpl_file_html);
                    me.resetFileInput(_new_file_input);
                    _container.empty().append(_new_file_input);
                    settings.onError(evt.target.status+"错误");
                    //uploadItemObject.showError(evt.target.status+"错误");
                }
                else{

                    var res_json="";
                    try{
                        res_json=JSON.parse(evt.target.responseText);
                        isBusy=false;
                        var _new_file_input=$(_tpl_file_html);
                        me.resetFileInput(_new_file_input);
                        _container.empty().append(_new_file_input);
                        settings.onComplete(res_json);
                    }
                    catch(ex){
                        res_json=evt.target.responseText;
                        isBusy=false;
                        var _new_file_input=$(_tpl_file_html);
                        me.resetFileInput(_new_file_input);
                        _container.empty().append(_new_file_input);
                        settings.onError(res_json);
                    }

                }

            }

            function uploadFailed(evt) {
                //alert("There was an error attempting to upload the file.");
                //uploadItemObject.showError();
                settings.onError("上传失败");
            }

            function uploadCanceled(evt) {
                //alert("The upload has been canceled by the user or the browser dropped the connection.");
                //uploadItemObject.showError();
            }
            uploadFile();

            isBusy=false;
            var _new_file_input=$(_tpl_file_html);
            me.resetFileInput(_new_file_input);
            _container.empty().append(_new_file_input);
        }
        //--重新设定上传按钮事件，请注意，假如要hack onchange事件的话，那么这个方法调用是必不可少的。
        ,resetFileInput:function(__file_input){
            var me=this;
            var _fileInput=$(__file_input);
            var _fileDom=_fileInput[0];
            _currentFileButton=_fileInput;

            $(_fileInput).change(function(){

                //if(isBusy){
                //    return;
                //}
                //isBusy=true;

                var _fake_path=_fileDom.value;

                var __theFileName="";
                if(util.checkEmpty(_fake_path)){

                }
                else{
                    if(_fake_path.indexOf("\\")!=-1){
                        var arr2=_fake_path.split("\\");
                        __theFileName=arr2[arr2.length-1];
                    }
                    else if(_fake_path.indexOf("/")!=-1){
                        var arr2=_fake_path.split("/");
                        __theFileName=arr2[arr2.length-1];
                    }
                }

                if(settings.onValidate(__theFileName,_fileDom)==false){
                    isBusy=false;
                    var _new_file_input=$(_tpl_file_html);
                    me.resetFileInput(_new_file_input);
                    _container.empty().append(_new_file_input);

                    return;
                }

                if(util.checkEmpty(_fake_path)==true){
                    var _new_file_input=$(_tpl_file_html);
                    me.resetFileInput(_new_file_input);
                    _container.empty().append(_new_file_input);
                    return;
                }

                var _paras={

                };
                settings.beforeUpload(_paras);


                if(userIEMode){
                    me.uploadByForm(_paras);
                }
                else{
                    me.uploadByHttpRequest(_paras);
                }




            });
        }
    };
    _i_app.init();
}

html代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title></title>
  <jsp:include page="inc.js.jsp"></jsp:include>
  <script type="text/javascript" src="/static/vendor/AjaxFileInput/main.js"></script>


</head>
<body>
<h1>file input文件上传插件兼容处理---兼容ie6-11，chrome，ff，ipad，ios及安卓</h1>


<input type="hidden" class="ipt"  name="identityimagefront" id="identityimagefront">


                        <div style="position: relative;">
                              <img  style="width: 108px; height: 108px;;" id="preview-front" ></span>
                                    <div id="front-container" style="position: absolute; left:0;top:0; opacity:0.0; width:108px;height:108px; cursor: pointer;border:1px solid green;background-color: slategray;">
                                      <input type="file"  id="file-chooser-front" style=" position: absolute; left:0;top:0; opacity:0.0; width:100%;height:100%; cursor: pointer; "/>
                                    </div>
                        </div>


<p class="tip mb10 ml90">支持 jpg , png , gif 大小在5M以内的图片</p>
<script>
  AjaxFileInput({
    container:$("#front-container")
    ,inputFileElement:$("#file-chooser-front")
    ,url:"/service/singleImageUpload.jsp"
    ,onError:function(errorMsg){
      var _notice=new NotificationFx({
        type:"error"
        ,message:errorMsg
      });
      _notice.show();

    }
    ,onValidate:function(__theFileName,_fileDom){
      if(util.checkEmpty(__theFileName)){
        var _notice=new NotificationFx({
          type:"error"
          ,message:"请选择图片"
        });
        _notice.show();
        return false;
      }
      if(!new RegExp("(jpg|jpeg|gif|png|bmp)+","gi").test(__theFileName)){
        //alert("照片上传：文件类型必须是JPG、JPEG、PNG或GIF!");
        var _notice=new NotificationFx({
          type:"error"
          ,message:"只支持jpg、jpeg、gif、png、bmp等图片格式。"

        });
        _notice.show();
        return false;
      }
      if(_fileDom.files!=null&&_fileDom.files.length>0){

        var oFile=_fileDom.files[0];
        if(oFile.size>1024*1024*5){
          //alert(settings.outOfSizeTips);

          var _notice=new NotificationFx({
            type:"error"
            ,message:"最大只能上传5Mb的图片"

          });
          _notice.show();
          return false;
        }
      }


      return true;
    }
    ,onComplete:function(jsonObj){
      if(jsonObj.error==0){
        var _notice=new NotificationFx({
          type:"success"
          ,message:"成功上传"
        });
        _notice.show();
        $("#preview-front").attr("src",jsonObj.url);

      }
      else{
        var _notice=new NotificationFx({
          type:"error"
          ,message:"格式错误"
        });
        _notice.show();
      }
    }
  });

</script>

</body>
</html>

上传处理代码

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.util.*,java.io.*" %>
<%@ page import="java.text.SimpleDateFormat" %>
<%@ page import="org.apache.commons.fileupload.*" %>
<%@ page import="org.apache.commons.fileupload.disk.*" %>
<%@ page import="org.apache.commons.fileupload.servlet.*" %>
<%@ page import="com.alibaba.fastjson.JSONObject" %>
<%

    /**
     * KindEditor JSP
     *
     * 本JSP程序是演示程序，建议不要直接在实际项目中使用。
     * 如果您确定直接使用本程序，使用之前请仔细确认相关安全设置。
     *
     */

//文件保存目录路径
    String savePath = application.getRealPath("/") + "uploads/";

//文件保存目录URL
    String saveUrl  = request.getContextPath() + "/uploads/";
    System.out.println(savePath);

//定义允许上传的文件扩展名
    HashMap<String, String> extMap = new HashMap<String, String>();
    extMap.put("image", "gif,jpg,jpeg,png,bmp");
    extMap.put("flash", "swf,flv");
    extMap.put("media", "swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb");
    extMap.put("file", "doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2");

//最大文件大小
    long maxSize = 1000000;

    response.setContentType("text/html; charset=UTF-8");

    if(!ServletFileUpload.isMultipartContent(request)){
        out.println(getError("请选择文件。"));
        return;
    }
//检查目录
    File uploadDir = new File(savePath);
    if(!uploadDir.isDirectory()){
        uploadDir.mkdirs();
    }
    if(!uploadDir.isDirectory()){
        out.println(getError("上传目录不存在。"));
        return;
    }
//检查目录写权限
    if(!uploadDir.canWrite()){
        out.println(getError("上传目录没有写权限。"));
        return;
    }

    String dirName = request.getParameter("dir");
    if (dirName == null) {
        dirName = "image";
    }
    if(!extMap.containsKey(dirName)){
        out.println(getError("目录名不正确。"));
        return;
    }
//创建文件夹
    savePath += dirName + "/";
    saveUrl += dirName + "/";
    File saveDirFile = new File(savePath);
    if (!saveDirFile.exists()) {
        saveDirFile.mkdirs();
    }
    SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
    String ymd = sdf.format(new Date());
    savePath += ymd + "/";
    saveUrl += ymd + "/";
    File dirFile = new File(savePath);
    if (!dirFile.exists()) {
        dirFile.mkdirs();
    }

    FileItemFactory factory = new DiskFileItemFactory();
    ServletFileUpload upload = new ServletFileUpload(factory);
    upload.setHeaderEncoding("UTF-8");
    List items = upload.parseRequest(request);
    Iterator itr = items.iterator();
    while (itr.hasNext()) {
        FileItem item = (FileItem) itr.next();
        String fileName = item.getName();
        long fileSize = item.getSize();
        if (!item.isFormField()) {
            //检查文件大小
            if(item.getSize() > maxSize){
                out.println(getError("上传文件大小超过限制。"));
                return;
            }
            //检查扩展名
            String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();
            if(!Arrays.<String>asList(extMap.get(dirName).split(",")).contains(fileExt)){
                out.println(getError("上传文件扩展名是不允许的扩展名。\n只允许" + extMap.get(dirName) + "格式。"));
                return;
            }

            SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
            String newFileName = df.format(new Date()) + "_" + new Random().nextInt(1000) + "." + fileExt;
            try{
                File uploadedFile = new File(savePath, newFileName);
                item.write(uploadedFile);
            }catch(Exception e){
                out.println(getError("上传文件失败。"));
                return;
            }

            JSONObject obj = new JSONObject();
            obj.put("error", 0);
            obj.put("url", saveUrl + newFileName);
            out.println(obj.toJSONString());
        }
    }
%>
<%!
    private String getError(String message) {
        JSONObject obj = new JSONObject();
        obj.put("error", 1);
        obj.put("message", message);
        return obj.toJSONString();
    }
%>