2.1 ：html
html页面由前端实现，此处增加<ul><li></li></ul>是为了配合图片单击放大图片功能的实现
<ul id="ul_other">
<li><input type="file" id="file_other" class="file_input" onchange="add_file_image('other')"></li>
</ul>
2.2 ：js
var imgSrc_other=[]
var imgFile_other=[]
function add_file_image(id) {
var fileList =document.getElementById("file_"+id).files// js 获取文件对象
if (verificationFile(fileList[0])){
for(var i =0i
var imgSrcI =getObjectURL(fileList[i])
if (id=="other"){
imgSrc_other.push(imgSrcI)
if(fileList[i].size/1024 >100) { //大于100kb，进行压缩上传
fileResizetoFile(fileList[i],0.6,function(res){
imgFile_other.push(res)
})
}else{
imgFile_other.push(res)
}
}
addNewContent(id)
}
}
//新增图片
function addNewContent(obj) {
//删除原先
$("#ul_"+obj).html("")
//判断循环新增
var text=""
if (obj=="other"){
for(var a =0a <imgSrc_examReportCard.lengtha++) {
text +='<li><input type="file" id="file_other" class="file_input" onchange="add_file_image('other')"></li>'
}
}else{
console.log('脏数据')
}
var oldBox ="<li><div class=\"filediv\"><span>+</span>\n" +
"<input type=\"file\" id=\"file_"+obj+"\" class=\"file_input\" onchange=\"add_file_image('"+obj+"')\">\n" +
"</div></li>"
$("#ul_"+obj).html( text+localText)
}
使用formData上传
var form =document.getElementById("form_addArchive")//表单id
var formData =new FormData(form)
$.each(imgFile_other,function(i, file){
formData.append('imgFileOther', file)
})
$.ajax({
url:url,
type:'POST',
async:true,
cache:false,
contentType:false,
processData:false,
dataType:'json',
data:formData,
xhrFields:{
withCredentials:true
},
success:function(data) {
}
},
error:function(XMLHttpRequest, textStatus, errorThrown) {
}
})
后台使用@RequestParam(value ="imgFileOther", required=false) List<MultipartFile>imgFileOther, 接受
//获取图片url以便显示
//文件格式验证
//图片压缩
具体思路是，上传图片时，放入临时目录，上传完成后，对图片生成uuid，重命名并已入图片文件夹，在数据库中记录uuid与商品id的对应关系。插件的问题，jquery-file-upload我没用过，不过看了github上的文档，感觉说得蛮详细的。后端的也有涉及。node的部分使用express的中间件jquery-file-upload-middleware，你在github上搜这个吧，有很详细的前后端的示例代码。
如果你想要用原生的也很简单。利用html5的上传接口，或者使用iframe做个隐藏表单就行了。后端node部分，就是解析req的body部分，并且把他们写入文件。因为是数据流，可以使用更快地流写入方式。
详见原文：https://www.cnblogs.com/LO-gin/p/6817319.html
方法一：使用js的FileReader对象
1、FileReader对象简介
检测浏览器对FileReader的支持
调用FileReader对象的方法
FileReader 的实例拥有 4 个方法，其中 3 个用以读取文件，另一个用来中断读取。下面的表格列出了这些方法以及他们的参数和功能，
需要注意的是 ，无论读取成功或失败，方法并不会返回读取结果，这一结果存储在 result属性中。
readAsText：该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。这个方法非常容易理解，将文件以文本方式读取，读取的结果即是这个文本文件中的内容。
readAsBinaryString：该方法将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过这段字符串存储文件。
readAsDataURL：这是例子程序中用到的方法，该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。（其中base64的方式就是由此来获得的。。）
文件一旦开始读取，无论成功或失败，实例的 result 属性都会被填充。如果读取失败，则 result 的值为 null ，否则即是读取的结果，绝大多数的程序都会在成功读取文件的时候，抓取这个值。
例子：
3 、使用js的FileReader对象实现上传图片时的图片预览功能
方法二：使用window.createObjectURL
