1.htmlページ
一度に複数のファイルをアップロードすることができ、入力タグにこの属性を追加1
前記画像を複数選択してCtrlキーを押しながらキーを
示す効果：
上記の数値は、5つの選択されたファイル、およびページのエコーを表示し、コードがエコーそれ以下JS
2.jsページのエコー画像+複数ファイルのアップロード
入力エリアのdivボックス内の画像は、以下に定義1.表示し、メソッドのonchange入力内側のラベルに書き込み、私はVUEのフレームワークを使用しているため、書き込みが@changeがあるので：
あなたはすべてを置くことができるように2.どのようにコードを書くためにトラバーサル画像が表示されます
setImagePreview:function(){
//补充说明：因为我们给input标签设置multiple属性，因此一次可以上传多个文件
//获取选择图片的个数
var dom = document.getElementById("img");
var files = dom.files;
var length = files.length;
var imgObjPreview = document.getElementById("localImag");
//3、回显
imgObjPreview.innerHTML = "";
$.each(files,function(key,value){
//每次都只会遍历一个图片数据
var img = document.createElement("img");
var imgObjPreview = document.getElementById("localImag");
var fr = new FileReader();
fr.onload = function(){
img.src=this.result;
img.style.width="50px";
img.style.height="70px";
img.style.marginRight="10px";
img.style.marginTop="10px";
img.id=key+"img";
imgObjPreview.appendChild(img);
}
fr.readAsDataURL(value);//读取文件
})
}
3.複数ファイルのアップロード
ここでは、書き込みファイルのタグIDを
$.ajaxFileUpload({
url: '../../br/detial/problem/upload',
type: 'post',
fileElementId: ['img'],
data: {checkReportId: checkReportId, componentName: componentName,problemDesc:problemDesc,
badNumber:badNumber,badPosition:badPosition,fixMeasures:fixMeasures,xgps:xgps,ygps:ygps,
problemLevel:problemLevel,isSign:isSign},
dataType: 'json',
success: function (data, status) {
dialogMsg('添加成功！');
dialogClose();
if(data.code=='0'){
dialogMsg(data.msg, 'success');
}else{
dialogMsg(data.msg, 'error');
}
},
error: function (data, status, e) {
dialogMsg(e, 'error')
}
});
ajaxfileupload.jsを紹介するこの$ .ajaxFileUploadの必要性
背景レセプション
コードは以下の通りであります：
public R uploadTemplateCover(HttpServletRequest request) throws IOException{
CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext());
R r=null;
if (multipartResolver.isMultipart(request)) {//参数是否包含文件
String checkReportId =request.getParameter("checkReportId");
String componentName =request.getParameter("componentName");
String problemDesc =request.getParameter("problemDesc");
String badNumber =request.getParameter("badNumber");
String badPosition =request.getParameter("badPosition");
String fixMeasures =request.getParameter("fixMeasures");
String xgps =request.getParameter("xgps");
String ygps =request.getParameter("ygps");
String problemLevel =request.getParameter("problemLevel");
String isSign =request.getParameter("isSign");
//新建对象
BrDetialProblemEntity b=new BrDetialProblemEntity();
b.setCheckReportId(checkReportId);
b.setComponentName(componentName);
b.setProblemDesc(problemDesc);
b.setBadNumber(badNumber);
b.setBadPosition(badPosition);
b.setFixMeasures(fixMeasures);
b.setXgps(xgps);
b.setYgps(ygps);
b.setProblemLevel(problemLevel);
b.setIsSign(isSign);
//将每一个图片上传至服务器
String imgUrlStr="";
//上传图片
MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
//上传路段图标文件到服务器
/*MultipartFile multipartFileImg = multiRequest.getFile("img");*/
List<MultipartFile> multipartFileImg=multiRequest.getFiles("img");
if(multipartFileImg!=null){
for(int i=0;i<multipartFileImg.size();i++) {
//获取文件原始名
String fileName = multipartFileImg.get(i).getOriginalFilename();
//获取文件后缀名
String fileType = fileName.substring(fileName.lastIndexOf("."));
//获取输入流
InputStream ins = multipartFileImg.get(i).getInputStream();
//文件保存目录
String filePath=request.getSession().getServletContext().getRealPath("/").replaceAll("\\\\", "/")+"\\detialProblemImg\\";
File fi=new File(filePath);
//如果文件夹不存在则创建
if(!fi.exists()){
fi.mkdirs();
}
FileOutputStream out = new FileOutputStream(filePath+componentName+"problem"+(i+1)+fileType);
int read = 0;
byte[] buffer = new byte[4096];
while ((read = ins.read(buffer)) != -1) {
out.write(buffer, 0, read); // 保存文件数据
}
out.flush();
out.close();
ins.close();
imgUrlStr+=componentName+"问题"+i+fileType+",";
}
}
//将问题图片url集合存入数据库
b.setImageUrl(imgUrlStr.substring(0,imgUrlStr.length()-1));
r=brDetialProblemService.saveBrDetialProblem(b);
}
return r;
}
