ajaxfileupload.js结合input[type=file]无刷新上传
jQuery插件AjaxFileUpload用来实现ajax文件上传,该插件使用非常简单,接下来写个demo演示怎么用AjaxFileUpload插件实现文件上传。 说明:
语法:$.ajaxFileUpload([options]) options参数说明: 1、url 上传处理程序地址。 错误提示: 1,SyntaxError: missing ; before statement错误 1、引入其支持文件,注意引用顺序
<script type="text/javascript" src="<%=basePath%>js/jquery-1.8.0.min.js"></script> <script type="text/javascript" src="<%=basePath%>js/ajaxfileupload.js"></script> 2、在页面设置文件选择框,无需form包裹:注意此处id和name必须设置,在文章中你将知道原因,在此不做详细解释。
<input type="file" id="fileUpload" name="fileUploa" /> 3、实现上传功能
<script type="text/javascript"> //初始化页面 $(document).ready(function(e) { //选择文件框选择文件change事件 $("#fileUpload").change(function(){ var url=$(this).val(); var extend=url.substring(url.indexOf(".")+1); var ext=new Array("jpg","jpeg","png","gif","bmp"); if(ext.toString().indexOf(extend)==-1){ alert("您上传的格式不正确,仅支持jpg、jpeg、png、gif、bmp,请重新选择!"); } $.ajaxFileUpload({ url: '<%=basePath%>attach/api/upload',//后台提交地址 secureuri: false,//异步 fileElementId: 'fileUpload',//上传控件ID dataType: 'json',//返回的数据信息格式 type:"post",//如果带附加参数,请设置type success: function(data,status) { if (data.success ==true) { var attach=data.result[0]; $("[name=photo]").attr("src",attach.filePath); alert("上传成功"); } else { alert("服务器故障,稍后再试!"); } },error: function(data,status,e) { alert(e); } }); }); }); </script>4、后台接口:此处采用spring MVC
@RequestMapping(value = "/upload",method ={RequestMethod.POST,RequestMethod.GET}) @ResponseBody public HashMap<String,Object> upload(HttpServletRequest request,HttpServletResponse response) throws InstantiationException,IllegalAccessException{ HashMap<String,Object> result=new HashMap<String,Object>(); ArrayList<Attach> attachList=attachService.uploadfy(request); if(attachList.size()>0){ result.put("success",true); result.put("result",attachList); }else{ result.put("success",false); } return result; }5、实现以上步奏即可完成上传。 总结: 在使用过程中可能遇到如下问题: 1、上传报该异常:SyntaxError:Unexpected token < 原因:是因为Server端的Response上加上了contentType="application/json"。但有时后端这么做是必须的,所以修改ajaxFileUpload源码,将<pre></pre>标签去掉,如下: (请参考:http://liwx2000.iteye.com/blog/1540321) 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" ) { ////////////以下为新增代码/////////////// data = r.responseText; var start = data.indexOf(">"); if(start != -1) { var end = data.indexOf("<",start + 1); if(end != -1) { data = data.substring(start + 1,end); } } ///////////以上为新增代码/////////////// eval( "data = " + data); } // evaluate scripts within html if ( type == "html" ) jQuery("<div>").html(data).evalScripts(); return data; }2、使用<input type="file" id="fileUpload" />该方式,在后台接收不到值? 原因:需要设置一下name属性 <input type="file" id="fileUpload" name="名称任意" /> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |