jQuery+Ajax实现图片的预览和上传
jQuery+Ajax实现图片的预览和上传
1、配置Spring-web.xml
<!-- springmvc上传图片 --> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <property name="defaultEncoding" value="utf-8"></property> <property name="maxUploadSize" value="10485760000"></property> <property name="maxInMemorySize" value="40960"></property> </bean>
2、引用jQuery的插件ajaxFileUpload.js
地址:
https://github.com/carlcarl/AjaxFileUpload
在线引用一直没有效,就直接下载放到js文件夹中。
3、jsp代码
<div > <label >点击图片即可修改</label><br> <img id="headPic" src="/market/images/image.png" width="150px" height="150px" style="padding: 5px"> <input id="upload" name="file" accept="image/*" type="file" style="display: none"/> <button id="submit_btn" type="submit">确定修改</button> </div>
4、js代码
$(function() {
//头像预览
$("#headPic").click(function () {
$("#upload").click(); //隐藏了input:file样式后,点击头像就可以本地上传
$("#upload").on("change",function(){
var objUrl = getObjectURL(this.files[0]) ; //获取图片的路径,该路径不是图片在本地的路径
if (objUrl) {
$("#headPic").attr("src", objUrl) ; //将图片路径存入src中,显示出图片
}
});
});
//图片上传
$("#submit_btn").click(function () {
var imgurl = document.getElementById("upload").value;
$.ajaxFileUpload({
url:"uploadHeadPic",
fileElementId: "upload", //文件上传域的ID,这里是input的ID,而不是img的
dataType: 'json', //返回值类型 一般设置为json
contentType: "application/x-www-form-urlencoded; charset=utf-8",
success: function (data) {
alert(data.code+" "+ data.msg);
if (data.code==200){
$("#headPic").attr("src","/market/images/image.png");
//将图片换成默认的+图片
}
=
}
});
});
});
//建立一個可存取到該file的url
function getObjectURL(file) {
var url = null ;
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
5、后台java代码
@RequestMapping(value = "/uploadHeadPic" , method = RequestMethod.POST , produces = "application/json; charset=utf-8") @ResponseBody public Object uploadHeadPic(@RequestParam() MultipartFile file, HttpServletRequest request) { //在这里面文件存储的方案一般是:收到文件→获取文件名→在本地存储目录建立防重名文件→写入文件→返回成功信息 //如果上面的步骤中在结束前任意一步失败,那就直接失败了。 FileOutputStream out=null; if (null == file || file.isEmpty()) { responseObj = new ResponseObj(); responseObj.setCode(400); responseObj.setMsg("文件不能为空"); }else{ responseObj = new ResponseObj(); responseObj.setCode(200); responseObj.setMsg("文件上传成功"); //这里以用户ID作为文件夹 int uid = (Integer) request.getSession().getAttribute("userid"); //创建一个文件夹,网上代码很多 String url = new FileUtil().createImageDir( String.valueOf(uid)); try { //获得二进制流并输出 byte[] f = file.getBytes(); out = new FileOutputStream(url+file.getOriginalFilename()); out.write(f); } catch (IOException e) { System.out.println("上传失败"); responseObj.setCode(500); responseObj.setMsg("文件保存失败"); }finally { // 完毕,关闭所有链接 try { out.close(); } catch (IOException e) { System.out.println("关闭流失败"); } } } return new GsonUtil().CollectionToJson(responseObj); }
//在获得file后,打印下面信息 System.out.println(file.getContentType()); System.out.println(file.getOriginalFilename()); System.out.println(file.getName()); image/png //input配置的 accept="image/*" clipboard.png //上传的图片名 file //这个flie是input的name属性决定
现在有个问题是,在上传图片后,第二次点击上传,这时上传的图片依旧是之前的值,尝试多种清空input的file值也没有用。
以下方法都不行
var file = doucment.getElementById('file'); //1 file.value = ''; //虽然file的value不能设为有字符的值,但是可以设置为空值 //2 file.outerHTML = file.outerHTML; //重新初始化了file的html //3 var obj = document.getElementById('fileupload') ; obj.select(); document.selection.clear();
---------------------
作者:HYeeee
来源:CSDN
原文:https://blog.csdn.net/hyeeee/article/details/78594907?utm_source=copy
版权声明:本文为博主原创文章,转载请附上博文链接!