关于h5前端多图上传和后台接收
来源:互联网 发布:战绳训练方法 知乎 编辑:程序博客网 时间:2024/05/29 19:51
首先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; }
阅读全文
0 0
- 关于h5前端多图上传和后台接收
- 关于前端html文件上传和后台接收方法
- Form表单多文件上传(H5和Android && Java后台)
- FineUploader 参数 上传 和 后台接收
- 关于前端传参数,后台接收的问题
- MVC 多文件上传后台接收
- Android中图片 的上传和接收以及后台图片的上传和接收
- js上传图片预览,php后台接收实例,已改写为多图上传预览
- 前端ajax数据后台接收
- SpringMvc前端提交多个对象,后台接收
- express后台接收文件以及jquery前端上传文件的方法
- Ios上传图片 后台接收
- WEB前端 和 JAVA后台 关于头像上传功能实现中出现的ajax 404问题经验
- 阿里云oss springMVC+ajax后台和前端上传文件
- jfinal前端前台传json后台接收
- 关于前端和后台保留小数点后两位的方法
- js上传文件 java后台接收文件
- ajax上传文件struts2后台接收处理
- 链接
- Python 中的字符串操作
- WebGL:二、ThreeJs 简介
- Python 实现简单的局域网聊天
- dubbo泛化调用和泛化引用
- 关于h5前端多图上传和后台接收
- 详述 IntelliJ IDEA 的使用界面
- 关于百度集成API bd_share的一些窥探
- 浅谈大数据系统数据采集产品的架构以及演进
- 无法附加到进程
- Spring框架学习之三(类型数据的注入)
- LCP 最长公共前缀
- vue中更改数组中属性,在页面中不生效
- Python学习笔记(二)条件判断