javascript文件上傳
㈠ 後綴名為「.js」的文件要到那裡上傳，怎麼上傳
後綴名
為js的文件是
javascript
的文件，和其它.htm.jsp.asp文件一樣，用cuteftp等上傳工具直接傳到伺服器上，和別的文件處理方式沒什麼區別的。
㈡ JavaScript文件分片上傳,斷點續傳如何實現
public class FileInf {
public FileInf(){}
public String id="";
public String pid="";
public String pidRoot="";
/** * 表示當前項是否是一個文件夾項。 */
public boolean fdTask=false;
// /// 是否是文件夾中的子文件 /// </summary>
public boolean fdChild=false;
/** * 用戶ID。與第三方系統整合使用。 */
public int uid=0;
/** * 文件在本地電腦中的名稱 */
public String nameLoc="";
/** * 文件在伺服器中的名稱。 */
public String nameSvr="";
/** * 文件在本地電腦中的完整路徑。示例：D:\Soft\QQ2012.exe */
public String pathLoc="";
/** * 文件在伺服器中的完整路徑。示例：F:\\ftp\\uer\\md5.exe */
public String pathSvr="";
/** * 文件在伺服器中的相對路徑。示例：/www/web/upload/md5.exe */
public String pathRel="";
/** * 文件MD5 */
public String md5="";
/** * 數字化的文件長度。以位元組為單位，示例：120125 */
public long lenLoc=0;
/** * 格式化的文件尺寸。示例：10.03MB */
public String sizeLoc="";
/** * 文件續傳位置。 */
public long offset=0;
/** * 已上傳大小。以位元組為單位 */
public long lenSvr=0;
/** * 已上傳百分比。示例：10% */
public String perSvr="0%";
public boolean complete=false;
public Date PostedTime = new Date();
public boolean deleted=false;
/** * 是否已經掃描完畢，提供給大型文件夾使用，大型文件夾上傳完畢後開始掃描。 */
public boolean scaned=false;
}
㈢ 如何使用javascript限制文件上傳大小
$("#ms_upload_file").change(function(){
//檢驗非空和文件大小
if($(this).val() !== '' && checkSize(this)) { //其他操作
}
});/**
* 函數：檢查上傳文件大小
* 輸入：input的js對象
* 輸出：
**/function checkSize(input) {
var Sys = {}; var flag; var filesize = 0; //判斷瀏覽器種類
if (navigator.userAgent.indexOf("MSIE") > 0) {
Sys.ie=true;
} if (navigator.userAgent.indexOf("Firefox")>0) {
Sys.firefox=true;
} //獲取文件大小
if (Sys.firefox) {
filesize = input.files[0].size;
} else if (Sys.ie){ var fileobject = new ActiveXObject ("Scripting.FileSystemObject");//獲取上傳文件的對象
var file = fileobject.GetFile (input.value);//獲取上傳的文件
filesize = file.Size;//文件大小
} //判斷是否符合要求
if (filesize / (1024 * 1024) < 5 ) {
flag = true;
} else {
alert("附件過大，建議不要超過5M！");
flag = false;
} return flag;
}
㈣ 如何用javascript實現<img>控制項的圖片上傳
fileupload(前台id：fleupld)控制項加一個onclick方法：getvalue()
{document.getelementbyid("label的id").innerhtml=document.getelementbyid("fleupld").value;}
document.getelementbyid("fleupld").value
獲取的是fileupload中文件的全路徑，當然你可以截取這個值，獲得其子字元串（單個文件的名稱）。
㈤ 幾種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>
㈥ JavaScript 大文件分片上傳處理如何實現
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>upload</title> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> </head> <body> <input type="file" name="file" id="file"> <button id="upload" onClick="upload()">upload</button> <script type="text/javascript"> var bytesPerPiece = 1024 * 1024; // 每個文件切片大小定為1MB . var totalPieces; //發送請求 function upload() { var blob = document.getElementById("file").files[0]; var start = 0; var end; var index = 0; var filesize = blob.size; var filename = blob.name; //計算文件切片總數 totalPieces = Math.ceil(filesize / bytesPerPiece); while(start < filesize) { end = start + bytesPerPiece; if(end > filesize) { end = filesize; } var chunk = blob.slice(start,end);//切割文件 var sliceIndex= blob.name + index; var formData = new FormData(); formData.append("file", chunk, filename); $.ajax({ url: 'http://localhost:9999/test.php', type: 'POST', cache: false, data: formData, processData: false, contentType: false, }).done(function(res){ }).fail(function(res) { }); start = end; index++; } } </script> </body> </html>
㈦ 求JavaScript怎麼實現web端上傳超大文件
藉助js的Blob對象FormData對象可以實現大文件分片上傳的功能，關於Blob和FormData的具體使用方法可以到如下地址去查看網頁鏈接網頁鏈接
㈧ 求JavaScript文件夾上傳解決方案
所謂斷點續傳，其實只是指下載，也就是要從文件已經下載的地方開始繼續下載。在以前版本的HTTP協議是不支持斷點的，HTTP/1.1開始就支持了。一般斷點下載時才用到Range和Content-Range實體頭。HTTP協議本身不支持斷點上傳，需要自己實現。
二、Range
用於請求頭中，指定第一個位元組的位置和最後一個位元組的位置，一般格式：
Range:用於客戶端到服務端的請求，可以通過改欄位指定下載文件的某一段大小及其單位，位元組偏移從0開始。典型格式：
Ranges: (unit=first byte pos)-[last byte pos]
Ranges: bytes=4000- 下載從第4000位元組開始到文件結束部分
Ranges: bytes=0~N 下載第0-N位元組范圍的內容
Ranges: bytes=M-N 下載第M－N位元組范圍的內容
Ranges: bytes=-N 下載最後N位元組內容
1.以下幾點需要注意：
(1)這個數據區間是個閉合區間，起始值是0，所以「Range: bytes=0-1」這樣一個請求實際上是在請求開頭的2個位元組。
(2)「Range: bytes=-200」，它不是表示請求文件開始位置的201個位元組，而是表示要請求文件結尾處的200個位元組。
(3)如果last byte pos小於first byte pos，那麼這個Range請求就是無效請求，server需要忽略這個Range請求，然後回應一個200，把整個文件發給client。
(4)如果last byte pos大於等於文件長度，那麼這個Range請求被認為是不能滿足的，server需要回應一個416，Requested range not satisfiable。
2.示例解釋：
表示頭500個位元組：bytes=0-499
表示第二個500位元組：bytes=500-999
表示最後500個位元組：bytes=-500
表示500位元組以後的范圍：bytes=500-
第一個和最後一個位元組：bytes=0-0,-1
同時指定幾個范圍：bytes=500-600,601-999
三、Content-Range
用於響應頭，指定整個實體中的一部分的插入位置，他也指示了整個實體的長度。在伺服器向客戶返回一個部分響應，它必須描述響應覆蓋的范圍和整個實體長度。一般格式：
Content-Range: bytes (unit first byte pos) - [last byte pos]/[entity legth]
四、Header示例
請求下載整個文件:
GET /test.rar HTTP/1.1
Connection: close
Host: 116.1.219.219
Range: bytes=0-801 //一般請求下載整個文件是bytes=0- 或不用這個頭
一般正常回應
HTTP/1.1 200 OK
Content-Length: 801
Content-Type: application/octet-stream
Content-Range: bytes 0-800/801 //801:文件總大小
一個最簡單的斷點續傳實現大概如下：
1.客戶端下載一個1024K的文件，已經下載了其中512K
2. 網路中斷，客戶端請求續傳，因此需要在HTTP頭中申明本次需要續傳的片段：
Range:bytes=512000-
這個頭通知服務端從文件的512K位置開始傳輸文件
3. 服務端收到斷點續傳請求，從文件的512K位置開始傳輸，並且在HTTP頭中增加：
Content-Range:bytes 512000-/1024000
並且此時服務端返回的HTTP狀態碼應該是206，而不是200。
但是在實際場景中，會出現一種情況，即在終端發起續傳請求時，URL對應的文件內容在服務端已經發生變化，此時續傳的數據肯定是錯誤的。如何解決這個問題了？顯然此時我們需要有一個標識文件唯一性的方法。在RFC2616中也有相應的定義，比如實現Last-Modified來標識文件的最後修改時間，這樣即可判斷出續傳文件時是否已經發生過改動。同時RFC2616中還定義有一個ETag的頭，可以使用ETag頭來放置文件的唯一標識，比如文件的MD5值。
終端在發起續傳請求時應該在HTTP頭中申明If-Match 或者If-Modified-Since 欄位，幫助服務端判別文件變化。
另外RFC2616中同時定義有一個If-Range頭，終端如果在續傳是使用If-Range。If-Range中的內容可以為最初收到的ETag頭或者是Last-Modfied中的最後修改時候。服務端在收到續傳請求時，通過If-Range中的內容進行校驗，校驗一致時返回206的續傳回應，不一致時服務端則返回200回應，回應的內容為新的文件的全部數據。
㈨ 如何讓javascript實現上傳文件呢
javascript只能做用文件控制項做前台頁面把文件提交網站，保存還得網站後台處理
㈩ 如何通過js完成多個文件的上傳
HTML5 file組件的新屬性
accept : 如果在file組件中增加這個屬性就可以直接控制上傳的文件類型了，實在是很方便。
multiple：是否允許選擇多個文件
HTML5 頁面代碼修改後
<img width="400" height="250"/><br />
<input type="file" id="pic" name="pic" onchange="printFileInfo()" accept="image/*" multiple="multiple"/>
<input type="button" value="上傳圖片" onclick="uploadFile()" /><br />
<div id="parent">
<div id="son"></div>
</div>
accept 的值可以參閱：IANA MIME 類型（標准 MIME 類型的完整列表），如果使用的是DW開發的話，軟體本身就有提示。
如果選擇了多個文件，可以用JS做循環列印，看看文件的名稱，類型和大小,看演示代碼
function printFileInfo(){
var picFile = document.getElementById("pic");
var files = picFile.files;
for(var i=0; i<files.length; i++){
var file = files[i];
var div = document.createElement("div")
div.innerHTML = "第("+ (i+1) +") 個文件的名字："+ file.name +
" , 文件類型："+ file.type +" , 文件大小:"+ file.size
document.body.appendChild( div)
}
}
既然可以循環多文件的話，就可以嘗試多文件上傳了。
1、首先創建 XMLHttpRequest 對象
//這是全局變數。因為是示例，所以就沒有判斷瀏覽器類型，低版本IE這么寫的話會出問題的
var xhr = new XMLHttpRequest()
2、上篇介紹了進度事件(Progress) ， 這次實現 progress 和 error 2個事件
error：在請求發生錯誤時觸發。
對應上傳時發生錯誤導致的上傳失敗：uploadFailed()
//上傳失敗
function uploadFailed(evt) {
alert("上傳失敗");
}
progress：在接收相應期間持續不斷觸發。
對應上傳進度方法：onprogress()
/**
* 偵查附件上傳情況 ,這個方法大概0.05-0.1秒執行一次
*/
function onprogress(evt){
var loaded = evt.loaded; //已經上傳大小情況
var tot = evt.total; //附件總大小
var per = Math.floor(100*loaded/tot); //已經上傳的百分比
$("#son").html( per +"%" );
$("#son").css("width" , per +"%");
}
最後就是上傳方法了，注意上面的html代碼中上傳用的方法也需要改成這個uploadFile()方法才能正常使用。
//上傳文件
function uploadFile() {
//將上傳的多個文件放入formData中
var picFileList = $("#pic").get(0).files;
var formData = new FormData();
for(var i=0; i< picFileList.length; i++){
formData.append("file" , picFileList[i] );
}
//監聽事件
xhr.upload.addEventListener("progress", onprogress, false);
xhr.addEventListener("error", uploadFailed, false);//發送文件和表單自定義參數
xhr.open("POST", "upload");
//記得加入上傳數據formData
xhr.send(formData);
}