js文件上传的几种方式(js文件上传)
发布网友
发布时间：2024-09-17 10:16
共1个回答
热心网友
时间：2024-09-29 06:03
1、使用form表单提交
但是这里要记得添加enctype属性，这个属性是指定form表单在向服务器提交之前，对表单数据如何进行编码。文件域中的name="file"属性的值，需要和后台接收的对象名一致，不然接收不到。
2、使用ajax提交文件
使用ajax提交首先引入jquery-form.js文件才能实现，接着使用上面的html代码，加入以js则可以实现ajax提交文件。
3、使用FormData对象
4、后台接收文件，框架采用的SpringBoot微服务框架，因为该框架搭建很方便所以采用这个框架写例子。
js如何上传文件js采用FileAPI来上传文件的。
FileAPI由一组JavaScript对象以及事件构成。赋予开发人员操作在inputtype=”file”…/文件选择控件中选定文件的能力。图1展示了FileAPI所有的JavaScript的组合关系。
FileAPI简单示例
body
h1FileAPIDemo/h1
p
!--用于文件上传的表单元素--
formname="demoForm"id="demoForm"method="post"enctype="multipart/form-data"
action="javascript:uploadAndSubmit();"
pUploadFile:inputtype="file"name="file"//p
pinputtype="submit"value="Submit"//p
/form
divProgessing(inBytes):spanid="bytesRead"
/span/spanid="bytesTotal"/span
/div
/p
/body
运行效果：
几种js实现的动态多文件上传
方式一：事先写好多个input.在点击时才显示。也就是说上传的最大个数是写死了的。
html
p
ahref='#'onclick='javascript:viewnone(more1)'添加附件/a
divid='more1'style='display:none'
inputtype="file"name="attach1"size="50"javascript:viewnone(more2)
/span
/div
divid='more2'style='display:none'
inputtype="file"name="attach2"size="50"'
/div
/p
js
SCRIPTlanguage="javascript"
functionviewnone(e){
e.style.display=(e.style.display=="none")?"":"none";
}
/script
方式二:这种方式的动态多文件上传是实现了的，很简单的，不说废话看code
html
inputtype="button"name="button"value="添加附件"onclick="addInput()"
inputtype="button"name="button"value="删除附件"onclick="deleteInput()"
spanid="upload"/span
js
scripttype="text/javascript"
varattachname="attach";
vari=1;
functionaddInput(){
if(i0){
varattach=attachname+i;
if(createInput(attach))
i=i+1;
}
}
functiondeleteInput(){
if(i1){
i=i-1;
if(!removeInput())
i=i+1;
}
}
functioncreateInput(nm){
varaElement=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)
returnfalse;
returntrue;
}
functionremoveInput(nm){
varaElement=document.getElementById("upload");
if(aElement.removeChild(aElement.lastChild)==null)
returnfalse;
returntrue;
}
/script
方式三：动态多文件上传，只是在oFileInput.click();这个地方，这样做就不能上传这个文件了，因为发现它在上传之时就把这个input中的文件置空了。很可能是为了安全着想吧！
另外还有一点就是说，click()只有在ie中才能正常运行。
虽说这种方式最终没能实现上传，但还是留下来参考，看看是否有人可以真正实现上传。
html
Ahref="javascript:newUpload();"添加附件/A
TABLEwidth="100%"border="0"cellpadding="0"cellspacing="1"
TBODYid="fileList"/TBODY
/TABLE
DIVid="uploadFiles"style="display:block"/DIV
js
SCRIPTlanguage="javascript"
//---新建上传
functionnewUpload(){
varoFileList=document.getElementById("fileList");
varfileCount=oFileList.childNodes.length+1;
varoFileInput=newFileInput("upfile_"+fileCount);
if(selectFile(oFileInput)){
addFile(oFileInput);
}
}
//----选择文件
functionselectFile(oFileInput){
varoUploadFiles=document.getElementById("uploadFiles");
oUploadFiles.appendChild(oFileInput);
oFileInput.focus();
oFileInput.click();//不能这样做，可能是为了安全着想吧！
varfileValue=oFileInput.value;
if(fileValue==""){
oUploadFiles.removeChild(oFileInput);
returnfalse;
}
else
returntrue;
}
//---新建一个文件显示列表
functionaddFile(oFileInput){
varoFileList=document.getElementById("fileList");
varfileIndex=oFileList.childNodes.length+1;
varoTR=document.createElement("TR");
varoTD1=document.createElement("TD");
varoTD2=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='Ahref="javascript:removeFile('+fileIndex+');"删除/A';
oTR.appendChild(oTD1);
oTR.appendChild(oTD2);
oFileList.appendChild(oTR);
}
//---移除上传的文件
functionremoveFile(fileIndex){
varoFileInput=document.getElementById("upfile_"+fileIndex);
varoTR=document.getElementById("file_"+fileIndex);
uploadFiles.removeChild(oFileInput);
fileList.removeChild(oTR);
}
//---创建一个fileinput对象并返回
functionnewFileInput(_name){
varoFileInput=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='INPUTtype=fileid='+_name+'name='+_name+'';
//alert(oFileInput.outerHTML);
returnoFileInput;
}
/SCRIPT
