按钮点击触发Ajax异步上传文件（附加：table点击按钮删除行）

一、使用背景

1、在项目中需要点击按钮即上传文件，提交表单时只需要保存文件ID即可；

2、同一个表单中有多处需要上传文件，多个按钮异步上传文件互不影响；

3、java后台使用同一个文件上传接口。

二、利用ajaxfileupload.js实现文件异步上传

ajaxfileupload.js在网上很多地方都有下载，但是很多都是经过别人修改之后的，不一定会适用。此处的ajaxfileupload.js也是本人为适应需求修改之后的，请认真阅读后再自行选择下载。

修改后的ajaxfileupload.js下载路径

注：文章最后会以代码形式贴出来源码，并对修改处做解释。

三、前端页面代码

在引入ajaxfileupload.js之前需要引入jquery.js，下面提供了jquery-3.3.1的下载路径。

jquery-3.3.1下载路径

<!-- 引入jquery -->
<script src="${basepath}/static/jquery-3.3.1/jquery-3.3.1.js" type="text/javascript"></script>
<!-- 引入ajaxfileupload -->
<script src="${basepath}/static/ajaxfileupload.js" type="text/javascript"></script>
<!-- 引入layer插件 -->
<script src="${basepath}/layer-v3.1.1/layer/layer.js"></script>
<script src="${basepath}/layer-v2.3/layer/laydate/laydate.js"></script>

<!-- 表单部分 -->
<form action="" method="post">
    <table cellpadding="0" cellspacing="0" border="0" class="table_fix tzdl_table_style">
        <tr>
            <td class=" common_label_title_r">
                <font style="color:red;">* </font>项目名称:
            </td>
            <td colspan="3">
                <input id="xmmc" name="xmmc" value="" class="form-control" />
            </td>
        </tr>
        <tr>
            <td class=" common_label_title_r">
                <font style="color:red;">* </font>项目总投资:
            </td>
            <td>
                <input id="zmztz" name="zmztz" value="" class="form-control" />
            </td>
            <td class=" common_label_title_r">
                <font style="color:red;">* </font>年度报告时间:
            </td>
            <td>
                <input id="ndbgsj" name="ndbgsj" value="" class="form-control" />
            </td>
        <tr height="80px;">
            <input type="hidden" id="jdbg" name="jdbg"" value=""/>
            <td class=" common_label_title_r">
                <font style="color:red;">* </font>季度报告文件:
            </td>
            <td colspan="3" id="name_jdbg"">
                <input type="file" id="upload_jdbg" name="upload_jdbg" style="display:inline-block;"/>
                <a onclick="ajaxUpload('jdbg')" class="btn btn-success btn-sm pull-right">上 传</a>&nbsp;&nbsp;&nbsp;&nbsp;
            </td>
        </tr>
        <tr height="80px;">
            <input type="hidden" id="ndbg" name="ndbg"" value=""/>
            <td class=" common_label_title_r">
                <font style="color:red;">* </font>年度报告文件:
            </td>
            <td colspan="3" id="name_ndbg"">
                <input type="file" id="upload_ndbg" name="upload_ndbg" style="display:inline-block;"/>
                <a onclick="ajaxUpload('ndbg')" class="btn btn-success btn-sm pull-right">上 传</a>&nbsp;&nbsp;&nbsp;&nbsp;
            </td>
        </tr>
</form>

<!-- 文件上传js部分 -->
<script type="text/javascript">
    function ajaxUpload($id){
        var file = $("#upload_" + $id).val();
        if (file == null || file == "") {
            layer.msg("请先选择文件！", {icon: 3});
        } else {
            $.ajaxFileUpload({
                fileElementId: "upload_" + $id,    // 需要上传的文件域的ID，即<input type="file">的ID。
                url: '/uploadFile', // 后台方法的路径
                type: 'post',   // 当要提交自定义参数时，这个参数要设置成post
                dataType: 'text',   //服务器返回的数据类型。可以为xml,script,json,html。如果不填写，jQuery会自动判断。
                secureuri: false,   //是否启用安全提交，默认为false。
                async : true,   //是否是异步
                success: function(data) {   //提交成功后自动执行的处理函数，参数data就是服务器返回的数据。
                    var jsonStr = data.substring(data.indexOf("{"), data.lastIndexOf("}") + 1);
                    var jsonObject =  JSON.parse(jsonStr);
                    if (jsonObject.success == true) {
                        var data = jsonObject.body;
                        layer.msg("上传附件成功！", {icon: 6});
                        changeStatus($id, data);
                    } else {
                        layer.msg("上传附件失败！", {icon: 5});
                    }
                },
                error: function(data, status, e) {  //提交失败自动执行的处理函数。
                    layer.msg("上传附件失败！", {icon: 5});
                }
            });
        }
    }
		
    function changeStatus($id, data){
        var fileName = data.names[0];
        var fileId = data.ids[0];
        var tdName = $("#name_" + $id);
        tdName.html(fileName + 
            "<button onclick=downLoadFile('"+fileId+"') class='btn btn-info btn-sm pull-right'>下 载</button>&nbsp;&nbsp;&nbsp;&nbsp;"  +
            "<a onclick='deleteTr(this)' class='btn btn-danger btn-xs'> 删 除  </a>"
        );
    }
		
    function deleteTr($this){
        var tr = $this.parentNode.parentNode;
        var tbody = tr.parentNode;
        tbody.removeChild(tr);
    }
</script>

注：

1、文件上传按钮点击事件传入的ID，一定是与按钮相对应的type="file"文件域的ID;

2、dataType: 'text'：虽然我后台返回的是json，若此处设置为json，则文件上传成功也会进入error的回调函数；

3、由于我这里有多处文件上传，为了后台统一接口实现，我在ajaxfileupload.js中修改了type="file"文件域的name，统一为file，后台接收参数名为file。

四、后台java代码

@RequestMapping(value="uploadFile")
@ResponseBody
public AjaxJson uploadFile(@RequestParam(value="file", required=true) MultipartFile[] file){
    AjaxJson result = new AjaxJson();
    try {
        Map<String, String> map = fileService.uploadFile(file);
        String[] names = map.get("names").split(":");
        String[] ids = map.get("ids").split(":");
        result.put("names", names);
        result.put("ids", ids);
        result.setSuccess(true);
    } catch (Exception e) {
        result.setSuccess(false);
        e.printStackTrace();
    }
    return result;
}

五、ajaxfileupload.js源码（修改之后的）

jQuery.extend({

    handleError: function( s, xhr, status, e ){
        // If a local callback was specified, fire it
        if ( s.error ) {
            s.error.call( s.context || s, xhr, status, e );
        }

        // Fire the global callback
        if ( s.global ) {
            (s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] );
        }
    },

    createUploadIframe: function(id, uri)
   {
         //create frame
            var frameId = 'jUploadFrame' + id;
            if(window.ActiveXObject) {
                  if(jQuery.browser.version=="9.0" || jQuery.browser.version=="10.0"){  
                       var io = document.createElement('iframe');  
                       io.id = frameId;  
                       io.name = frameId;  
                   }else if(jQuery.browser.version=="6.0" || jQuery.browser.version=="7.0" || jQuery.browser.version=="8.0"){  
                       var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />');  
                       if(typeof uri== 'boolean'){  
                           io.src = 'javascript:false';  
                       }  
                       else if(typeof uri== 'string'){  
                           io.src = uri;  
                       }  
                   }  
               } 
            else {
                var io = document.createElement('iframe');
                io.id = frameId;
                io.name = frameId;
            }
            io.style.position = 'absolute';
            io.style.top = '-1000px';
            io.style.left = '-1000px';
            document.body.appendChild(io);
            return io
    },
    createUploadForm: function(id, fileElementId)
   {
      //create form  
      var formId = 'jUploadForm' + id;
      var fileId = 'jUploadFile' + id;
      var form = $('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');    
      var oldElement = $('#' + fileElementId);
      oldElement.attr("name", "file");
      var newElement = $(oldElement).clone(true);
      // 修改旧元素的id
      $(oldElement).attr('id', fileId);
      // 将新元素的值赋空
      $(newElement).attr("value", "");
      // 将新元素放在旧元素的位置
      $(oldElement).before(newElement);
      // 将旧元素移动到目标表单
      $(oldElement).appendTo(form);
      //set attributes
      $(form).css('position', 'absolute');
      $(form).css('top', '-1200px');
      $(form).css('left', '-1200px');
      $(form).appendTo('body');     
      return form;
    },

    ajaxFileUpload: function(s) {
        // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout      
        s = jQuery.extend({}, jQuery.ajaxSettings, s);
        var id = s.fileElementId;        
      var form = jQuery.createUploadForm(id, s.fileElementId);
      var io = jQuery.createUploadIframe(id, s.secureuri);
      var frameId = 'jUploadFrame' + id;
      var formId = 'jUploadForm' + id;      
        // Watch for a new set of requests
        if ( s.global && ! jQuery.active++ )
      {
         jQuery.event.trigger( "ajaxStart" );
      }            
        var requestDone = false;
        // Create the request object
        var xml = {}   
        if ( s.global )
            jQuery.event.trigger("ajaxSend", [xml, s]);
        // Wait for a response to come back
        var uploadCallback = function(isTimeout)
      {        
         var io = document.getElementById(frameId);
            try 
         {           
            if(io.contentWindow)
            {
                xml.responseText = io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null;
                    xml.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document;
                
            }else if(io.contentDocument)
            {
                xml.responseText = io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:null;
                   xml.responseXML = io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document;
            }                 
            }catch(e)
         {
            jQuery.handleError(s, xml, null, e);
         }
            if ( xml || isTimeout == "timeout") 
         {           
                requestDone = true;
                var status;
                try {
                    status = isTimeout != "timeout" ? "success" : "error";
                    // Make sure that the request was successful or notmodified
                    if ( status != "error" )
               {
                        // process the data (runs the xml through httpData regardless of callback)
                        var data = jQuery.uploadHttpData( xml, s.dataType );    
                        // If a local callback was specified, fire it and pass it the data
                        if ( s.success )
                            s.success( data, status );
    
                        // Fire the global callback
                        if( s.global )
                            jQuery.event.trigger( "ajaxSuccess", [xml, s] );
                    } else
                        jQuery.handleError(s, xml, status);
                } catch(e) 
            {
                    status = "error";
                    jQuery.handleError(s, xml, status, e);
                }

                // The request was completed
                if( s.global )
                    jQuery.event.trigger( "ajaxComplete", [xml, s] );

                // Handle the global AJAX counter
                if ( s.global && ! --jQuery.active )
                    jQuery.event.trigger( "ajaxStop" );

                // Process result
                if ( s.complete )
                    s.complete(xml, status);

                jQuery(io).unbind()

                setTimeout(function()
                           {  try 
                              {
                                 $(io).remove();
                                 $(form).remove();  
                                 
                              } catch(e) 
                              {
                                 jQuery.handleError(s, xml, null, e);
                              }                          

                           }, 100)

                xml = null

            }
        }
        // Timeout checker
        if ( s.timeout > 0 ) 
      {
            setTimeout(function(){
                // Check to see if the request is still happening
                if( !requestDone ) uploadCallback( "timeout" );
            }, s.timeout);
        }
        try 
      {
           // var io = $('#' + frameId);
         var form = $('#' + formId);
         $(form).attr('action', s.url);
         $(form).attr('method', 'POST');
         $(form).attr('target', frameId);
            if(form.encoding)
         {
                form.encoding = 'multipart/form-data';          
            }
            else
         {           
                form.enctype = 'multipart/form-data';
            }        
            $(form).submit();

        } catch(e) 
      {        
            jQuery.handleError(s, xml, null, e);
        }
        if(window.attachEvent){
            document.getElementById(frameId).attachEvent('onload', uploadCallback);
        }
        else{
            document.getElementById(frameId).addEventListener('load', uploadCallback, false);
        }     
        return {abort: function () {}};    

    },

    uploadHttpData: function( r, type ) {
        var data = !type;
        data = type == "xml" || data ? r.responseXML : r.responseText;
        // If the type is "script", eval it in global context
        if ( type == "script" )
            jQuery.globalEval( data );
        // Get the JavaScript object, if JSON is used.
        if ( type == "json" )
            eval( "data = " + data );
        // evaluate scripts within html
        if ( type == "html" )
            jQuery("<div>").html(data).evalScripts();
         //alert($('param', data).each(function(){alert($(this).attr('value'));}));
        return data;
    }
})

注：点击按钮实现文件下载将在下一篇文章中体现

---