页面:
- <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 (Windows.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;
- }
- }
来源: http://www.bubuko.com/infodetail-3334283.html