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吧!!!
相关推荐
这是一个无刷新上传插件,网上有很多相关的博客资料,不知道怎么设置的自己搜索相关资料,不需要分数。
使用jquery 预览图片并实现无刷新上传 使用了jquery.ajaxfileupload.js插件实现无刷新上传
php结合jquery ajaxfileupload及jcrop插件实现无刷新上传,裁剪
利用ajaxfileupload插件实现文件上传无刷新的具体方法,需要的朋友可以参考一下
ajaxfileupload.js 这是个非常好的异步上传图片的插件,来解决form表单上传时要刷新页面的问题。
使用jquery.ajaxfileupload.js实现无刷性上传文件,此插件的原理是在文档中创建iframe和form然后在将文件上传到服务器。在此感觉原创作者。
ajaxfileupload.js是实现页面无刷新上传文件的一个插件
ajaxfileupload.js 这是个非常好的异步上传图片的插件,来解决form表单上传时要刷新页面的问题。支持多文件上传
在使用easyUI做前端样式展示时,遇到了文件上传的问题,而且是在弹出层中提交表单,想做到不刷新页面,所以选择了使用ajaxFileUpload插件。下面通过本文给大家分享springMVC + easyui + $.ajaxFileUpload实现文件...
项目中会经常用到AJAX无刷新上传图片,但是iframe上传和flash插件都是比较复杂的,所以就找了一个jquery的插件。下面通过实例代码给大家介绍使用jQuery ajaxupload插件实现无刷新上传文件功能,需要的朋友参考下吧
做软工作业时,需要实现无刷新异步上传图片到服务器,于是想利用Ajax: 得到file的val,再post过去… 等真正实现的时候才发现,根本行不通。 于是翻来翻去找到一个封装好的js插件,可以实现异步上传文件。 ...
3.图片上传 并且ajax无刷新显示(使用了ajaxfileupload插件) 学习JFinal练习时所作demo,分享出来供需要的大家参考 项目引入eclipse,使用tomcat容器运行即可,localhost/项目名 访问 数据库mysql,转储的sql文件...
AjaxUpLoad.js的使用实现无刷新文件上传,如图 1、创建页面并编写HTML 上传文档: <span id=doc><input type=text disabled=disabled /> <input type=hidden id=hidFileName /> <input type=...
ajaxFileUpload是一个异步上传文件的jQuery插件传统的form表单方式上传文件, 必然会刷新整个页面。 那么在不刷新界面的情况下实现文件的上传呢? 在 HTML4下, 聪明的程序员们发明了 ajax file upload 方式(form +...
ajaxfileupload.js是一款jQuery的异步上传文件插件,使用简单且容易上手。 前置条件:ajaxfileupload.js文件,百度下载一个就行。 JS引用: 代码如下: [removed][removed] [removed][removed] html代码: 代码...
支持IE8+ 及主流浏览器 修复 1.原上传插件同个文件只能点击一次的问题. 2.增加选择文件后对文件大小的判断 3.不能和validate js一同使用的问题