js上传文件到服务器(json可视化编辑器工具)
js文件上传的几种方式(js文件上传)
javaweb前端上传文件到后台常用的几种方式
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
使用js向服务器上传文件
（1）js无法向网站服务器传送文件只能用FTP传送文件，（2）是动态网站要用js代码函数与服务器数据库代码建立连接函数。对应数据库，数据，相应单位，通过指定路径传输倒是制定数据单位。例如照片imag数据单位格式标注照片。通过编辑代码任意网络客户端都可上传到数据库imag格式单位标注中.相片.
.net实现文件上传到服务器
1、前端界面十分简单，只是放一个file类型的和一个按钮，并且为这个按钮添加点击事件（btnUpLoad_Click），如下图：
<inputid="UpLoad"runat="server"type="file">
</asp:button>
2、后台编写上传按钮点击事件UpLoad_Click里的代码，先大体说一下思路：
根据file类型的控件获得将要上传文件在本机的物理路径；
在这个物理路径中用截取字符串的方法获得文件名（第一步中取得的路径为本机的绝对路径，在服务器上是无效的，所以这里只需要获取文件名）；
利用file类型的控件属性PostedFile的SaveAs()方法将相应文件存储到服务器中指定的文件夹中。
3、后台核心代码：
protectedvoidbtnUpLoad_Click(objectsender,EventArgse)
{
//取出所选文件的本地路径
stringfullFileName=this.UpLoad.PostedFile.FileName;
//从路径中截取出文件名
stringfileName=fullFileName.Substring(fullFileName.LastIndexOf(\)+1);
//限定上传文件的格式
stringtype=fullFileName.Substring(fullFileName.LastIndexOf(.)+1);
if(type==doc||type==docx||type==xls||type==xlsx||type==ppt||type==pptx||type==pdf||type==jpg||type==bmp||type==gif||type==png||type==txt||type==zip||type==rar)
{
//将文件保存在服务器中根目录下的files文件夹中
stringsaveFileName=Server.MapPath(/files)+\+fileName;
UpLoad.PostedFile.SaveAs(saveFileName);
Page.ClientScript.RegisterStartupScript(Page.GetType(),message,<scriptlanguage='javascript'defer>alert('文件上传成功！');</script>);
//向数据库中存储相应通知的附件的目录
BLL.news.InsertAnnexBLLinsertAnnex=newBLL.news.InsertAnnexBLL();
AnnexEntityannex=newAnnexEntity();//创建附件的实体
annex.AnnexName=fileName;//附件名
annex.AnnexContent=saveFileName;//附件的存储路径
annex.NoticeId=noticeId;//附件所属“通知”的ID在这里为已知
insertAnnex.InsertAnnex(annex);//将实体存入数据库（其实就是讲实体的这些属性insert到数据库中的过程，具体BLL层和DAL层的代码这里不再多说）
}
else
{
Page.ClientScript.RegisterStartupScript(Page.GetType(),message,<scriptlanguage='javascript'defer>alert('请选择正确的格式');</script>);
}
}
