前端部分

使用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 ,//一般设置为falsefileElementId:'upload',//文件上传控件的id属性  <input type="file" id="upload" name="upload" />dataType: 'text',//返回值类型 一般设置为jsonsuccess: 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.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;}

相关jar包下载：org.apache.commons.io_1.3.2.jar org.apache.commons.fileupload.jar
相关jar包的地址
参考blog：
jQuery插件之ajaxFileUpload
http://blessht.iteye.com/blog/1405057
http://blog.csdn.net/jadyer/article/details/11693705
http://www.cnblogs.com/rollenholt/p/3693087.html

ajaxFileUpload.js 源代码

// JavaScript Document
jQuery.extend({createUploadIframe: function(id, uri){//create framevar 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 attributesjQuery(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 requestsjQuery.event.trigger( "ajaxStart" );}            var requestDone = false;// Create the request objectvar 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 notmodifiedif( 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 datas.success( data, status );};                 if( s.global ){// Fire the global callbackjQuery.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 completedjQuery.event.trigger( "ajaxComplete", [xml, s] );};// Handle the global AJAX counterif(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 checkerif( s.timeout > 0 ) {setTimeout(function(){if( !requestDone ){// Check to see ifthe request is still happeninguploadCallback( "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 contextif( type == "script" ){jQuery.globalEval( data );}// Get the JavaScript object, ifJSON is used.if( type == "json" ){eval( "data = " + data );}// evaluate scripts within htmlif( 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] );  }  }
});