关于h5前端多图上传和后台接收

首先html和jsp的关于图片上传的js还是有略微差别的,前段时间写了个单张上传的。今天是因需求增加,所以要改为多张上传,废话也不说,上代码先
html部分的,比之前的多了个multiple,表示的是我要选择多张图片

<td><input type="file" id="pic" name="pic" multiple onchange="uploadFile(this)">td>

js部分,这里相比较于单张的无非就是要先获取到files,然后去遍历它,最后追加到formdata里面。

function uploadFile(obj){
    var f1=obj.files.length;
    console.log(f1);
    var formData = new FormData();

  for (var i=0;i< f1;i++) {
        var file=obj.files[i];
        //var r = new FileReader();  
        //r.readAsDataURL(file);
        formData.append("file" , file);
}

 $.ajax({
        type: "POST",
        url: ",
        data: formData ,
        processData : false, //必须false才会自动加上正确的Content-Type
        dataType: 'json',
        contentType : false ,
        xhr: function(){
            var xhr = $.ajaxSettings.xhr();
            if(onprogress && xhr.upload) {
                xhr.upload.addEventListener("progress" , onprogress, false);
                return xhr;
            }
        },
        success: function(res) {
            console.log(res.url);
            $("#versionsize").val(res.filesize);
            $("#versionurl").val(res.url);
        }
    });

java接收:

    //提供get/set方法
    private File[] file; //上传的文件
    private String[] fileFileName; //文件名称
    private String[] fileContentType; //文件类型

public String uploadmore(String filepath) throws Exception{
        String url = "";
        if (file != null) {
              java.util.Date Datenow=new java.util.Date();//获取当前日期
              java.text.SimpleDateFormat formatter = new java.text.SimpleDateFormat("yyyyMMdd");  
              String nowdate = formatter.format(Datenow).substring(0,6); //将日期格式化
              String realDirectory = request.getSession().getServletContext().getRealPath(filepath)+"/"+nowdate;
              for (int i = 0; i < file.length; i++) {
                  String fileType = fileFileName[i].substring(fileFileName[i].length()-3);
                  String filename=System.currentTimeMillis() + (i + ".") + fileType;
                  String filedir = realDirectory+"/" + filename; // 以系统时间作为上传文件名称,设置上传文件的完整路径
                  if (file[i].length()>1024*1024) {         
                      ImgUtill.compressImage(file[i].getAbsolutePath(), filedir, 500, 680);
                }else{
                      File f = new File(filedir);
                      try {
                            FileUtils.copyFile(file[i], f);
                      } catch (IOException e) {
                            e.printStackTrace();
                      }
                }
                    if (i==file.length-1) {
                      url += Constants.FILE_DIRECTORY + filepath + "/" +nowdate+"/"+filename;
                    }else{
                      url += Constants.FILE_DIRECTORY + filepath + "/" +nowdate+"/"+filename+",";
                    }
            }
        }  
            return url;
    }

你可能感兴趣的:(web前端,java,前端,图片,html)