前端⼤⽂件上传解决⽅案（500M以上）
小程序开发服务好态度好本⼈在2010年时使⽤swfupload为核⼼进⾏⽂件的批量上传的解决⽅案。见⽂章：WEB版⼀次选择多个⽂件进⾏批量上传(swfupload)的解决⽅案。
本⼈在2013年时使⽤plupload为核⼼进⾏⽂件的批量上传的解决⽅案。见⽂章：WEB版⼀次选择多个⽂件进⾏批量上传(Plupload)的解决⽅案
最近在学习百度的开源上传组件WebUploader，写了⼀些⽰例以记录。WebUploader的缺点是没有⼀个⽐较好的现成的界⾯，这个界⾯需要⾃⼰去实现。⾃由度⾼了⼀些。
WebUploader是由Baidu WebFE(FEX)团队开发的⼀个简单的以HTML5为主，FLASH为辅的现代⽂件上传组件。在现代的浏览器⾥⾯能充分发挥HTML5的优势，同时⼜不摒弃主流IE浏览器，沿⽤原来的FLASH运⾏时，兼容IE6+，iOS 6+, android 4+。两套运⾏时，同样的调⽤⽅式，可供⽤户任意选⽤。浏览器⽀持ie6,ie7,ie8,ie9,ie10,ie11,firefox,chrome,edge。⽀持全平台操作系统：
jquery下载文件请求
Windows,Mac,Linux⽀持⽂件夹上传下载，⽂件批量上传下载，层级⽬录保存。
关于WebUploader的功能说明：
⼤⽂件上传续传
⽀持超⼤⽂件上传(100G+)和续传，可以关闭浏览器，重启系统后仍然继续上传。
开源
提供ASP.NET,JSP,PHP⽰例和源代码，其中JSP提供MySQL,Oracle,SQL Server数据库的配置和⽰例代码。
分⽚、并发
分⽚与并发结合，将⼀个⼤⽂件分割成多块，并发上传，极⼤地提⾼⼤⽂件的上传速度。
当⽹络问题导致传输错误时，只需要重传出错分⽚，⽽不是整个⽂件。另外分⽚传输能够更加实时的跟踪上传进度。
预览、压缩
⽀持常⽤图⽚格式jpg,jpeg,gif,bmp,png预览与压缩，节省⽹络数据传输。
解析jpeg中的meta信息，对于各种orientation做了正确的处理，同时压缩后上传保留图⽚的所有原始meta数据。
js里的sprintf
多途径添加⽂件
⽀持⽂件多选，类型过滤，拖拽(⽂件&⽂件夹)，图⽚粘贴功能。上传本地指定路径的⽂件，不需要通过点击按钮选择⽂件。
粘贴功能主要体现在当有图⽚数据在剪切板中时（截屏⼯具如QQ(Ctrl + ALT + A), ⽹页中右击图⽚点击复制），Ctrl + V便可添加此图⽚⽂件。
HTML5 & FLASH
兼容主流浏览器和低版本浏览器，接⼝⼀致，实现了两套运⾏时⽀持，⽤户⽆需关⼼内部⽤了什么内核。⽽且⽀持IE6，IE8浏览器。
同时Flash部分没有做任何UI相关的⼯作，⽅便不关⼼flash的⽤户扩展和⾃定义业务需求。
基于内存映射模式进⾏IO操作，充分发挥操作系统性能。
MD5秒传
当⽂件体积⼤、量⽐较多时，⽀持上传前做⽂件md5值验证，⼀致则可直接跳过。
如果服务端与前端统⼀修改算法，取段md5，可⼤⼤提升验证性能，耗时在20ms左右。listitem什么意思
易扩展、可拆分
采⽤可拆分机制, 将各个功能独⽴成了⼩组件，可⾃由搭配。
采⽤AMD规范组织代码，清晰明了，⽅便⾼级玩家扩展。
⽂件夹上传
⽀持10万+级别的⽂件夹上传，续传。
⽀持层级⽬录结构保存，上传后能够将数据库层级信息保存在数据库中。作业扫一扫秒出答案
提供MySQL,Oracle,SQL Server数据库⽀持。
⽀持⽂件夹续传，在浏览器刷新，重启后仍然能够继续上传。
⽀持跨域上传。
PC端全平台⽀持
⽀持Windows,macOS,Linux。⽀持国产化操作系统，⽀持政务信息安全项⽬。
其中Windows⽀持低版本系统：Windows XP。
其中浏览器包括：IE6,IE7,IE8(x86,x64),IE9(x86,x64),IE10(x86,x64),IE11(x86,x64),360安全浏览器,360极速浏览器,QQ浏览器，搜狗浏览器,Maxthon(遨游)浏览器1.X,Maxthon(傲游)浏览器2.x,Firefox,Chrome,Opera 23+
⼀： 下⾯就是利⽤WebUploader组件，让客户⼀次选择多个⽂件，然后将选择的⽂件上传到服务器的批量⽂件解决⽅案。
让我们先来看看客户端的界⾯效果图。（多选⽂件，批量上传，上传进度显⽰）
1) 显⽰界⾯：
2) 进⾏多⽂件选择：
3) 上传进度显⽰
说明：见上图WebUploader默认是3个线程⼀起并发上传⽂件。如果需要增加并发数，或是减少并发数。可以修改threads属性，这个属性就是允许的最⼤上传并发数。
手机sql软件
3) 上传成功显⽰
⼆：具体的代码与操作步骤：
第⼀步，要完成下⾯的⽰例，必须先准备好WebUploader组件。
1) WebUploader:⼤家可以访问WebUploader官⽅⽹站：www.webuploader，在这个⽹站上可以下载到组件与demo。
第⼆步，这个⽰例的⽬录结构如图：
1.主要⽬录结构
2. 此⽰例中⽤到的js脚本⽂件与css⽂件。
第三步，前台部分准备客户操作的WEB界⾯，如下[WebUploaderFileByBaidu2.aspx、UploaderFileByBaidu.ashx]
1)  前台客户端代码，其中WebUploaderFileByBaidu2.aspx的代码如下，WebUploaderFileByBaidu2.aspx.cs⽂件中只使⽤默认的代码，不⽤添加任何代码。
Html代码

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。