Verwenden Sie ajaxFileUpload zum Hochladen von Bildern

Front-End-Teil

Die Verwendung von ajaxFileUpload dient hauptsächlich dem asynchronen Hochladen von Dateien, ohne eine neue Seite zum Hochladen zu öffnen!
Da segmentfault keine Dateien hochladen kann, befindet sich der Code der Datei ajaxFileUpload.js am Ende dieses Artikels:
Da die Datei ajaxFileUpload schon lange nicht mehr aktualisiert wurde, handleError: function( s, xhr, status e) Um Fehler zu behandeln,

Der Front-End-Code lautet wie folgt: Das Accept-Attribut in der ersten Eingabe dient dazu, die hochgeladenen Dateiattribute einzuschränken, andere Dateien können dieses Attribut entfernen

Verweise zwei js-Dateien

 <script src="jquery-1.7.1.js" type="text/javascript"></script>
 <script src="ajaxfileupload.js" type="text/javascript"></script>

Schaltfläche „Hochladen“:

<input  type="file" id="upload" name="imagefile" accept="image/png,image/gif"  />
<input  type="button"  value="上传" onclick="return ajaxFileUpload();"/>

js-Code:

    //图片上传
    function ajaxFileUpload()
    {
         
        $.ajaxFileUpload({
                url:'/ai/app/uploadImage',//用于文件上传的服务器端请求地址
                secureuri:false ,//一般设置为false
                fileElementId:&#39;upload&#39;,//文件上传控件的id属性  <input type="file" id="upload" name="upload" />
                dataType: &#39;text&#39;,//返回值类型 一般设置为json
                success: function (message)  //服务器成功响应处理函数
                {
                    layer.alert(message);
                    $("#tool_icon").val(message);
                },
                error: function (data, status, e)//服务器响应失败处理函数
                {
                    alert(e);
                }
            });
        return false;
    }

Backend-Teil

Das hier verwendete Spring-Framework Das Projekt erfordert Beans konfigurieren, um hochgeladene Dateien zu akzeptieren

<!-- 上传文件拦截，设置最大上传文件大小   10M=10*1024*1024(B)=10485760 bytes -->  
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">  
        <property name="maxUploadSize" value="10485760" />  
    </bean>

Backend-Code

@ResponseBody
    @RequestMapping(value="/uploadImage",method=RequestMethod.POST)
    public String uploadImage(HttpServletRequest request,@RequestParam("imagefile") MultipartFile file) throws IOException{
       String getOriginalFilename = null;
       logger.debug("文件原名: " + getOriginalFilename);
       logger.debug("文件名称: " + file.getName());
       logger.debug("文件长度: " + file.getSize());
       logger.debug("文件类型: " + file.getContentType());
       if( file.isEmpty()){
          logger.error("upload image--------------------------------->failed");
          return "please select a image";
       }
       /**文件在服务器中的实际路径*/
      
       String realPath = request.getSession().getServletContext().getRealPath("/upload");  
       logger.debug("realPath---------------------------------------->"+realPath);
       logger.debug("getOriginalFilename----------------------------->"+file.getOriginalFilename());
       
       /**写入地址中*/
       FileUtils.copyInputStreamToFile(file.getInputStream(), new File(realPath,file.getOriginalFilename()));
       
       /**使用原生方法*/
       /* byte[] bytes = file.getBytes();
       BufferedOutputStream stream = new BufferedOutputStream(new FileOutputStream(new File("/ai/images/icons/toolLogo/demo.png")));
       stream.write(bytes);
       stream.close();*/
       /**返回文件在服务器中的地址，用于存储入库*/
       
       String resultUrl = "/ai/upload/"+file.getOriginalFilename();
       logger.debug("upload image file result----------------------->"+resultUrl);
       return resultUrl;
    }

ajaxFileUpload.js-Quellcode

// JavaScript Document
jQuery.extend({

    createUploadIframe: function(id, uri)
 {
   //create frame
            var frameId = 'jUploadFrame' + id;
            
            if(window.ActiveXObject) {
                var io = document.createElement(&#39;<iframe id="&#39; + frameId + &#39;" name="&#39; + frameId + &#39;" />&#39;);
                if(typeof uri== &#39;boolean&#39;){
                    io.src = &#39;javascript:false&#39;;
                }
                else if(typeof uri== &#39;string&#39;){
                    io.src = uri;
                }
            }
            else {
                var io = document.createElement(&#39;iframe&#39;);
                io.id = frameId;
                io.name = frameId;
            }
            io.style.position = &#39;absolute&#39;;
            io.style.top = &#39;-1000px&#39;;
            io.style.left = &#39;-1000px&#39;;

            document.body.appendChild(io);

            return io;   
    },
    createUploadForm: function(id, fileElementId)
 {
  //create form 
  var formId = &#39;jUploadForm&#39; + id;
  var fileId = &#39;jUploadFile&#39; + id;
  var form = jQuery(&#39;<form  action="" method="POST" name="&#39; + formId + &#39;" id="&#39; + formId + &#39;" enctype="multipart/form-data"></form>&#39;); 
  var oldElement = jQuery(&#39;#&#39; + fileElementId);
  var newElement = jQuery(oldElement).clone();
  jQuery(oldElement).attr(&#39;id&#39;, fileId);
  jQuery(oldElement).before(newElement);
  jQuery(oldElement).appendTo(form);
  //set attributes
  jQuery(form).css(&#39;position&#39;, &#39;absolute&#39;);
  jQuery(form).css(&#39;top&#39;, &#39;-1200px&#39;);
  jQuery(form).css(&#39;left&#39;, &#39;-1200px&#39;);
  jQuery(form).appendTo(&#39;body&#39;);  
  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 = &#39;jUploadFrame&#39; + id;
  var formId = &#39;jUploadForm&#39; + id;  
        
        if( s.global && ! jQuery.active++ )
  {
   // Watch for a new set of requests
   jQuery.event.trigger( "ajaxStart" );
  }            
        var requestDone = false;
        // Create the request object
        var xml = {};   
        if( s.global )
        {
         jQuery.event.trigger("ajaxSend", [xml, s]);
        }            
        
        var uploadCallback = function(isTimeout)
  {  
   // Wait for a response to come back 
   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( s.success )
                        {
       // ifa local callback was specified, fire it and pass it the data
                         s.success( data, status );
                        };                 
                        if( s.global )
                        {
       // Fire the global callback
                         jQuery.event.trigger( "ajaxSuccess", [xml, s] );
                        };                            
                    } else
                    {
                     jQuery.handleError(s, xml, status);
                    }
                        
                } catch(e) 
    {
                    status = "error";
                    jQuery.handleError(s, xml, status, e);
                };                
                if( s.global )
                {
     // The request was completed
                 jQuery.event.trigger( "ajaxComplete", [xml, s] );
                };
                    

                // Handle the global AJAX counter
                if(s.global && ! --jQuery.active)
                {
                 jQuery.event.trigger("ajaxStop");
                };
                if(s.complete)
                {
                  s.complete(xml, status);
                } ;                 

                jQuery(io).unbind();

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

         }, 100);

                xml = null;

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

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

    },

    uploadHttpData: function( r, type ) {
        var data = !type;
        data = type == "xml" || data ? r.responseXML : r.responseText;
        // ifthe type is "script", eval it in global context
        if( type == "script" )
        {
         jQuery.globalEval( data );
        }
            
        // Get the JavaScript object, ifJSON is used.
        if( type == "json" )
        {
         eval( "data = " + data );
        }
            
        // evaluate scripts within html
        if( type == "html" )
        {
         jQuery("<div>").html(data).evalScripts();
        }
            
        return data;
    },
    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] );  
                }  
    }  
});