关于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-TypedataType: '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;}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！