关于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规范组织代码，清晰明了，方便高级玩家扩展。

可以试试这样

前端通过 input type =  "file" 接收文件

然后使用文件的 slice 的方法对文件进行分片

将每一片提交到后台依次提交到后台，提交时通过 formData 提交，添加几个字段

(1). 这次上传文件的惟一 id

(2). 上传的状态，是开始，还是上传中，还是上传结束

(3). 分片的位置，比如是第一片，第二片

(4). 分片的数据

后端当接收到一个文件 id 的结束标识时，把对应的分片按位置数据拼接起来就行

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>