form表单的一个页面多个上传按钮实例

时间:2022-01-29 17:44:45
/* * 图片上传 */

@RequestMapping("/uploadFile") @ResponseBody public String uploadFile(@RequestParam(value = "imageAddr", required = false)String imageAddr,@RequestParam(value = "genre", required = false)String genre,@RequestParam(value = "uploadFile", required = false) MultipartFile uploadFile,HttpServletRequest request, HttpServletResponse response){ MapresultMap=new HashMap();

      //获取当前时间 File.separator等同于/或者\\

        String fileFolder = File.separator + DateUtil.getYear(new Date())

        + File.separator +  DateUtil.getMonth(new Date()) + File.separator

        + DateUtil.getDay(new Date());

        String fileName =uploadFile.getOriginalFilename();//获取文件上传的名称

        String newFileName="";

        //获取照片类型  人员/车辆

    System.out.println(fileName);
  
    System.out.println(genre+imageAddr); try { String uploadPath="";//图片上传的目录 InputStream in = this.getClass().getResourceAsStream("/conf.properties"); Properties props = new Properties(); InputStreamReader inputStreamReader = new InputStreamReader(in, "UTF-8"); props.load(inputStreamReader); if("renyuan".equals(genre)) { uploadPath = props.getProperty("renyuan_Upload_path")+fileFolder; }else if ("cheliang".equals(genre)) { uploadPath = props.getProperty("cheliang_Upload_path")+fileFolder; } //重新命名 if(null!=fileName){ newFileName=UUID.randomUUID ()+fileName.substring (fileName.lastIndexOf (".")); } File files=new File(uploadPath,newFileName); if(!files.exists ()){ files.mkdirs (); } uploadFile.transferTo (files); resultMap.put("fileAdress",fileFolder+File.separator+newFileName); resultMap.put("imageAddr",imageAddr); resultMap.put("uploadFlag",true); } catch (Exception e) { resultMap.put("uploadFlag",false); //记日志 } String json=JSONObject.toJSONString(resultMap).toString(); writeJson(json,response); return null; } /* * 写入数据 */ private void writeJson(String json, HttpServletResponse response) { response.setContentType("application/json;charset=UTF-8"); PrintWriter out = null; try { out = response.getWriter(); out.print(json); out.flush(); } catch (Exception e) { e.printStackTrace(); } finally { if (null != out) { out.close(); } } }

上面是上传图片的控制层

下面是上传图片的ajax提交

function upload(path) {

      var form = new FormData();

var xx =  $(":input[name='uploadName']").val();

      var ImageName = document.getElementsByName("uploadName")[0].value;

      var uploadName = ImageName.name;

      alert(ImageName);

          var genre=$(":input[name='genre']").val();

      var imageAddr=$(":input[name='imageAddr']").val();

      //追加图片类型  人员/车辆

      form.append(genre,genre);

      //追加回传照片地址

      form.append(imageAddr,imageAddr);

      form.append(uploadName,ImageName);

alert(path);

      $.ajax({ 

          type: "POST", 

          url:"uploadFile",

          contentType:'multipart/form-data',

          data:form,

          // 下面三个参数要指定,如果不指定,会报一个JQuery的错误

              cache: false,

              contentType: false,

              processData: false,

          async: false, 

          success: function(data) {

          console.log(data);

              if(data.uploadFlag==true){

              alert("上传成功");

console.log("地址"+data.imageAddr);

console.log("图片名"+data.fileAdress);

              alert(data.imageAddr);

              alert(data.fileAdress);

                    //往input框里传值

                  document.getElementById(data.imageAddr).value=data.fileAdress;

                  $("#ImgPr").attr("src",data.fileAdress);

              }else{

                  alert("上传出错");

              }

          } 

      });

}

form表单的一个页面多个上传按钮实例

多个form表单提交  

图片预览可以在网上很多素材  也可以用下面发的那个  也可以上传完成后拿回传的图片路径追加给img的src显示 

jQuery.fn

.extend({

uploadPreview : function(opts) {

var _self = this, _this = $(this);

opts = jQuery.extend({

Img : "ImgPr",

Width : 100,

Height : 100,

ImgType : [ "gif", "jpeg", "jpg", "bmp", "png" ],

Callback : function() {

}

}, opts || {});

_self.getObjectURL = function(file) {

var url = null;

if (window.createObjectURL != undefined) {

url = window.createObjectURL(file)

} else if (window.URL != undefined) {

url = window.URL.createObjectURL(file)

} else if (window.webkitURL != undefined) {

url = window.webkitURL.createObjectURL(file)

}

return url

};

_this

.change(function() {

if (this.value) {

if (!RegExp(

"\.(" + opts.ImgType.join("|")

+ ")$", "i").test(

this.value.toLowerCase())) {

alert("选择文件错误,图片类型必须是"

+ opts.ImgType.join(",")

+ "中的一种");

this.value = "";

return false

}

//高版本Jquey使用  if ($.support.leadingWhitespace)

if ($.support.leadingWhitespace) { //低版本jquery中使用$.browser.msie

console

.log(_self

.getObjectURL(this.files[0]));

try {

_this

.parent('div')

.find("." + opts.Img)

.attr(

'src',

_self

.getObjectURL(this.files[0]));

} catch (e) {

var src = "";

var obj = _this.parent('div')

.find("." + opts.Img);

var div = obj.parent("div")[0];

_self.select();

if (top != self) {

window.parent.document.body

.focus()

} else {

_self.blur()

}

src = document.selection

.createRange().text;

document.selection.empty();

obj.hide();

obj

.parent("div")

.css(

{

'filter' : 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)',

'width' : opts.Width

+ 'px',

'height' : opts.Height

+ 'px'

});

div.filters

.item("DXImageTransform.Microsoft.AlphaImageLoader").src = src

}

} else {

_this

.parent('div')

.find("." + opts.Img)

.attr(

'src',

_self

.getObjectURL(this.files[0]))

}

opts.Callback()

}

})

}

});

$(".up").click(function() {

$(this).uploadPreview({

Img : "ImgPr"

});

})