关于h5前端多图上传和后台接收
2017-11-03 18:10
288 查看
首先html和jsp的关于图片上传的js还是有略微差别的,前段时间写了个单张上传的。今天是因需求增加,所以要改为多张上传,废话也不说,上代码先
html部分的,比之前的多了个multiple,表示的是我要选择多张图片
js部分,这里相比较于单张的无非就是要先获取到files,然后去遍历它,最后追加到formdata里面。
java接收:
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; }
相关文章推荐
- 关于前端html图片和文件上传和后台接收方法
- WEB前端 和 JAVA后台 关于头像上传功能实现中出现的ajax 404问题经验
- express后台接收文件以及jquery前端上传文件的方法
- 关于前端传参数,后台接收的问题
- Volley get请求上传中文参数,后台接收到的是乱码的解决办法
- 前端页面表单提交多个name相同的input框,后台接收方法
- base64编码上传图片java后台接收实例
- 阿里云oss springMVC+ajax后台和前端上传文件
- 关于后台挂QQ,挂JAVA,无法发送或接收MMS
- 通过formdata ajax上传图片 以及后台接收formdata数据 mvc
- phonegap上传及后台springmvc接收文件
- Django 后台上传图片前端无法展示
- Jersey后端服务接收ajax前端的图片上传
- 后台接收前端JSON数组转换成List
- Angular14 利用Angular2实现文件上传的前端、利用springBoot实现文件上传的后台
- C#无限分级实现,前端WEB页面接收,后台提供层级Json数据
- struts2 + ajax(由前台的form提交数据到后台,再根据form所调用返回获取的后台json格式的数据返回到前端,然后前端用jquery对json数据进行解析)==》》涉及文件上传的部分
- 关于web前端发送的包含汉字的信息在后台servlet中乱码问题解决
- 关于后台接收并存储移动端自带emoji的详细方法(mysql数据库)
- java后台接收app上传的图片的示例代码