當前位置:首頁 » 網頁前端 » web斷點續傳控制項
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

web斷點續傳控制項

發布時間: 2022-06-17 08:31:19

❶ 求web 以上超大文件上傳和斷點續傳伺服器的實現

web 以上超大文件上傳和斷點續傳伺服器的實現
javaweb上傳文件
上傳文件的jsp中的部分
上傳文件同樣可以使用form表單向後端發請求,也可以使用 ajax向後端發請求
1.通過form表單向後端發送請求
<form id="postForm" action="${pageContext.request.contextPath}/UploadServlet" method="post" enctype="multipart/form-data">
<div class="bbxx wrap">
<inputtype="text" id="side-profile-name" name="username" class="form-control">
<inputtype="file" id="example-file-input" name="avatar">
<button type="submit" class="btn btn-effect-ripple btn-primary">Save</button>
</div>
</form>
改進後的代碼不需要form標簽,直接由控制項來實現。開發人員只需要關注業務邏輯即可。JS中已經幫我們封閉好了
this.post_file = function ()
{
$.each(this.ui.btn, function (i, n) { n.hide();});
this.ui.btn.stop.show();
this.State = this.Config.state.Posting;//
this.app.postFile({ id: this.fileSvr.id, pathLoc: this.fileSvr.pathLoc, pathSvr:this.fileSvr.pathSvr,lenSvr: this.fileSvr.lenSvr, fields: this.fields });
};
通過監控工具可以看到控制項提交的數據,非常的清晰,調試也非常的簡單。
2.通過ajax向後端發送請求
$.ajax({
url : "${pageContext.request.contextPath}/UploadServlet",
type : "POST",
data : $( '#postForm').serialize(),
success : function(data) {
$( '#serverResponse').html(data);
},
error : function(data) {
$( '#serverResponse').html(data.status + " : " + data.statusText + " : " + data.responseText);
}
});
ajax分為兩部分,一部分是初始化,文件在上傳前通過AJAX請求通知服務端進行初始化操作
this.md5_complete = function (json)
{
this.fileSvr.md5 = json.md5;
this.ui.msg.text("MD5計算完畢,開始連接伺服器...");
this.event.md5Complete(this, json.md5);//biz event

var loc_path = encodeURIComponent(this.fileSvr.pathLoc);
var loc_len = this.fileSvr.lenLoc;
var loc_size = this.fileSvr.sizeLoc;
var param = jQuery.extend({}, this.fields, this.Config.bizData, { md5: json.md5, id: this.fileSvr.id, lenLoc: loc_len, sizeLoc: loc_size, pathLoc: loc_path, time: new Date().getTime() });

$.ajax({
type: "GET"
, dataType: 'jsonp'
, jsonp: "callback" //自定義的jsonp回調函數名稱,默認為jQuery自動生成的隨機函數名
, url: this.Config["UrlCreate"]
, data: param
, success: function (sv)
{
_this.svr_create(sv);
}
, error: function (req, txt, err)
{
_this.Manager.RemoveQueuePost(_this.fileSvr.id);
alert("向伺服器發送MD5信息錯誤!" + req.responseText);
_this.ui.msg.text("向伺服器發送MD5信息錯誤");
_this.ui.btn.cancel.show();
_this.ui.btn.stop.hide();
}
, complete: function (req, sta) { req = null; }
});
};

在文件上傳完後向伺服器發送通知
this.post_complete = function (json)
{
this.fileSvr.perSvr = "100%";
this.fileSvr.complete = true;
$.each(this.ui.btn, function (i, n)
{
n.hide();
});
this.ui.process.css("width", "100%");
this.ui.percent.text("(100%)");
this.ui.msg.text("上傳完成");
this.Manager.arrFilesComplete.push(this);
this.State = this.Config.state.Complete;
//從上傳列表中刪除
this.Manager.RemoveQueuePost(this.fileSvr.id);
//從未上傳列表中刪除
this.Manager.RemoveQueueWait(this.fileSvr.id);

var param = { md5: this.fileSvr.md5, uid: this.uid, id: this.fileSvr.id, time: new Date().getTime() };

$.ajax({
type: "GET"
, dataType: 'jsonp'
, jsonp: "callback" //自定義的jsonp回調函數名稱,默認為jQuery自動生成的隨機函數名
, url: _this.Config["UrlComplete"]
, data: param
, success: function (msg)
{
_this.event.fileComplete(_this);//觸發事件
_this.post_next();
}
, error: function (req, txt, err) { alert("文件-向伺服器發送Complete信息錯誤!" + req.responseText); }
, complete: function (req, sta) { req = null; }
});
};

這里需要處理一個MD5秒傳的邏輯,當伺服器存在相同文件時,不需要用戶再上傳,而是直接通知用戶秒傳
this.post_complete_quick = function ()
{
this.fileSvr.perSvr = "100%";
this.fileSvr.complete = true;
this.ui.btn.stop.hide();
this.ui.process.css("width", "100%");
this.ui.percent.text("(100%)");
this.ui.msg.text("伺服器存在相同文件,快速上傳成功。");
this.Manager.arrFilesComplete.push(this);
this.State = this.Config.state.Complete;
//從上傳列表中刪除
this.Manager.RemoveQueuePost(this.fileSvr.id);
//從未上傳列表中刪除
this.Manager.RemoveQueueWait(this.fileSvr.id);
//添加到文件列表
this.post_next();
this.event.fileComplete(this);//觸發事件
};
這里可以看到秒傳的邏輯是非常 簡單的,並不是特別的復雜。
var form = new FormData();
form.append("username","zxj");
form.append("avatar",file);
//var form = new FormData($("#postForm")[0]);
$.ajax({
url:"${pageContext.request.contextPath}/UploadServlet",
type:"post",
data:form,
processData:false,
contentType:false,
success:function(data){

console.log(data);
}
});
java部分
文件初始化的邏輯,主要代碼如下
FileInf fileSvr= new FileInf();
fileSvr.id = id;
fileSvr.fdChild = false;
fileSvr.uid = Integer.parseInt(uid);
fileSvr.nameLoc = PathTool.getName(pathLoc);
fileSvr.pathLoc = pathLoc;
fileSvr.lenLoc = Long.parseLong(lenLoc);
fileSvr.sizeLoc = sizeLoc;
fileSvr.deleted = false;
fileSvr.md5 = md5;
fileSvr.nameSvr = fileSvr.nameLoc;

//所有單個文件均以uuid/file方式存儲
PathBuilderUuid pb = new PathBuilderUuid();
fileSvr.pathSvr = pb.genFile(fileSvr.uid,fileSvr);
fileSvr.pathSvr = fileSvr.pathSvr.replace("\\","/");

DBConfig cfg = new DBConfig();
DBFile db = cfg.db();
FileInf fileExist = new FileInf();

boolean exist = db.exist_file(md5,fileExist);
//資料庫已存在相同文件,且有上傳進度,則直接使用此信息
if(exist && fileExist.lenSvr > 1)
{
fileSvr.nameSvr = fileExist.nameSvr;
fileSvr.pathSvr = fileExist.pathSvr;
fileSvr.perSvr = fileExist.perSvr;
fileSvr.lenSvr = fileExist.lenSvr;
fileSvr.complete = fileExist.complete;
db.Add(fileSvr);

//觸發事件
up6_biz_event.file_create_same(fileSvr);
}//此文件不存在
else
{
db.Add(fileSvr);
//觸發事件
up6_biz_event.file_create(fileSvr);

FileBlockWriter fr = new FileBlockWriter();
fr.CreateFile(fileSvr.pathSvr,fileSvr.lenLoc);
}
接收文件塊數據,在這個邏輯中我們接收文件塊數據。控制項對數據進行了優化,可以方便調試。如果用監控工具可以看到控制項提交的數據。
boolean isMultipart = ServletFileUpload.isMultipartContent(request);
FileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
List files = null;
try
{
files = upload.parseRequest(request);
}
catch (FileUploadException e)
{// 解析文件數據錯誤
out.println("read file data error:" + e.toString());
return;

}

FileItem rangeFile = null;
// 得到所有上傳的文件
Iterator fileItr = files.iterator();
// 循環處理所有文件
while (fileItr.hasNext())
{
// 得到當前文件
rangeFile = (FileItem) fileItr.next();
if(StringUtils.equals( rangeFile.getFieldName(),"pathSvr"))
{
pathSvr = rangeFile.getString();
pathSvr = PathTool.url_decode(pathSvr);
}
}

boolean verify = false;
String msg = "";
String md5Svr = "";
long blockSizeSvr = rangeFile.getSize();
if(!StringUtils.isBlank(blockMd5))
{
md5Svr = Md5Tool.fileToMD5(rangeFile.getInputStream());
}

verify = Integer.parseInt(blockSize) == blockSizeSvr;
if(!verify)
{
msg = "block size error sizeSvr:" + blockSizeSvr + "sizeLoc:" + blockSize;
}

if(verify && !StringUtils.isBlank(blockMd5))
{
verify = md5Svr.equals(blockMd5);
if(!verify) msg = "block md5 error";
}

if(verify)
{
//保存文件塊數據
FileBlockWriter res = new FileBlockWriter();
//僅第一塊創建
if( Integer.parseInt(blockIndex)==1) res.CreateFile(pathSvr,Long.parseLong(lenLoc));
res.write( Long.parseLong(blockOffset),pathSvr,rangeFile);
up6_biz_event.file_post_block(id,Integer.parseInt(blockIndex));

JSONObject o = new JSONObject();
o.put("msg", "ok");
o.put("md5", md5Svr);
o.put("offset", blockOffset);//基於文件的塊偏移位置
msg = o.toString();
}
rangeFile.delete();
out.write(msg);

註:
1. 上面的java部分的代碼可以直接使用,只需要將上傳的圖片路徑及收集數據並將數據寫入到資料庫即可
2. 上面上傳文件使用到了位元組流,其實還可以使用別的流,這個需要讀者自己在下面完善測試
3. BeanUtils是一個工具 便於將實體對應的屬性賦給實體
4. 上傳文件不能使用 request.getParameter("")獲取參數了,而是直接將request解析,通過判斷每一項是文件還是非文件,然後進行相應的操作(文件的話就是用流來讀取,非文件的話,暫時保存到一個map中。)

❷ web訊雷能斷點續傳嗎

可以,只要不是IE下載都可以斷點傳續的

❸ 如何在web上實現斷點續傳

分塊傳輸。就是把大文件分成若干個小塊來傳。事實上許多上傳類也是這么做的。
如果想斷點,那就必須在上傳過程中有實時數據保存,是實時生成臨時文件,而且有記錄,傳到什麼位置了,以防斷點。
等文件全部傳輸完成 再重組上傳的每個臨時塊文件。

❹ 如何實現HTML5文件斷點續傳

實現HTML5文件斷點續傳

一、實現文件多選

HTML5的<input>新增了"multiple"屬性,該屬性可接受多個值的文件上傳欄位
<input type="file" multiple="multiple" name="file" id="file">
添加了該屬性用戶就可以在彈出的對話框中一次性選擇多個文件了
二、實現文件從計算機拖拽到網頁以及添加文件隊列功能
這里我們用 dragover 和 drop 兩個事件來管理文件拖拽的功能
其中 dragover 用來處理在指定的元素上移動時的事件,這里我們通過給body綁定dragover時間來處理頁面中拖動文件的事件
document.body.addEventListener('dragover', dragFile, false);

function dragFile(evt) {
evt.stopPropagation();
evt.preventDefault();
evt.dataTransfer.dropEffect = '';
}
用 drop 事件來處理滑鼠松開時候的事件,此時應該將用戶拖動過來的文件加入到上傳隊列中,以供後續的處理
document.body.addEventListener('drop', dropFile, false);

function dragFile(evt) {
evt.stopPropagation();
evt.preventDefault();
// dataTransfer.files屬性可以獲取到所有拖動選擇的文件,通過遍歷可以讀取到所有文件的信息。
// 遍歷每個文件可以獲取到文件的 name、size、type、lastModifiedDate等關鍵信息
var files = evt.dataTransfer.files;
// addfile 方法 用來添加上傳文件隊列,在input的change事件中也需要調用
// 該方法首先檢查有無文件正在上傳中,如果有就將後續加入的文件放到上傳隊列中,如果沒有文件正在上傳就直接執行上傳命令
addfile(files);
}
三、文件續傳原理
目前比較常用的斷點續傳的方法有兩種,一種是通過websocket介面進行文件上傳,另一種是通過ajax,兩種方法各有千秋,雖然websocket聽起來比較高端些~ 但是除了用了不同的協議外其他的演算法基本上都是很相似的,並且服務端要開啟ws介面,這里用相對方便的ajax來說明斷點上傳的思路。
說來說去,斷點續傳最核心的內容就是把文件「切片」然後再一片一片的傳給伺服器,但是這看似簡單的上傳過程卻有著無數的坑。
首先是文件的識別,一個文件被分成了若干份之後如何告訴伺服器你切了多少塊,以及最終伺服器應該如何把你上傳上去的文件進行合並,這都是要考慮的。
因此在文件開始上傳之前,我們和伺服器要有一個「握手」的過程,告訴伺服器文件信息,然後和伺服器約定切片的大小,當和伺服器達成共識之後就可以開始後續的文件傳輸了。
前台要把每一塊的文件傳給後台,成功之後前端和後端都要標識一下,以便後續的斷點。
當文件傳輸中斷之後用戶再次選擇文件就可以通過標識來判斷文件是否已經上傳了一部分,如果是的話,那麼我們可以接著上次的進度繼續傳文件,以達到續傳的功能。
四、文件的前端切片
有了HTML5 的 File api之後切割文件比想想的要簡單的多的多。
只要用slice 方法就可以了
var packet = file.slice(start, end);
參數start是開始切片的位置,end是切片結束的位置 單位都是位元組。通過控制start和end 就可以是實現文件的分塊

file.slice(0,1000);
file.slice(1000,2000);
file.slice(2000,3000);
// ......
五、文件片段的上傳
上一部我們通過slice方法把文件分成了若干塊,接下來要做的事情就是把這些碎片傳到伺服器上。
這里我們用ajax的post請求來實現
textpop-up

var xhr = new XMLHttpRequest();
var url = xxx // 文件上傳的地址 可以包括文件的參數 如文件名稱 分塊數等以便後台處理
xhr.open('POST', url, true);
xhr.onload = function (e){
// 判斷文件是否上傳成功,如果成功繼續上傳下一塊,如果失敗重試該快
}
xhr.upload.onprogress = function(e){
// 選用 如果文件分塊大小較大 可以通過該方法判斷單片文件具體的上傳進度
// e.loaded 該片文件上傳了多少
// e.totalSize 該片文件的總共大小
}
xhr.send(packet);

❺ 有沒有可能Web上實現斷點續傳

其實斷點續傳的原理很簡單,就是在Http的請求上和一般的下載有所不同而已。 打個比方,瀏覽器請求伺服器上的一個文時

❻ http斷點續傳控制項2.7.87.21366有什麼用

你要長連接 那就得用Socket

支持不支持是要靠你代碼實現的。。。
給你一個思路:下載一個文件 你一開始是可以得到文件的位元組數組形式的,而下載的那個位元組流,你取了多少,也就是說每次取1024個位元組,取了100次,也就是0到102400個位元組被你下載下來了,那你應該有100次記錄了下載的進度,也就是這次獲取到哪個數據下標了,那麼100次後斷了重新下載,你就可以直接從你記錄好的第100+1次開始下載,之前的就可以無視掉了~~~

http協議一個特點就是 客戶端的每次請求都要求建立一次單獨的連接,在處理完本次請求後,就自動釋放連接。

❼ JAVA WEB怎麼實現大文件上傳

解決這種大文件上傳不太可能用web上傳的方式,只有自己開發插件或是當門客戶端上傳,或者用現有的ftp等。
1)開發一個web插件。用於上傳文件。
2)開發一個FTP工具,不用web上傳。
3)用現有的FTP工具。
下面是幾款不錯的插件,你可以試試:
1)Jquery的uploadify插件。具體使用。你可以看幫助文檔。
2)網上有一個Web大文件斷點續傳控制項:http://www.cnblogs.com/xproer/archive/2012/02/17/2355440.html
此控制項支持100G文件的斷點續傳操作,提供了完善的開發文檔,支持文件MD5驗證,支持文件批量上傳。
JavaUploader免費開源的,是用applet實現的,需要簽名才能在瀏覽器上用,支持斷點。缺點是收費。
3)applet也是一種方式,MUPLOAD組件就是以APPLET方式處理的。
如果你不需要訪問用戶的硬碟文件,那你可以使用FTP上傳,也支持斷點。但只要你訪問用戶磁碟,又要支持斷點,那必須要簽名的。不然瀏覽器不知道你的身份。

❽ 網吧Web迅雷的斷點續傳問題(急)賞20分!!~~

注意檢查文件下載路徑要一樣.不能有一絲改變...
文件是否被破壞.或改變..
我沒見過這種情況,這種斷點續傳不知道WEB支不支持..
你還是在檢察檢察..

不好意思不能幫到你

❾ java web斷點續傳,我用的是fileupload來做的上傳。

使用Struts2上傳文件:

Struts文件上傳需要使用File Upload Filter。Filter Upload Filter使用一些默認的規則:

Form中的<s:file name="image"></s:file>標簽對應著Action類中的三個屬性分別是:上傳文件(java.io.File類型),文件名(java.lang.String類型),文件類型(java.lang.String類型,例如:image/jpeg)。命名規約為:

文件:名字與<s:file>標簽中的name屬性一致,這里為:image

文件名:文件 + FileName,這里為:imageFileName

文件類型:文件 + ContentType,這里為:imageContentType

所以針對上述<s:file name="image"></s:file>表示啊的上傳文件的JSP和Action類被別為:

imageUpload.jsp:

[html]view plain

  • <%@pagecontentType="text/html;charset=UTF-8"language="java"%>

  • <%@taglibprefix="s"uri="/struts-tags"%>

  • <html>

  • <head><title>ImageUpload</title></head>

  • <body>

  • <h1>ImageUploadPage</h1>

  • <s:formaction="imageUpload"method="post"enctype="multipart/form-data">

  • <s:filename="image"></s:file>

  • <s:submit></s:submit>

  • </s:form>

  • </body>

  • </html>



  • ImageUploadAction.java:

    [html]view plain

  • packagecom.jpleasure;

  • importcom.opensymphony.xwork2.ActionSupport;

  • importjava.io.File;

  • importjava.io.InputStream;

  • importjava.io.FileInputStream;

  • importjava.io.FileNotFoundException;

  • {

  • privateFileimage;

  • privateStringimageFileName;

  • privateStringimageContentType;

  • publicFilegetImage(){

  • returnimage;

  • }

  • publicvoidsetImage(Fileimage){

  • this.image=image;

  • }

  • publicStringgetImageFileName(){

  • returnimageFileName;

  • }

  • publicvoidsetImageFileName(StringimageFileName){

  • this.imageFileName=imageFileName;

  • }

  • (){

  • returnimageContentType;

  • }

  • publicvoidsetImageContentType(StringimageContentType){

  • this.imageContentType=imageContentType;

  • }

  • publicStringexecute(){

  • if(image!=null){

  • System.out.println("filenameis:"+this.imageFileName);

  • System.out.println("filecontenttypeis:"+this.imageContentType);

  • System.out.println("filelengthis:"+this.image.length());

  • }

  • returnSUCCESS;

  • }

  • }



  • Struts.xml配置文件:

    [html]view plain

  • <actionname="imageUpload"class="com.jpleasure.ImageUploadAction">

  • <result>/success.jsp</result>

  • </action>

  • 這樣當我們選中上傳文件,提交的時候:文件內容會以File類型的方式放在image聲明的變數中。文件的名字將會被放在imageFileName命名的變數中,文件的類型被放在imageContentType命名的變數中。

    文件下載:

    文件下載需要使用一個特殊的Result,stream類型的Result。Stream類型的Result主要用來處理文件下載操作。

    處理原理為:所有的下載文件都是將一個二進制的流寫入到HttpResponse中去。在Action類中定義一個InputSream類型的二進制流,在Result返回給用戶的時候返回給用戶。

    擴展上述的代碼,將上傳來的文件直接下載給用戶:

    ImageUploadAction中需要追加一個InputSream類型的對象,並且指向上傳的文件,代碼如下,紅色部分表示變化:

    [html]view plain

  • packagecom.jpleasure;

  • importcom.opensymphony.xwork2.ActionSupport;

  • importjava.io.File;

  • importjava.io.InputStream;

  • importjava.io.FileInputStream;

  • importjava.io.FileNotFoundException;

  • {

  • privateFileimage;

  • privateStringimageFileName;

  • privateStringimageContentType;

  • =null;

  • (){

  • returnimageInputStream;

  • }

  • publicvoidsetImageInputStream(InputStreamimageInputStream){

  • this.imageInputStream=imageInputStream;

  • }

  • publicFilegetImage(){

  • returnimage;

  • }

  • publicvoidsetImage(Fileimage){

  • this.image=image;

  • }

  • publicStringgetImageFileName(){

  • returnimageFileName;

  • }

  • publicvoidsetImageFileName(StringimageFileName){

  • this.imageFileName=imageFileName;

  • }

  • (){

  • returnimageContentType;

  • }

  • publicvoidsetImageContentType(StringimageContentType){

  • this.imageContentType=imageContentType;

  • }

  • publicStringexecute(){

  • if(image!=null){

  • System.out.println("filenameis:"+this.imageFileName);

  • System.out.println("filecontenttypeis:"+this.imageContentType);

  • System.out.println("filelengthis:"+this.image.length());

  • try{

  • this.imageInputStream=newFileInputStream(image);

  • }catch(FileNotFoundExceptione){

  • e.printStackTrace();

  • }

  • }

  • returnSUCCESS;

  • }

  • }



  • 配置文件為,紅色為變化部分:

    [html]view plain

  • <actionname="imageUpload"class="com.jpleasure.ImageUploadAction">

  • <resultname="success"type="stream">

  • <paramname="contentType">image/pjpeg</param>

  • <paramname="inputName">imageInputStream</param>

  • <paramname="contentDisposition">attachment;filename="image.jpg"</param>

  • <paramname="bufferSize">1024</param>

  • </result>

  • </action>



  • ContentType表示下載文件的類型。

    InputName表示Action類中用來下載文件的欄位的名字。

    ContentDisposition用來控制文件下載的一些信息,包括是否打開另存對話框,下載文件名等。

    BufferSize表示文件下載時使用的緩沖區的大小。

    實際項目開發的考慮:

    控制上傳文件的類型和最大允許上傳文件的size

    使用File Upload Intercepter的參數可盈控制上傳文件的類型和最大允許上傳文件的size。例如:

    [html]view plain

  • <struts>

  • <packagename="myPackage"extends="struts-default">

  • <interceptor-refname="fileUpload">

  • <paramname="maximumSize">2MB</param>

  • <paramname="allowedTypes">text/html,image/jpeg</param>

  • </interceptor-ref>

  • <interceptor-refname="basicStack"/>

  • <actionname="imageUpload"class="com.jpleasure.ImageUploadAction">

  • <resultname="success"type="stream">

  • <paramname="contentType">image/pjpeg</param>

  • <paramname="inputName">imageInputStream</param>

  • <paramname="contentDisposition">

  • attachment;filename="image.jpg"

  • </param>

  • <paramname="bufferSize">1024</param>

  • </result>

  • </action>

  • </package>

  • </struts>



  • 上述表示允許上傳jpeg和html類型的文件,且最大文件上傳size為2MB

    顯示錯誤信息:

    可以使用如下key表示的message來顯示文件上傳出錯的提示信息:

    消息Key 說明

    struts.messages.error.uploading 文件無法正常上傳時的公共錯誤

    struts.messages.error.file.too.large 文件大小超過最大允許size時的錯誤提示

    struts.messages.error.content.type.not.allowed 文件類型不在上傳文件允許類型中的錯誤提示

❿ 求一個 WEB可斷點續傳的控制項,用於上傳大文件。

FlashFXP