使用ajaxFileUpload插件实现图片无刷新上传
1,在页面
<script type="text/javascript" src="js/jquery/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="js/jquery/ajaxfileupload.js"></script> <script type="text/javascript"> function uploadimg(obj,id){ $.ajaxFileUpload({ url:'uploadImg.do', secureuri:false, //是否启用安全提交,默认为false fileElementId:'file'+id, //文件选择框的id属性 dataType:'text', //服务器返回的格式,可以是json或xml等 success:function(data,status){ //服务器响应成功时的处理函数 data = data.replace("<PRE>", ''); //ajaxFileUpload会对服务器响应回来的text内容加上<pre>text</pre>前后缀 data = data.replace("</PRE>", ''); data = data.replace("<pre>", ''); data = data.replace("</pre>", ''); if(data.substring(0, 1) == 1){ $("#img"+id).attr("src",data.substring(2)); } }, error:function(data, status, e){ console.log("上传失败!"); } }); //file控件只能激发一次,要重新加载 var nf = obj.cloneNode(true); nf.value=''; obj.parentNode.replaceChild(nf, obj); } </script> <input type="file" id="file1" class="file" name="myfile" onchange="uploadimg(this,1)"/>
2,后台Controller
@RequestMapping(value="/uploadImg",produces="text/plain;charset=UTF-8") @ResponseBody public String uploadImg(MultipartFile myfile, HttpServletRequest request) throws IOException{ System.out.println("文件开始上传开始"); String realPath = request.getSession().getServletContext().getRealPath("/upload"); String originalFilename = null; if(myfile.isEmpty()){ System.out.println("上传失败!"); return "0^上传失败,上传文件为空"; }else{ if("image/jpeg".equals(myfile.getContentType())){ originalFilename = myfile.getOriginalFilename(); try { FileUtils.copyInputStreamToFile(myfile.getInputStream(), new File(realPath, originalFilename)); } catch (IOException e) { System.out.println("上传失败!"); e.printStackTrace(); return "0^上传失败,文件保存失败"; } }else{ System.out.println("上传失败!"); return "0^上传失败,文件不是指定的类型"; } } //因为在Windows下<img src="file:///D:/aa.jpg">能被firefox显示,而<img src="D:/aa.jpg">firefox是不认的 System.out.println("上传成功!"); System.out.println(originalFilename); return "1^"+request.getContextPath() + "/upload/" + originalFilename; }
附件中有我用的ajaxfileupload.js
本来我是想要json来着,但弄了好长时间没成功,就选text吧!!!
相关推荐
Balalala 2015-04-13
ajaxyan 2013-09-12
wujiajax 2015-04-10
XuDTone 2015-04-07
dlcshjw 2019-04-19
XIAyuzheng 2018-08-23
wmsjlihuan 2019-04-14
maidou0 2015-03-10
为了美观,把 type="file" 控件隐藏。点击“上传”按钮,click调用隐藏文件控件,再选择文件。查了一遍,好像是ie为了安全控制,文件的必须鼠标点击过后,才能提交。还没有想到其他的方法。。。
BluewineY 2013-06-17
kentrl 2018-08-23
dalong 2016-07-28
5,success 提交成功后自动执行的处理函数,参数data就是服务器返回的数据。6,error 提交失败自动执行的处理函数。7,data 自定义参数。fileElementId: 'file1',
daydream000 2016-03-21
longshengguoji 2015-12-08
Ardencyz 2015-09-25
ghjcduhvfyjhbf 2015-09-24
learningever 2015-08-07
shumark 2015-04-10
shumark 2015-04-07
Balalala 2015-02-27