JavaScript实现form表单的多文件上传
form表单的多文件上传,具体内容如下
formData对象可以使用一系列的键值对来模拟一个完整的表单,然后使用Ajax来发送这个表单
使用
选择文件
form表单的多文件上传,具体内容如下
formData对象可以使用一系列的键值对来模拟一个完整的表单,然后使用Ajax来发送这个表单
使用
选择文件
注意:
1.使用formData对象进行表单上传必须要为form添加enctype="multipart/form-data"属性
2.使用formData对象进行表单上传必须要对其开始填入的值按照name属性放入该对象中,不能开始使用action上传,后面使用formData进行上传,这样会导致上传数据出现错误
获取change事件改变的文件
varfileList; varallFile=[]; //FormData对象初始化 varform=document.getElementById("upload-form"); varformData=newFormData(form); $("#uploadform-excelfiles").on('change',function(e){ //获取表单数据并传入formData中 varnorm=$("#norm").val(); varmajor=$("#major").val(); vartype=$("#type").val(); formData.set("norm",norm); formData.set("major",major); formData.set("type",type); varfileError=0; fileList=e.currentTarget.files; $.each(fileList,function(index,item){ varfileName=item.name; varfileEnd=fileName.substring(fileName.indexOf(".")); //上传文件格式判断 if(fileEnd==".xlsx"){ allFile.push(item); $('#files').append(''+ ' '+fileName+' '+ ''+(item.size/1024).toFixed(2)+'K '+ ''+ ''); //追加文件 formData.append('UploadForm[excelFiles][]',item); }else{ fileError++; } }); if(fileError>0){ alert("只能上传“.xlsx”格式的文件!"); document.getElementById("upload-form").reset(); return; } varfileCount=$('#files').find('tr').length; $('#fileName').html('共上传'+fileCount+'个文件'); });
删除按钮事件
$('#files').on('click','.delete',function(e){ varsaveFile=[]; varnorm=$("#norm").val(); varmajor=$("#major").val(); vartype=$("#type").val(); vardeleteName=e.target.parentNode.previousElementSibling.previousElementSibling.textContent; vardeleteIndex; //将不删除的放入数组中 $.each(allFile,function(index,item){ if(item.name==deleteName){ deleteIndex=index; }else{ saveFile.push(item); } }); allFile.splice(deleteIndex,1); //表单数据重置 formData.set("norm",norm); formData.set("major",major); formData.set("type",type); formData.delete('UploadForm[excelFiles][]'); //将不删除的数组追加的formData中 $.each(saveFile,function(index,item){ formData.append('UploadForm[excelFiles][]',item); }); e.target.parentNode.parentNode.remove(); varfileCount=$('#files').find('tr').length; $('#fileName').html('共上传'+fileCount+'个文件'); });
文件上传事件
$("#fileUpload").on('click',function(){ varlen=formData.getAll('UploadForm[excelFiles][]').length; $("#overlay").show(); if(len>1){ vardeleteBtn=$(".delete"); //通过ajax进行上传 $.ajax({ url:'/finalize/upload', type:'POST', cache:false, data:formData, processData:false, contentType:false }).done(function(res){ if(res.code=='ok'){ //进度条设置 varvalue=0; vartimer2=setInterval(function(){ value++; $("#progress").css('width',value+"%"); if(value==120){ clearInterval(timer2); $("#overlay").hide(); alert("文件上传成功!"); } },50); //删除对应按钮 $("#fileUpload").css("display","none"); $.each(deleteBtn,function(index,item){ $(item).css("display","none"); }); $('#files').append('') } }).fail(function(res){ alert("文件上传失败:"+res.msg); }); }else{ alert("请选择需要上传的文件!"); } }); 文件下载
更多精彩内容请参考专题《ajax上传技术汇总》,《javascript文件上传操作汇总》和《jQuery上传操作汇总》进行学习。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。