当前位置:首页 » 文件管理 » js附件上传

js附件上传

发布时间: 2022-08-17 09:22:22

A. 如何从js文件上传问题,怎么解决

  • 1

    第一步:新建HTML文件

    使用dreamweaver CS6新建一个html文件并保存到桌面,在桌面放一个文件(图片或文本文档),上传测试用。如图:

B. 像QQ邮箱上传附件js怎么写

<body>
<script type="text/javascript">
window.onload=function(){
var oBtn=document.getElementById('btn');
var oUl=document.getElementById('ul1');
oBtn.onclick=function(){
var oLi=document.createElement('li');

//appendChild
oUl.appendChild(oLi);
}
}
</script>
<input type="button" id="btn" value="创建li"/>
<ul id="ul1">
<li>aaa</li>
</ul>
</body>

C. JS-超大文件上传-如何上传文件-大文件上传

可以试试这样

  1. 前端通过 input type = "file" 接收文件

  2. 然后使用文件的 slice 的方法对文件进行分片

  3. 将每一片提交到后台依次提交到后台,提交时通过 formData 提交,添加几个字段

    (1). 这次上传文件的惟一 id

    (2). 上传的状态,是开始,还是上传中,还是上传结束

    (3). 分片的位置,比如是第一片,第二片

    (4). 分片的数据

  4. 后端当接收到一个文件 id 的结束标识时,把对应的分片按位置数据拼接起来就行

D. 几种js实现的动态多文件上传

方式一:事先写好多个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>

E. JS怎样用AJAX上传文件

可以使用jquery的uploadfild插件,或者jquery upload插件进行附件上传,两种插件的实现原理差不多,可以进行参考。

F. js如何上传文件

js采用File API 来上传文件的。


File API 由一组 JavaScript 对象以及事件构成。赋予开发人员操作在 <input type=”file” … /> 文件选择控件中选定文件的能力。图 1 展示了 File API 所有的 JavaScript 的组合关系。


File API 简单示例

<body>
<h1>File API Demo</h1>
<p>
<!-- 用于文件上传的表单元素 -->
<form name="demoForm" id="demoForm" method="post" enctype="multipart/form-data"
action="javascript: uploadAndSubmit();">
<p>Upload File: <input type="file" name="file" /></p>
<p><input type="submit" value="Submit" /></p>
</form>
<div>Progessing (in Bytes): <span id="bytesRead">
</span> / <span id="bytesTotal"></span>
</div>
</p>
</body>
运行效果:

G. 使用js向服务器上传文件

(1)js无法向网站服务器传送文件只能用FTP传送文件,(2)是动态网站要用js代码函数与服务器数据库代码建立连接函数。对应数据库,数据,相应单位,通过指定路径传输倒是制定数据单位。例如照片imag数据单位格式标注照片。通过编辑代码任意网络客户端都可上传到数据库imag格式单位标注中.相片.

热点内容
interbase数据库 发布:2025-05-14 13:49:50 浏览:689
微商海报源码 发布:2025-05-14 13:49:42 浏览:345
分布式缓存部署步骤 发布:2025-05-14 13:24:51 浏览:610
php获取上一月 发布:2025-05-14 13:22:52 浏览:90
购买云服务器并搭建自己网站 发布:2025-05-14 13:20:31 浏览:689
sqlserver建立视图 发布:2025-05-14 13:11:56 浏览:485
搭建httpsgit服务器搭建 发布:2025-05-14 13:09:47 浏览:256
新电脑拿回来我该怎么配置 发布:2025-05-14 13:09:45 浏览:240
视频服务器新建ftp用户 发布:2025-05-14 13:03:09 浏览:225
php花生 发布:2025-05-14 12:54:30 浏览:551