A. jsp 大文件分片上傳處理如何實現
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);
B. 求jsp文件分片上傳,斷點續傳的方法
無組件斷點續傳.gif
1. 組件簡介
webuploader：是一個以HTML5為主， Flash為輔的文件上傳組件，採用大文件分片/並發上傳的方式，極大地提高了文件上傳的效率，同時兼容多種瀏覽器版本；
2. 項目背景簡介
本篇文章的背景，是在上一篇文章(《無組件實現大文件分片上傳，斷點續傳》)的項目背景下進行的一次嘗試，所以本篇文章還是基於上一篇文章的背景，但是不會介紹視頻基本信息(視頻標題、簡介、播出時間等)的操作，主要介紹文件的上傳。因為項目的特殊需求，這種使用插進的方式最終沒有被採用，因為一些控制項無法做到定製化。
上一篇文章(《無組件實現大文件分片上傳，斷點續傳》)中介紹的文件上傳方式，在前端主要採用純JavaScript來進行文件切分、驗證，後台主要採用了NIO的方式進行分片的追加。而在這篇文章中，將介紹前端採用webuploader，後台採用臨時目錄+傳統I/O方式進行分片合並的方式。
3. 技術實現
3.1 組件引入
在webuploader官網下載必要的文件，放入項目中。在頁面中進行引入；
0_組件引入.png
<!-- webuploader文件上傳 -->
<script src="static/webuploader/webuploader.nolog.min.js"></script>
<link href="static/webuploader/webuploader.css" rel="stylesheet" type="text/css" />
3.2 前端頁面實現
在前端頁面中，可以不用關心css樣式，但需要注意標簽的id/nama屬性，這些將在後面的JavaScript中使用到。
C. Android上大文件分片上傳 具體怎麼弄
正常情況下，一般都是在長傳完成後，在伺服器直接保存。
?
1
2
3
4
5
6
7
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
//保存文件
context.Request.Files[0].SaveAs(context.Server.MapPath("~/1/" + context.Request.Files[0].FileName));
context.Response.Write("Hello World");
}
最近項目中用網路開源的上傳組件webuploader，官方介紹webuploader支持分片上傳。具體webuploader的使用方法見官網http://fex..com/webuploader/。
?
1
2
3
4
5
6
7
8
9
10
11
12
var uploader = WebUploader.create({
auto: true,
swf:'/webuploader/Uploader.swf',
// 文件接收服務端。
server: '/Uploader.ashx',
// 內部根據當前運行是創建，可能是input元素，也可能是flash.
pick: '#filePicker',
chunked: true,//開啟分片上傳
threads: 1,//上傳並發數
//由於Http的無狀態特徵，在往伺服器發送數據過程傳遞一個進入當前頁面是生成的GUID作為標示
formData: {guid:"<%=Guid.NewGuid().ToString()%>"}
});
webuploader的分片上傳是把文件分成若干份，然後向你定義的文件接收端post數據，如果上傳的文件大於分片的尺寸，就會進行分片，然後會在post的數據中添加兩個form元素chunk和chunks,前者標示當前分片在上傳分片中的順序（從0開始），後者代表總分片數。
D. webuploader分片上傳的實現代碼（前後端分離）
本文介紹了webuploader分片上傳的實現代碼（前後端分離），分享給大家，具體如下：
WebUploader是由Bai
WebFE(FEX)團隊開發的一個簡單的以HTML5為主，FLASH為輔的現代文件上傳組件。在現代的瀏覽器裡面能充分發揮HTML5的優勢，同時又不摒棄主流IE瀏覽器，沿用原來的FLASH運行時，兼容IE6+，iOS
6+,
android
4+。兩套運行時，同樣的調用方式，可供用戶任意選用。採用大文件分片並發上傳，極大的提高了文件上傳效率。(這個是從官網上直接的解釋)
功能描述
1、webuploader是網路研發的上傳組件，文檔不是特別規整，但是也夠用了。
2、前端使用官網的上傳圖片demo，在此基礎上代碼略微調整做分片。既可以上傳圖片也可以上傳文件。文件超過分片大小才啟用分片。
3、分片上傳已做md5校驗，達到秒傳的效果。分片以後需要合並，可以先分片後合並，也可以邊分片邊合並，本示例採用的是邊分片邊合並的方案。
4、後端用springboot做框架搭建。springMVC做rest服務，開啟跨域訪問。
5、容器用springboot內置的tomcat插件，運行Application的main方法即可啟動服務；
顯示效果
關鍵代碼前端
WebUploader.Uploader.register({
'name':
'webUploaderHookCommand',
'before-send-file':
'beforeSendFile',
"before-send":
"beforeSend"
},
{
beforeSendFile:
function(file)
{
var
task
=
new
WebUploader.Deferred();
fileName
=
file.name;
fileSize
=
file.size;
(new
WebUploader.Uploader()).md5File(file,
0,
10
*
1024
*
1024).progress(function(percentage)
{}).then(function(val)
{
fileMd5
=
val;
var
url
=
checkUrl;
var
data
=
{
type:
0,
fileName:
fileName,
fileMd5:
fileMd5,
fileSize:
fileSize
};
$.ajax({
type:
"POST",
url:
url,
data:
data,
cache:
false,
async:
false,
//
同步
timeout:
1000,
//
todo
超時的話，只能認為該分片未上傳過
dataType:
"json",
error:
function(XMLHttpRequest,
textStatus,
errorThrown)
{
file.statusText
=
'server_error';
task.reject();
}
}).then(function(data,
textStatus,
jqXHR)
{
if(data.rtn
==
0)
{
if(data.obj
==
1)
{
file.statusText
=
'file_existed';
task.reject();
}
else
{
task.resolve();
}
}
else
{
task.reject();
}
});
});
return
task.promise();
},
beforeSend:
function(block)
{
var
task
=
new
WebUploader.Deferred();
var
url
=
checkUrl;
var
data
=
{
type:
1,
fileName:
fileName,
fileMd5:
fileMd5,
chunk:
block.chunk,
fileSize:
block.end
-
block.start
};
$.ajax({
type:
"POST",
url:
url,
data:
data,
cache:
false,
async:
false,
//
同步
timeout:
1000,
//
todo
超時的話，只能認為該分片未上傳過
dataType:
"json"
}).then(function(data,
textStatus,
jqXHR)
{
if(data.rtn
==
0
&&
data.obj
==
1)
{
task.reject();
//
分片存在，則跳過上傳
}
else
{
task.resolve();
}
});
this.owner.options.formData.fileMd5
=
fileMd5;
this.owner.options.formData.chunkSize
=
chunkSize;
return
task.promise();
}
});
//
實例化
uploader
=
WebUploader.create({
pick:
{
id:
'#filePicker',
label:
'點擊選擇文件'
},
formData:
{
uid:
123
},
dnd:
'#dndArea',
//指定文件拖拽的區域
paste:
'#uploader',
//指定監聽paste事件的容器，如果不指定，不啟用此功能。此功能為通過粘貼來添加截屏的圖片。建議設置為document.body.
swf:
'../plugins/webuploader/Uploader.swf',
chunked:
true,
chunkSize:
chunkSize,
chunkRetry:
false,
threads:
1,
server:
uploadUrl,
//
runtimeOrder:
'flash',
//
accept:
{
//
title:
'Images',
//
extensions:
'gif,jpg,jpeg,bmp,png',
//
mimeTypes:
'image/*'
//
},
//
禁掉全局的拖拽功能。這樣不會出現圖片拖進頁面的時候，把圖片打開。
disableGlobalDnd:
true,
fileNumLimit:
300
//限制多文件上傳的個數
//fileSizeLimit:
200
*
1024
*
1024,
//
限制所有文件的大小
200
M
//fileSingleSizeLimit:
50
*
1024
*
1024
//
限制單個文件的大小
50
M
});
後端
import
java.io.File;
import
java.io.IOException;
import
org.slf4j.Logger;
import
org.slf4j.LoggerFactory;
import
org.springframework.beans.factory.annotation.Value;
import
org.springframework.stereotype.Service;
import
org.springframework.web.multipart.MultipartFile;
import
com.bear.upload.util.FileUtil;
import
com.bear.upload.util.RETURN;
import
com.bear.upload.vo.CheckMd5FileVO;
import
com.bear.upload.vo.UploadVO;
@Service
public
class
ChunkUploadService
{
private
static
Logger
LOG
=
LoggerFactory.getLogger(ChunkUploadService.class);
@Value("${file.upload.path}")
private
String
UPLOAD_PATH;
private
static
final
String
Delimiter
=
"-";
/**
*
上傳之前校驗(整個文件、分片)
*
*
@param
md5FileVO
*
@return
*/
public
Object
check(CheckMd5FileVO
md5FileVO)
{
Integer
type
=
md5FileVO.getType();
Long
chunk
=
md5FileVO.getChunk();
String
fileName
=
md5FileVO.getFileName();
Long
fileSize
=
md5FileVO.getFileSize();
if
(type
==
0)
{//
未分片校驗
String
destfilePath
=
UPLOAD_PATH
+
File.separator
+
fileName;
File
destFile
=
new
File(destfilePath);
if
(destFile.exists()
&&
destFile.length()
==
fileSize)
{
return
RETURN.success("文件已存在，跳過",
1);
}
else
{
return
RETURN.success("文件不存在",
0);
}
}
else
{//
分片校驗
String
fileMd5
=
md5FileVO.getFileMd5();
String
destFileDir
=
UPLOAD_PATH
+
File.separator
+
fileMd5;
String
destFileName
=
chunk
+
Delimiter
+
fileName;
String
destFilePath
=
destFileDir
+
File.separator
+
destFileName;
File
destFile
=
new
File(destFilePath);
if
(destFile.exists()
&&
destFile.length()
==
fileSize)
{
return
RETURN.success("分片已存在，跳過",
1);
}
else
{
return
RETURN.success("分片不存在",
0);
}
}
}
/**
*
文件上傳
*
*
@param
file
*
@param
uploadVO
*
@param
appVersion
*
@return
*/
public
Object
upload(MultipartFile
file,
UploadVO
uploadVO)
{
Long
chunk
=
uploadVO.getChunk();
if
(chunk
==
null)
{//
沒有分片
return
UnChunkUpload(file,
uploadVO);
}
else
{//
分片
return
ChunkUpload(file,
uploadVO);
}
}
/**
*
分片上傳
*
*
@param
file
*
@param
uploadVO
*
@param
appVersion
*
@return
*/
public
Object
ChunkUpload(MultipartFile
file,
UploadVO
uploadVO)
{
String
fileName
=
uploadVO.getName();
String
fileMd5
=
uploadVO.getFileMd5();
Long
chunk
=
uploadVO.getChunk();//
當前片
Long
chunks
=
uploadVO.getChunks();//
總共多少片
//
分片目錄創建
String
chunkDirPath
=
UPLOAD_PATH
+
File.separator
+
fileMd5;
File
chunkDir
=
new
File(chunkDirPath);
if
(!chunkDir.exists())
{
chunkDir.mkdirs();
}
//
分片文件上傳
String
chunkFileName
=
chunk
+
Delimiter
+
fileName;
String
chunkFilePath
=
chunkDir
+
File.separator
+
chunkFileName;
File
chunkFile
=
new
File(chunkFilePath);
try
{
file.transferTo(chunkFile);
}
catch
(Exception
e)
{
LOG.error("分片上傳出錯",
e);
return
RETURN.fail("分片上傳出錯",
1);
}
//
合並分片
Long
chunkSize
=
uploadVO.getChunkSize();
long
seek
=
chunkSize
*
chunk;
String
destFilePath
=
UPLOAD_PATH
+
File.separator
+
fileName;
File
destFile
=
new
File(destFilePath);
if
(chunkFile.length()
>
0)
{
try
{
FileUtil.randomAccessFile(chunkFile,
destFile,
seek);
}
catch
(IOException
e)
{
LOG.error("分片{}合並失敗：{}",
chunkFile.getName(),
e.getMessage());
return
RETURN.fail("分片合並失敗",
1);
}
}
if
(chunk
==
chunks
-
1)
{
//
刪除分片文件夾
FileUtil.deleteDirectory(chunkDirPath);
return
RETURN.success("上傳成功",
1);
}
else
{
return
RETURN.fail("上傳中...",
1);
}
}
/**
*
未分片上傳
*
*
@param
file
*
@param
uploadVO
*
@param
appVersion
*
@return
*/
public
Object
UnChunkUpload(MultipartFile
file,
UploadVO
uploadVO)
{
String
fileName
=
uploadVO.getName();
//
String
fileMd5
=
uploadVO.getFileMd5();
//
文件上傳
File
destFile
=
new
File(UPLOAD_PATH
+
File.separator
+
fileName);
if
(file
!=
null
&&
!file.isEmpty())
{
//
上傳目錄
File
fileDir
=
new
File(UPLOAD_PATH);
if
(!fileDir.exists())
{
fileDir.mkdirs();
}
if
(destFile.exists())
{
destFile.delete();
}
try
{
file.transferTo(destFile);
return
RETURN.success("上傳成功",
0);
}
catch
(Exception
e)
{
LOG.error("文件上傳出錯",
e);
return
RETURN.fail("文件上傳出錯",
0);
}
}
return
RETURN.fail("上傳失敗",
0);
}
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:Vue2.0結合webuploader實現文件分片上傳功能使用WebUploader實現分片斷點上傳文件功能（二）webuploader在springMVC+jquery+Java開發環境下的大文件分片上傳的實例代碼jQuery
webuploader分片上傳大文件
E. web前端上傳圖片的幾種方法
下面給你介紹3種web前端上傳圖片的方法：
1.表單上傳
最傳統的圖片上傳方式是form表單上傳，使用form表單的input[type=」file」]控制項，打開系統的文件選擇對話框，從而達到選擇文件並上傳的目的。
ajax無刷新上傳
Ajax無刷新上傳的方式，本質上與表單上傳無異，只是把表單里的內容提出來採用ajax提交，並且由前端決定請求結果回傳後的展示結果。
3.各類插件上傳
當上傳的需求要求可預覽、顯示上傳進度、中斷上傳過程、大文件分片上傳等等，這時傳統的表單上傳很難實現這些功能，我們可以藉助現有插件完成。
如網路上傳插件Web Uploader、jQuery圖片預覽插件imgPreview 、拖拽上傳與圖像預覽插件Dropzone.js等等，大家可根據項目實際需求選擇適合的插件。
F. js 大文件分片上傳處理如何實現
推薦採用webuploader控制項來解決。
關於WebUploader的功能說明：
大文件上傳續傳
支持超大文件上傳(100G+)和續傳，可以關閉瀏覽器，重啟系統後仍然繼續上傳。
開源
提供ASP.NET,JSP,PHP示例和源代碼，其中JSP提供MySQL,Oracle,SQL Server資料庫的配置和示例代碼。
分片、並發
分片與並發結合，將一個大文件分割成多塊，並發上傳，極大地提高大文件的上傳速度。
當網路問題導致傳輸錯誤時，只需要重傳出錯分片，而不是整個文件。另外分片傳輸能夠更加實時的跟蹤上傳進度。
預覽、壓縮
支持常用圖片格式jpg,jpeg,gif,bmp,png預覽與壓縮，節省網路數據傳輸。
解析jpeg中的meta信息，對於各種orientation做了正確的處理，同時壓縮後上傳保留圖片的所有原始meta數據。
多途徑添加文件
支持文件多選，類型過濾，拖拽(文件&文件夾)，圖片粘貼功能。上傳本地指定路徑的文件，不需要通過點擊按鈕選擇文件。
粘貼功能主要體現在當有圖片數據在剪切板中時（截屏工具如QQ(Ctrl + ALT + A), 網頁中右擊圖片點擊復制），Ctrl + V便可添加此圖片文件。
HTML5 & FLASH
兼容主流瀏覽器和低版本瀏覽器，介面一致，實現了兩套運行時支持，用戶無需關心內部用了什麼內核。而且支持IE6，IE8瀏覽器。
同時Flash部分沒有做任何UI相關的工作，方便不關心flash的用戶擴展和自定義業務需求。
基於內存映射模式進行IO操作，充分發揮操作系統性能。
MD5秒傳
當文件體積大、量比較多時，支持上傳前做文件md5值驗證，一致則可直接跳過。
如果服務端與前端統一修改演算法，取段md5，可大大提升驗證性能，耗時在20ms左右。
易擴展、可拆分
採用可拆分機制, 將各個功能獨立成了小組件，可自由搭配。
採用AMD規范組織代碼，清晰明了，方便高級玩家擴展。
G. 求JavaScript怎麼實現web端上傳超大文件
藉助js的Blob對象FormData對象可以實現大文件分片上傳的功能，關於Blob和FormData的具體使用方法可以到如下地址去查看網頁鏈接網頁鏈接
H. jquery.uploadify 能否實現分片上傳
簡單實現限制uploadify上傳個數
?
123456789101112131415161718
function deleteUrl(){ $("body").on("click",".img-wrap .mask span",function(event){ event.stopPropagation(); var qs=$('#file_upload-queue>div');//所有的隊列 var id=qs.eq(2).attr('id');//得到第三個隊列的id $('#uploadTowedAccredit').uploadify('cancel',id);//這樣就行了，會自動重置隊列數量和刪除dom對象，不能直接qs.eq(2).remove()，無效 /* if(!window.confirm("您確定刪除附件？")){ return; } var imgUrl=$(this).parents(".img-wrap").find("img").attr("src"); deleteImage(imgUrl); $(this).parents(".img-wrap").remove(); */ });};
?
12345678
<li class="blockli clearfix" style="padding-bottom: 5px;"> <span class="left-name"><em class="red-star">*</em>拖機授權委託書：</span> <div class="upload-wrap" style="width:100px;"> <input type="file" name="uploadTowedAccredit" id="uploadTowedAccredit" class="filetext"/> </div> <span id="uploadTowedAccreditLinkTip" class="warn-tips"><em></em>請上傳附件，最多上傳${towedAccreditPicMax} 張</span> <div id="towedAccreditDiv" class="up-img-list clearfix"></div></li>
?
// 上傳拖機授權委託書function uploadTowedAccreditInit(){ $("#uploadTowedAccredit").uploadify({ 'hideButton':'true', 'preventCaching' : 'true', 'checkExisting':'true', 'swf': SWF, 'uploader':uploadImg, 'debug':false, 'multi': true, 'method': 'post', 'preventCaching' : true, 'removeCompleted' : true, 'removeTimeout' : 10, 'requeueErrors' : true, 'successTimeout' : 30, 'uploadLimit' : ${towedAccreditPicMax}, 'fileObjName' : 'Filedata', //單張圖片最大限制 'fileSizeLimit' : '1024KB', 'fileTypeDesc' : 'Image Files', //僅限上傳jpg格式圖片 'fileTypeExts' : '*.jpg;*.png', 'height': 24, 'width':73, 'buttonText' : '上傳附件', 'auto': true, 'buttonClass':'uploada btn-fff-24', 'onSWFReady' : function() { },