Haga clic en el botón para activar la carga de archivos asincrónica Ajax (adicional: mesa Haga clic en el botón para eliminar la línea)

En primer lugar, utilice el fondo

1, en la necesidad del proyecto para hacer clic en el botón para cargar un archivo , sólo tiene que guardar el ID de archivo para enviar el formulario;

2, de la misma forma para subir archivos con múltiples necesidades , los botones múltiples archivos de carga asíncrona de forma independiente el uno del otro;

3, la interfaz Java para cargar un fondo utilizar el mismo archivo .

En segundo lugar, los ajaxfileupload.js uso alcanzar la carga de archivos asincrónica

ajaxfileupload.js muchos lugares en línea para descargar, pero muchos otros son después de que los cambios no se aplicarán necesariamente. ajaxfileupload.js aquí también tengo que adaptar después de los cambios, por favor lea cuidadosamente antes de elegir para descargar su propia cuenta.

ajaxfileupload.js descargar la ruta modificada

Nota: En el último, que será puesto a la forma de código fuente, y hacer modificaciones en la explicación.

En tercer lugar, el código de portada

Han de ser introducidas antes de la introducción ajaxfileupload.js jquery.js, proporciona una ruta de descarga jquery-3.3.1 a continuación.

camino jQuery 3.3.1-descarga

<!-- 引入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 οnclick="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 οnclick="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 οnclick=downLoadFile('"+fileId+"') class='btn btn-info btn-sm pull-right'>下 载</button>&nbsp;&nbsp;&nbsp;&nbsp;"  +
            "<a οnclick='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>

nota:

1, archivo de eventos de botones de carga entrante clic para una identificación, y debe ser correspondiente al tipo botón = campo ID archivo "archivo";

2, Tipo de datos: 'texto': Mientras que volví detrás del escenario es JSON, si aquí se establece en JSON, el archivo se ha cargado correctamente entrará función de devolución de llamada de error;

3, porque tengo múltiple carga de archivos, interfaz unificada para el fondo, he modificado ajaxfileupload.js en el tipo = archivo "archivo" para el nombre de dominio, archivo unificado, el fondo recibe un archivo de parámetros con nombre.

En cuarto lugar, el código java fondo

@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;
}

Cinco, ajaxfileupload.js código fuente (después de la revisión)

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;
    }
})

Nota: Haga clic en el botón de descarga de archivos se reflejará en el próximo artículo

---