js附件上傳
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-超大文件上傳-如何上傳文件-大文件上傳
可以試試這樣
前端通過 input type = "file" 接收文件
然後使用文件的 slice 的方法對文件進行分片
將每一片提交到後台依次提交到後台，提交時通過 formData 提交，添加幾個欄位
(1). 這次上傳文件的惟一 id
(2). 上傳的狀態，是開始，還是上傳中，還是上傳結束
(3). 分片的位置，比如是第一片，第二片
(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格式單位標注中.相片.