menu
more_vert
利用html5的FormData对象实现多图上传

作者:dayu

      <div class="control-group">
        <label class="control-label">*PC端银行LOGO:</label>
        <div class="controls">
          <input type="hidden"name="pcLogopic" value="" />
          <input type="file" name="file"value="上传" onclick="uploadImage()" class="btn btn-primary"/>
        </div>
      </div>
    </form>
    <form enctype="multipart/form-data"modelAttribute="bankAdminist" action="" method="post" class="form-horizontal">
      <div class="control-group">
        <label class="control-label">*APP端银行LOGO:</label>
        <div class="controls">
          <input type="hidden"name="appLogopic" value="" />
          <input type="file" name="file"value="上传" onclick="uploadImage2()" class="btn btn-primary"/>
        </div>
      </div>
    </form>

  </body>

  js代码如下: 

  function uploadImage(){
    var file=$("#file1").val();
    var num=1;
    upload(file,num);
  }
  function uploadImage2(){
    var num=2
    var file=$("#file2").val();
    upload(file,num);
  }
  function upload(file,num){
    if(file==""){
      alert("请选择上传的文件!");
      return false ;
    }
    var form = document.getElementById("inputForm"+num);
    //得到formdata对象
    var formdata = new FormData(form);
    //ajax异步上传图片
    //返回的filename类似 front/a.jpg
    $.ajax({
      url : "/momo/picture/uploadImg.do",
      type : "POST",
      data : formdata,
      //dataType: "json",
      cache : false,
      contentType : false, //不可缺
      processData : false, //不可缺
      success:function(filename){
      },
      error: function (returndata) {
        alert(JSON.stringify(returndata));
      }
    });
  }

  后台代码:

  

  @RequestMapping(value="/uploadImg")
  @ResponseBody
  public String uploadImg(@RequestParam(value = "file", required = true) MultipartFile multipartFile,HttpServletRequest request,HttpServletResponse response) throws IOException{

    String name = multipartFile.getOriginalFilename();

    System.out.println(multipartFile+"---"+name);

    .........

  }

2.不使用form,只用input就可以完成

  html代码如下: 

  <body>
    <div class="control-group">
    <label class="control-label">*PC端银行LOGO:</label>
    <div class="controls">
    <input type="hidden"name="pcLogopic" value="" />
    <input type="file" name="file" multiple="multiple"value="上传" onclick="uploadImage()" class="btn btn-primary"/>

    </div>
    </div>
    <div class="control-group">
    <label class="control-label">*APP端银行LOGO:</label>
    <div class="controls">
    <input type="hidden"name="appLogopic" value="" />

    <input type="file" name="file" multiple="multiple"value="上传" onclick="uploadImage2()" class="btn btn-primary"/>

    </div>
    </div>

  </body>

  js代码如下: 

  function uploadImage(){
    var file=$("#file1").val();
    var num=1;
    upload(file,num);
  }
  function uploadImage2(){
    var num=2;
    var file=$("#file2").val();
    upload(file,num);
  }
  function upload(file,num){
    if(file==""){
      alert("请选择上传的文件!");
      return false ;
  }

  var files= $("#file"+num).get(0).files;
  //如果有选择图片则上传图片
  var formData= new FormData();
  if(files.length>0){
    for(var i=0;i<files.length;i++){
      formData.append(‘file‘,files[i]);
    }
  }
  //得到formdata对象
  //ajax异步上传图片
  $.ajax({
    url : "/momo/picture/uploadImg.do",
    type : "POST",
    data : formData,
    //dataType: "json",
    cache : false,
    contentType : false, //不可缺
    processData : false, //不可缺
    success:function(filename){
    },
    error: function (returndata) {
      alert(JSON.stringify(returndata));
    }
   });
  }

  后台代码同上。

  我这里只是简单展示下数据发送到了后端文件上传控制器,剩下的根据项目业务的需求继续进行下去吧

利用html5的FormData对象实现多图上传

原文地址:http://www.cnblogs.com/momo1210/p/7525660.html