等等。
例如：
我后台定义一个对象：
examPaper 包含 String userId,Float userScore, MultipartFile examFile 用户id ,试卷分数，试卷文件
对象外面 classPaper有： String classId String className List<examPaper> examPaperList
这个时候，后台接收为 ClassPaper
如果按照平常的 form-data 提交 则应按以下方式提交：
let fd = new FormData()
fd.append("classId ",classId )
fd.append("className ",className )
examPaperList.forEach((item,index) ->{
fd.append("examPaperList["+index+"].userId",item.userId)
fd.append("examPaperList["+index+"].userScore",item.userScore)
fd.append("examPaperList["+index+"].examFile ",item.examFile )
})
以这种方式就可以实现 多附件 一一 对应提交。以避免对象转换错误问题。
HTML5 file组件的新属性accept : 如果在file组件中增加这个属性就可以直接控制上传的文件类型了，实在是很方便。
multiple：是否允许选择多个文件
HTML5 页面代码修改后
<img width="400" height="250"/><br />
<input type="file" id="pic" name="pic" onchange="printFileInfo()" accept="image/*" multiple="multiple"/>
<input type="button" value="上传图片" onclick="uploadFile()" /><br />
<div id="parent">
<div id="son"></div>
</div>
accept 的值可以参阅：IANA MIME 类型（标准 MIME 类型的完整列表），如果使用的是DW开发的话，软件本身就有提示。
如果选择了多个文件，可以用JS做循环打印，看看文件的名称，类型和大小,看演示代码
function printFileInfo(){
var picFile = document.getElementById("pic")
var files = picFile.files
for(var i=0i<files.lengthi++){
var file = files[i]
var div = document.createElement("div")
div.innerHTML = "第("+ (i+1) +") 个文件的名字："+ file.name +
" , 文件类型："+ file.type +" , 文件大小:"+ file.size
document.body.appendChild( div)
}
}
既然可以循环多文件的话，就可以尝试多文件上传了。
1、首先创建 XMLHttpRequest 对象
//这是全局变量。因为是示例，所以就没有判断浏览器类型，低版本IE这么写的话会出问题的
var xhr = new XMLHttpRequest()
2、上篇介绍了进度事件(Progress) ， 这次实现 progress 和 error 2个事件
error：在请求发生错误时触发。
对应上传时发生错误导致的上传失败：uploadFailed()
//上传失败
function uploadFailed(evt) {
alert("上传失败")
}
progress：在接收相应期间持续不断触发。
对应上传进度方法：onprogress()
/**
* 侦查附件上传情况 ,这个方法大概0.05-0.1秒执行一次
*/
function onprogress(evt){
var loaded = evt.loaded //已经上传大小情况
var tot = evt.total //附件总大小
var per = Math.floor(100*loaded/tot) //已经上传的百分比
$("#son").html( per +"%" )
$("#son").css("width" , per +"%")
}
最后就是上传方法了，注意上面的html代码中上传用的方法也需要改成这个uploadFile()方法才能正常使用。
//上传文件
function uploadFile() {
//将上传的多个文件放入formData中
var picFileList = $("#pic").get(0).files
var formData = new FormData()
for(var i=0i<picFileList.lengthi++){
formData.append("file" , picFileList[i] )
}
//监听事件
xhr.upload.addEventListener("progress", onprogress, false)
xhr.addEventListener("error", uploadFailed, false)//发送文件和表单自定义参数
xhr.open("POST", "upload")
//记得加入上传数据formData
xhr.send(formData)
}
方式一：事先写好多个input.在点击时才显示。也就是说上传的最大个数是写死了的。html
<p>
<a href='#' onclick='javascript:viewnone(more1)'>添加附件 </a>
<div id='more1' style='display:none'>
<input type="file" name="attach1" size="50"javascript:viewnone(more2)>
</span>
</div>
<div id='more2' style='display:none'>
<input type="file" name="attach2" size="50"'>
</div>
</p>
js
<SCRIPT language="javascript">
function viewnone(e){
e.style.display=(e.style.display=="none")?"":"none"
}
</script>
方式二:这种方式的动态多文件上传是实现了的，很简单的，不说废话看code
html
<input type="button" name="button" value="添加附件" onclick="addInput()">
<input type="button" name="button" value="删除附件" onclick="deleteInput()">
<span id="upload"></span>
js
<script type="text/javascript">
var attachname = "attach"
var i=1
function addInput(){
if(i>0){
var attach = attachname + i
if(createInput(attach))
i=i+1
}
}
function deleteInput(){
if(i>1){
i=i-1
if(!removeInput())
i=i+1
}
}
function createInput(nm){
var aElement=document.createElement("input")
aElement.name=nm
aElement.id=nm
aElement.type="file"
aElement.size="50"
//aElement.value="thanks"
//aElement.onclick=Function("asdf()")
if(document.getElementById("upload").appendChild(aElement) == null)
return false
return true
}
function removeInput(nm){
var aElement = document.getElementById("upload")
if(aElement.removeChild(aElement.lastChild) == null)
return false
return true
}
</script>
方式三：动态多文件上传，只是在oFileInput.click()这个地方，这样做就不能上传这个文件了，因为发现它在上传之时就把这个input中的文件置空了。很可能是为了安全着想吧！
另外还有一点就是说，click()只有在ie中才能正常运行。
虽说这种方式最终没能实现上传，但还是留下来参考，看看是否有人可以真正实现上传。
html
<A href="javascript:newUpload()">添加附件</A>
<TABLE width="100%" border="0" cellpadding="0" cellspacing="1">
<TBODY id="fileList"></TBODY>
</TABLE>
<DIV id="uploadFiles" style="display:block"></DIV>
js
<SCRIPT language="javascript">
//---新建上传
function newUpload(){
var oFileList = document.getElementById("fileList")
var fileCount = oFileList.childNodes.length + 1
var oFileInput = newFileInput("upfile_" + fileCount)
if(selectFile(oFileInput)){
addFile(oFileInput)
}
}
//----选择文件
function selectFile(oFileInput){
var oUploadFiles = document.getElementById("uploadFiles")
oUploadFiles.appendChild(oFileInput)
oFileInput.focus()
oFileInput.click()//不能这样做，可能是为了安全着想吧！
var fileValue = oFileInput.value
if(fileValue == ""){
oUploadFiles.removeChild(oFileInput)
return false
}
else
return true
}
//---新建一个文件显示列表
function addFile(oFileInput){
var oFileList = document.getElementById("fileList")
var fileIndex = oFileList.childNodes.length + 1
var oTR = document.createElement("TR")
var oTD1 = document.createElement("TD")
var oTD2 = document.createElement("TD")
oTR.setAttribute("id","file_" + fileIndex)
oTR.setAttribute("bgcolor","#FFFFFF")
oTD1.setAttribute("width","6%")
oTD2.setAttribute("width","94%")
oTD2.setAttribute("align","left")
oTD2.innerText = oFileInput.value
oTD1.innerHTML = '<A href="javascript:removeFile('+ fileIndex + ')">删除</A>'
oTR.appendChild(oTD1)
oTR.appendChild(oTD2)
oFileList.appendChild(oTR)
}
//---移除上传的文件
function removeFile(fileIndex){
var oFileInput = document.getElementById("upfile_" + fileIndex)
var oTR= document.getElementById("file_" + fileIndex)
uploadFiles.removeChild(oFileInput)
fileList.removeChild(oTR)
}
//---创建一个file input对象并返回
function newFileInput(_name){
var oFileInput = document.createElement("INPUT")
oFileInput.type = "file"
oFileInput.id = _name
oFileInput.name = _name
oFileInput.size="50"
//oFileInput.setAttribute("id",_name)
//oFileInput.setAttribute("name",_name)
//oFileInput.outerHTML = '<INPUT type=file id=' + _name + ' name=' + _name + '>'
//alert(oFileInput.outerHTML)
return oFileInput
}
</SCRIPT>
