ajax jq 图片上传请求头_jQuery+Ajax实现图片的预览和上传

jQuery+Ajax实现图片的预览和上传

1、配置Spring-web.xml

2、引用jQuery的插件ajaxFileUpload.js

3、jsp代码

点击图片即可修改

确定修改

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

版权声明：本文为博主原创文章，转载请附上博文链接！