使用 ajaxFileUpload 进行图片上传

前端部分

使用ajaxFileUpload 主要是为了异步上传文件，不需要开启新的页面进行上传！
由于segmentfault不能上传文件，该文件ajaxFileUpload.js的代码在本篇文章的最底部：
由于ajaxFileUpload这个文件已经很久没用更新了，所以增加了handleError: function( s, xhr, status, e )来处理错误，

前端代码如下：第一个input中的accept属性是为了限制上传的文件属性，其他文件可以去掉该属性

引用两个js文件

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

上传按钮：

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

js代码：

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

后端部分

该项目使用的spring框架，需要配置bean，来接受上传的文件

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

后端代码

@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<mark style="color:transparent">来源gaodaimacom搞#代%码网</mark>.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 源代码

// JavaScript DocumentjQuery.extend({    createUploadIframe: function(id, uri) {   //create frame            var frameId = 'jUploadFrame' + id;                        if(window.ActiveXObject) {                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 = jQuery('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');   var oldElement = jQuery('#' + fileElementId);  var newElement = jQuery(oldElement).clone();  jQuery(oldElement).attr('id', fileId);  jQuery(oldElement).before(newElement);  jQuery(oldElement).appendTo(form);  //set attributes  jQuery(form).css('position', 'absolute');  jQuery(form).css('top', '-1200px');  jQuery(form).css('left', '-1200px');  jQuery(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;                  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('#' + formId);   jQuery(form).attr('action', s.url);   jQuery(form).attr('method', 'POST');   jQuery(form).attr('target', frameId);            if(form.encoding)   {                form.encoding = 'multipart/form-data';                }            else   {                    form.enctype = 'multipart/form-data';            }               jQuery(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;        // 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] );                  }      }  });

喜欢 (0)赏

[搞代码]

分享 (0)