多图文件上传

多图文件上传

采用前台js配合springMVC的方式上传图文，可多次上传，先预览，后统一提交图片，视频到后台处理。

1，表单html部分准备

<li class="img-3 addimg" onclick="addpic()" ><img src="images/sz.png" alt="" /></li>//指定一个添加图片的入口
<li class="img-3"  style="display: none" id="pic0">
    //这里用于预览上传的图片1
</li>
<li class="img-3"  style="display: none" id="pic1">
    //这里用于预览上传的图片2
</li>
...
<input type="file" name="file" id="file" multiple="multiple" onchange="upload();" style="display: none"/>
//这里是准备提交到服务器保存的隐藏域。可以指定accept="image/*"属性用于上传图片类型。

2，编写js代码

var num=0;//定义用于预览的div编号
var fordate=new FormData();//用于上传的表单数据对象。
//添加图片回显，点击触发选择文件。
function addpic() {
  $("#file").click();
}
//input框改变事件，触发上传图片预览
function upload() {
  var file = $("#file")[0];//文件对象转js对象
  for(var i=0;i<file.files.length&&num<9;i++){
    console.log(file.files[i].name);
    $("#pic"+(num+i)).show();//显示对应的预览区域
    if(file.files[i].name.indexOf(".mp4")>0){//判断文件属性，根据文件属性向div中插入video或img
      var div = "<video src=\"\" id='src"+(num+i)+"' style='width: 100%' controls alt=\"\"/>"+
          "<input type=\"hidden\" src=\"\" name=\"img\" alt=\"\" id=\"img0\"/>";
      $("#pic"+(num+i)).append(div);//写入到对应的div中。
      var img = document.getElementById("src"+(num+i));//获取预览对象的js对象。
      console.log($(img).attr("id"))
      if (file.files && file.files[i]){
        var fils=file.files[i];
        var srcc=window.URL.createObjectURL(fils);
        $(img).attr({'src':srcc,'width':500+'px','heigth':500+'px'});//初始化预览对象显示
        fordate.append('pic',fils);//将文件对象添加到fordate中。这里的文件名需要与后台接收多媒体数组对象的名称一致。
      }
    }else{
      var div = "<img src=\"\" id='src"+(num+i)+"'  alt=\"\"/>"+
          "<input type=\"hidden\" src=\"\" name=\"img\" alt=\"\" id=\"img0\"/>";
      $("#pic"+(num+i)).append(div);
      var img = document.getElementById("src"+(num+i));
      console.log($(img).attr("id"))
      if (file.files && file.files[i]){
        var fils=file.files[i];
        var srcc=window.URL.createObjectURL(fils);
        $(img).attr({'src':srcc,'width':500+'px','heigth':500+'px'});
        fordate.append('pic',fils);
      }
    }
  }
 num+=i;

3，表单提交事件

//表单提交按钮，提交表单
function submit() {
  //可以向fordate中继续添加其它的属性值。
  var title = $("#title").val();
  var addre = $("#addre").val();
  fordate.append("title",title);
  fordate.append("addre",addre);

  $.ajax({  //发送ajax请求
      url: "release",//提交地址
      type: "post",
      data: fordate,
      processData : false,
      contentType : false,
      success: function(json){
        console.log("发表成功"+json.result);
        window.location.href="index.html";
      }
  });
}

4，后台接收参数

@RequestMapping(value="/page/release",
                method=RequestMethod.POST,produces="application/json;charset=UTF-8")
@ResponseBody
public Map release(HttpServletRequest request,HttpSession session,
                   @RequestParam(value = "pic",required = true) MultipartFile[] pic,
                   String title,String addre) throws Exception{
  ...
  Map map = new HashMap();
  map.put("result",01);
  return map;
}
//注意提交方式是post，produces需要指定application/json。返回json需要注解ResponseBody。