ajax上传多张图片并回显原创

累行的博客 2020.01.01 05:48:03 阅读数：964

ajax上传多张图片并回显

html

<div class="form-group form-inline">
	<label class="control-label required">广告图片：</label>
	<!--保存图像地址-->
	<input type="hidden" id="url" name="url" />
	<a href="javascript:;" class="file">上传图片
	      <input type="file" multiple="multiple" name="myFile" id="myFile" onchange="setImg(this);" alt="更换图像"/>
	</a>
</div>
<div class="form-group form-inline" style="width:100%;padding-left: 60px;">
	<img id="showUserImg0" class="showUserImg" />
	<img id="showUserImg1" class="showUserImg" />
	<img id="showUserImg2" class="showUserImg" />
	<img id="showUserImg3" class="showUserImg" />
	<img id="showUserImg4" class="showUserImg" />
</div>

css

/**上传图片的按钮 start**/
.file {
	position: relative;
	display: inline-block;
	background: #D0EEFF;
	border: 1px solid #99D3F5;
	border-radius: 4px;
	padding: 4px 12px;
	overflow: hidden;
	color: #1E88C7;
	text-decoration: none;
	text-indent: 0;
	line-height: 20px;
	margin-left: 15px;
}
.file input {
	position: absolute;
	font-size: 100px;
	right: 0;
	top: 0;
	opacity: 0;
}
.file:hover {
	background: #AADFFD;
	border-color: #78C3F3;
	color: #004974;
	text-decoration: none;
}
/**上传图片的按钮 end**/

/**
 * 设置图像
 * @param obj
 * @returns {boolean}
 */
function setImg(obj) {
   var f = $(obj).val();
   //alert(f);
   //console.log(obj);
   if (f == null || f == undefined || f == '') {
      return false;
   }
   if (!/\.(?:png|jpg|bmp|gif|PNG|JPG|BMP|GIF)$/.test(f)) {
      alert("类型必须是图片(.png|jpg|bmp|gif|PNG|JPG|BMP|GIF)");
      $(obj).val('');
      return false;
   }
   if($(obj)[0].files.length > 5) {
      alert("上传图片不能超过5张！");
      return 0;
   }
   var data = new FormData();
   //$('xx')是jQuery对象，$('xx')[0]是将jQuery对象：$('xx')转换为JavaScript对象，这样才可以使用JavaScript对象的属性和方法；
   $.each($(obj)[0].files, function (i, file) {
      //console.log(file);
      data.append('myFile', file);
   });
   //console.log(data);
   //debugger
   $.ajax({
      type: "POST",
      url: "/advert/uploadAdvertImg", //上传路径
      data: data, //数据
      cache: false,
      contentType: false,    //不可缺
      processData: false,    //不可缺
      dataType: "json",
      success: function (data) { //debugger
         if (data.code == 200) {
            //console.log("图片返回地址："+ data.data);
               $("#url").val(data.data);//将地址存储好
               var imgs = data.data;
               $.each(imgs, function (i, path) {
                  var id = "#showUserImg"+i;
                  $(id).attr("src", path );//显示图片
               });
         } else {
         }
      },
      error: function (XMLHttpRequest, textStatus, errorThrown) {
         alert("上传失败，请检查网络后重试");
      }
   });

}

后台

/**
     * 上传广告图像
     * @param multipartFile 穿过来多个文件
     * @return
     * @throws IOException
     */
    @RequestMapping(value = "/uploadAdvertImg", method = RequestMethod.POST)
    @ResponseBody
    public LeixingResult uploadAdvertImg(@RequestParam("myFile") MultipartFile[] multipartFile){
        return advertService.uploadAdvertImg(multipartFile);
    }