您的位置:首页 > Web前端

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

2017-11-03 18:10 288 查看
首先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;
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  前端 图片 html