使用 ajaxFileUpload 进行图片上传
程序员文章站
2022-03-20 18:56:52
...
前端部分
使用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.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 Document jQuery.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] ); } } });
推荐阅读
-
使用ThinkPHP+Uploadify实现图片上传功能
-
python使用正则表达式分析网页中的图片并进行替换的方法
-
vue中使用axios post上传头像/图片并实时显示到页面的方法
-
在Asp.Net Core中配置使用MarkDown富文本编辑器实现图片上传和截图上传(开源代码.net core3.0)
-
淘宝助理怎么进行搬家 使用淘宝助理5.5图片搬家功能图文教程
-
使用python opencv对目录下图片进行去重的方法
-
.NetCore如何使用ImageSharp进行图片的生成
-
blender怎么使用节点给模型进行图片纹理贴图?
-
Android使用OkHttp上传图片的实例代码
-
微信开发中使用微信JSSDK和使用URL.createObjectURL上传预览图片的不同处理对比