HYeeee通过本文主要向大家介绍了jquery ajax,图片上传-java等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
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代码
这里是将input不显示，实现点击图片上传文件。这里需要注意的是==input一定要写name=”file”==，否则后台会一直接收不到数据。
<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();