ajax上传图片
Posted lazyli
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ajax上传图片相关的知识,希望对你有一定的参考价值。
页面:
<div class="ml_labelOne">
<div class="ml_label_text mustWrite" style="width:125px;float: left;line-height:34px;">
照片:
</div>
<div class="ml_label_input1 about_img">
<div class="upload_img" style="margin-left: 24px">
</div>
<div class="file">
<input class="img_file" type="file">
</div>
</div>
</div>
js:var
fileObj = document.getElementById(
"FileUpload"
).files[0];
// js 获取文件对象
$("body").on(‘change‘, ".img_file", function (e) {
var file = this.files[0];
now = $(this);
if (window.FileReader) {
var formFile = new FormData();
formFile.append("action", "UploadVMKImagePath");
formFile.append("file", file); //加入文件对象
console.log(ctxPath);
console.log(file);
$.ajax({
type: "POST",
url: ctxPath + "supplier/add", //上传路径
data: formFile,
cache: false,
contentType: false, //不可缺
processData: false,
dataType: "json",
success: function (ret) {
console.log(ret);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("上传失败,请检查网络后重试");
}
});
var reader = new FileReader();
reader.readAsDataURL(file);
//console.log($(this, "p++++++++++fnnf"))
//监听文件读取结束后事件
$(this).parents(".about_img").find(".upload_img").append(‘<div class="upload_photo"><img class="photo" src=""><div class="delete_img">删除</div></div>‘)
}
reader.onloadend = function (e) {
console.log("hldflkdjfldj");
console.log($(this));
now.parents(".about_img").find(".photo:last").attr("src", e.target.result); //e.target.result就是最后的路径地址
};
});
后台接收:
@Controller
@RequestMapping("/supplier")
public class PartSupplierAction {
@RequestMapping("/add")
@ResponseBody
public Map<String,Object> add(@RequestParam("file") MultipartFile file){
Map<String,Object> map = new HashMap<>();
System.out.println(file.getOriginalFilename());
map.put("status",200 );
return map;
}
}
以上是关于ajax上传图片的主要内容,如果未能解决你的问题,请参考以下文章