form表單的一個頁面多個上傳按鈕實例

/* * 圖片上傳 */

@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表單提交  

圖片預覽可以在網上很多素材  也可以用下面發的那個  也可以上傳完成后拿回傳的圖片路徑追加給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"

});

})