2. 程式人生 > >檔案上傳（支援斷點續傳/大檔案切片上傳）

檔案上傳（支援斷點續傳/大檔案切片上傳）

阿新 • • 發佈：2019-02-03
//拖拽上傳開始 //-1.禁止瀏覽器開啟檔案行為 //拖離 document.addEventListener("drop",function(e){ e.preventDefault(); }) //拖後放 document.addEventListener("dragleave",function(e){ e.preventDefault(); }) //拖進 document.addEventListener("dragenter",function(e){ e.preventDefault(); }) //拖來拖去
document.addEventListener("dragover",function(e){ e.preventDefault(); }) //上傳進度 var pro = document.getElementById('prouploadfile'); var persent = document.getElementById('persent'); function clearpro(){ pro.value=0; persent.innerHTML="0%"; } //2.拖拽 var
stopbutton = document.getElementById('stop'); var resultfile=""; //拖拽區域 var box = document.getElementById('drop_area'); box.addEventListener("drop",function(e){ //獲取檔案物件 var fileList = e.dataTransfer.files; //檢測是否是拖拽檔案到頁面的操作 if(fileList.length == 0){ return
false; } //拖拉圖片到瀏覽器，可以實現預覽功能 //規定視訊格式 in_array Array.prototype.S=String.fromCharCode(2); Array.prototype.in_array=function(e){ var r=new RegExp(this.S+e+this.S); return (r.test(this.S+this.join(this.S)+this.S)); }; var video_type=["video/mp4","video/ogg"]; //建立一個url連線,供src屬性引用 var fileurl = window.URL.createObjectURL(fileList[0]); //如果是圖片 if(fileList[0].type.indexOf('image') === 0){ var str="<img width='200px' height='200px' src='"+fileurl+"'>"; document.getElementById('drop_area').innerHTML=str; //如果是規定格式內的視訊 }else if(video_type.in_array(fileList[0].type)){ var str="<video width='200px' height='200px' controls='controls' src='"+fileurl+"'></video>"; document.getElementById('drop_area').innerHTML=str; }else{ //其他格式，輸出檔名 var str="檔名字:"+fileList[0].name; document.getElementById('drop_area').innerHTML=str; } resultfile = fileList[0]; //切片計算 filesize= resultfile.size; setsize=1000*1024; filecount = filesize/setsize; //定義進度條 pro.max=parseInt(Math.ceil(filecount)); i =getCookie(resultfile.name); i = (i!=null && i!="")?parseInt(i):0 if(Math.floor(filecount)<i){ alert("該檔案已經上傳完成,請勿重複上傳!"); pro.value=i+1; persent.innerHTML="100%"; }else{ pro.value=i; p=parseInt(i)*100/Math.ceil(filecount) persent.innerHTML=parseInt(p)+"%"; } },false); //3.ajax上傳 var stop=1; function xhr2(){ if(stop==1){ return false; } if(resultfile==""){ alert("請選擇檔案！") return false; } i=getCookie(resultfile.name); i = (i!=null && i!="")?parseInt(i):0 if(Math.floor(filecount)<parseInt(i)){ alert("已經上傳完成！"); return false; } var xhr = new XMLHttpRequest();//第一步 //新建一個FormData物件 var formData = new FormData(); //追加檔案資料 //改變進度條 pro.value=i+1; p=parseInt(i+1)*100/Math.ceil(filecount) persent.innerHTML=parseInt(p)+"%"; //進度條 if((filesize-i*setsize)>setsize){ blobfile= resultfile.slice(i*setsize,(i+1)*setsize); }else{ blobfile= resultfile.slice(i*setsize,filesize); formData.append('lastone', Math.floor(filecount)); } formData.append('file', blobfile); formData.append('blobname', i); formData.append('filename', resultfile.name); //設定響應返回的資料格式 //post方式 xhr.open('POST', '/document/addTempleteNew_dd'); //第二步驟 //傳送請求 xhr.send(formData); //第三步驟 stopbutton.innerHTML = "暫停" //ajax返回 xhr.onreadystatechange = function(){ //第四步 if ( xhr.readyState == 4 && xhr.status == 200 ) { //請求成功 //console.log(xhr.responseText); if(i<filecount){ xhr2(); }else{ i=0; } if(xhr.responseText!="not end"){ window.parent.$('#affixdiv').after(xhr.responseText); }else{ console.log('正在分片上傳中('+Math.floor(filecount)+')...'+i); } } }; //設定超時時間 xhr.timeout = 20000; xhr.ontimeout = function(event){ alert('請求超時，網路擁堵！\n（如果檔案已經上傳完成,請忽略此訊息！）'); } i=i+1; setCookie(resultfile.name,i,1);//1天 } //設定cookie function setCookie(c_name,value,expiredays) { var exdate=new Date(); exdate.setDate(exdate.getDate()+expiredays); document.cookie=c_name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString()+";path=/"); } //獲取cookie function getCookie(c_name) { if (document.cookie.length>0) { c_start=document.cookie.indexOf(c_name + "="); if (c_start!=-1) { c_start=c_start + c_name.length+1; c_end=document.cookie.indexOf(";",c_start); if (c_end==-1) c_end=document.cookie.length return unescape(document.cookie.substring(c_start,c_end)); } } return ""; } function stopup(){ if(stop==1){ stop = 0 xhr2(); }else{ stop = 1; stopbutton.innerHTML = "繼續"; } }

相關推薦

檔案上傳（支援斷點續傳/大檔案切片上傳）

//拖拽上傳開始 //-1.禁止瀏覽器開啟檔案行為 //拖離 document.addEventListener("drop",function(e){ e.preventDefault(); }) //拖後放 document.add

Java多執行緒下載器FileDownloader（支援斷點續傳、代理等功能）

前言 在我的任務清單中，很早就有了一個檔案下載器，但一直忙著沒空去寫。最近剛好放假，便抽了些時間完成了下文中的這個下載器。 介紹 同樣的，還是先上效果圖吧。 Jar包地址位於 FileDownloader 目前實現的主要功能有： 多執行緒下載 斷點續傳 自定義頭部等 即將完成的包括： 新增代理功

Linux 目錄個數和檔案個數限制（單個目錄下最大檔案數）

昨晚排查了在KVM的build系統中的一個問題，跟蹤到後面發現在一個目錄下mkdir建立目錄失敗。我手動試了一下，提示如下：cannot create directory `/home/master/jaytemp` too many links我發現是在一個目錄下的一級

大檔案上傳解決方案-支援斷點續傳的檔案上傳外掛(轉)

資料夾結構支援 大檔案上傳控制元件6支援向伺服器上傳整個資料夾，並且在服務端儲存時與本地目錄結構完全保持一致，同時在資料庫中也保留資料夾的層級結構。開發人員可以藉助於資料庫中的層級資訊方便的管理檔案，管理人員也可以在伺服器中直接對上傳的資料夾資料進行管理。 大檔案傳輸 大檔案上傳控

installgithub-支援斷點續傳下載GitHubDesktop離線安裝檔案

用GitHub賬號提交程式碼的都希望下載本地客戶端克隆倉庫 https://desktop.github.com/ 可是在天朝用GitHub.exe線上下載安裝這個客戶端實在是太難了 由於不支援斷點續傳 公司千M光纖外帶翻牆都無法成功下載這個玩意

【Flume】flume檔案監控的source元件開發，增量傳輸檔案內容，支援斷點續傳功能

基於flume-ng中原有exec的source型別，通過tail依賴於作業系統去監聽檔案內容變化，其次，不支援斷點續傳的功能，特此，自行開發了一個元件，大家可以看看，一起探討： 該元件特點如下： 1、一個source對應一個檔案監控 2、實時監控檔案變化 3、增量傳輸檔

C#檔案下載（實現斷點續傳）

1 public class WebDown 2 { 4 /// 下載檔案方法 6 /// 檔案儲存路徑和檔名 7 /// 返回伺服器檔名 9 public static bool DeownloadFil

Android檔案下載（實現斷點續傳）

http://www.ideasandroid.com/archives/328#more-328 本文將介紹在android平臺下如何實現多執行緒下載，大家都知道，android平臺使用java做為開發語言，所以java中支援的多執行緒下載方式在android平臺下都支援，

Android實現檔案上傳（支援多檔案）

大家在做android專案的時候，肯定會遇到檔案上傳（比如圖片，音樂等），今天我把我剛做的一個圖片上傳功能分享一下， 基本的流程就是：定義一個HttpClient→定義post請求（HttpPost）→post請求中新增引數（包括普通引數，檔案）→使用client傳送pos

UnityWebRequest下載網路資源，支援斷點續傳、多檔案同時下載

今晚研究了下關於Unity中檔案下載的斷點續傳功能，Unity已經封裝了網路資源的下載API，當然也可以使用C#中的API進行資源下載。     首先說一下斷點續傳的大概思路：     1、下載一個檔案時，向伺服器傳送下載請求，傳送一個Range的報文，指定從檔案資料的什麼位

設定IIS7/IIS7.5的FTP支援斷點續傳

Windows Server 2003的IIS自帶FTP預設支援斷點續傳，但是Windows Server 2008/R2預設已經不支援，因此需要注意設定，才能讓其支援斷點續傳，更好的利用寶貴的伺服器頻寬資源。   1、開啟IIS管理器，選中FTP站點，點選右側“高階設定”，如圖： 2、在【

H5 頭像上傳（支援裁切）

<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial

(二)使用libcurl實現獲取目標檔案大小, 下載進度顯示, 斷點續傳等功能

本節jwisp為大家舉例說明如果使用上節介紹的函式和引數,在使用libcurl的過程中,如何獲取下載目標檔案的大小 , 下載進度條,斷點續傳等,這些基本的函式,將為jwisp在最後處理下載過程異常中斷等問題提供支援. 1.      編寫得到下載目標檔案的大小的函式 lo

java使用WebUploader做大檔案的分塊和斷點續傳

前言： WebUploader是由Baidu WebFE(FEX)團隊開發的一個簡單的以HTML5為主，FLASH為輔的現代檔案上傳元件。在現代的瀏覽器裡面能充分發揮html5的優勢，同時又不摒棄主流IE瀏覽器，沿用原來的FLASH執行時，相容IE6+，iOS 6+, 

webkitdirectory 實現資料夾上傳（包含資料夾大小和檔案個數的校驗）

由於工作中業務需要在介面提供使用者上傳資料夾的功能，平時上傳檔案做的還多一些，包括對上傳檔案也有許多外掛提供了良好的支援，比如fileinput.js,還有webupload.js。。。，但對上傳資料夾的支援就沒有，h5裡提供了webkitdirectory  來實現上傳資

SpringMVC的檔案下載功能（附上完整的springmvc的檔案上傳下載示例）

========================================================== 以下使用maven建立檔案上傳下載 ============================ pom.xml <project xmlns="h

PHP支援斷點續傳，分塊下載的類

<?php/*** User: djunny* Date: 2016-04-29* Time: 17:18* Mail: [email protected]* 支援斷點下載的類*/class downloader {/*** download file to

Android WebView 選擇圖片並上傳（呼叫相機拍照/相簿/選擇檔案）

前言： 這個功能其實我才剛接觸。不熟...在這個給大家提供的都是經過本人驗證之後的一些案例。可以在專案中跑的。 最近專案嵌入混合開發，都是使用WebView來跳轉，頁面展示。有用到這個圖片上傳的功能。 原本是一臉懵的，查了很多資料看一些大神都寫的很多程式碼很複雜（原諒我

用scp後臺傳輸檔案，用rsync進行斷點續傳

1. scp後臺傳輸檔案 用nohup命令 $nohup scp file [email protected]:/file > nohup.out 2>&1  輸入

dokuwiki安裝使用教程（支援中文、editor.md、貼上上傳圖片）

一、安裝 在網站一欄輸入:http://你的ip地址/Dokuwiki/install.php 在右上角選好語言，簡體中文zh 然後會彈出這樣的安裝示意圖，啟用ACL(推薦) 根據上示意圖，填寫資訊。分別填寫超級使用者，全名，E-mail，密碼等資訊