html代码： ------------------添加--------------------------
accept="image/gif,image/jpeg,image/jpg,image/png" 使用这个可以让用户只能看到并上传图片 原本是这个accept="image/*"的，后来发现在Chrome浏览器上响应过慢，所以加上mime类型，避免全部匹配引起时的浏览器响应过慢问题
//修改，这里如果不用onchange，会出现一个小bug,当你提交后，图片只能变一次
js代码： //实现点击图片同时，触发type=file这个input
$("#img-change").click(function () { $("#file").click();}) 当input发生改变时，如果有图片，则预览图片（这里只判断文件的改变，没判断图片）
/*$("#file").change(function (event) {*/ var filechange=function(event){ var files = event.target.files, file; if (files && files.length > 0) { // 获取目前上传的文件 file = files[0];// 文件大小校验的动作 if(file.size > 1024 * 1024 * 2) { alert('图片大小不能超过 2MB!'); return false; } // 获取 window 的 URL 工具 var URL = window.URL || window.webkitURL; // 通过 file 生成目标 url var imgURL = URL.createObjectURL(file); //用attr将img的src属性改成获得的url $("#img-change").attr("src",imgURL); // 使用下面这句可以在内存中释放对此 url 的伺服，跑了之后那个 URL 就无效了 // URL.revokeObjectURL(imgURL); }}; 接下来实现当点击按钮时，通过jquey的一个插件ajaxupload来进行上传图片,
代码如下：
$("#btn").click(function () { $.ajaxFileUpload({ url: '/imgUpload', fileElementId:'file', dataType:'txt', secureuri : false, success: function (data){ if(data=="yes"){ $("#img-alert").css("display","block"); } }, error:function(data,status,e){ alert(e); } }); }); 接下来是后台代码，我的后台是spring mvc框架，我没试过不用spring mvc的框架，但最多在拦截时不同，得到后，在文件处理那块是一样的
@RequestMapping(value = "/imgUpload") @ResponseBody public synchronized String imgUpload(@RequestParam("file") MultipartFile file,HttpServletRequest request) throws IOException { String tishi="no"; System.out.println("arrive here"); if(!file.isEmpty()) { //System.out.println(file.getOriginalFilename()); String message = System.currentTimeMillis() + file.getOriginalFilename();//现在的文件名是时间戳加原文件名，出现图片相同时，读取不出来的bug String realPath = request.getSession().getServletContext().getRealPath("/upload/");//将文件保存在当前工程下的一个upload文件 FileUtils.copyInputStreamToFile(file.getInputStream(), new File(realPath, message));//将文件的输入流输出到一个新的文件 message="upload/"+message; HttpSession session=request.getSession(); Integer id=(Integer)session.getAttribute("userid");//在session中获得用户id User user=userService.get(id);//在dao层保存数据，也就是图片的地址 user.setPhoto(message); userService.update(user); tishi="yes";//返回yes,表示存储成功，可以使用try,catch来捕捉错误，这里偷懒不用 } return tishi; } 还有一点，还需再spring mvc框架下配置文件