webuploader分片上传的实现代码(前后端分离)-创新互联
本文介绍了webuploader分片上传的实现代码(前后端分离),分享给大家,具体如下:
目前创新互联已为近千家的企业提供了网站建设、域名、网页空间、网站托管、企业网站设计、泾川网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用原来的FLASH运行时,兼容IE6+,iOS 6+, android 4+。两套运行时,同样的调用方式,可供用户任意选用。采用大文件分片并发上传,极大的提高了文件上传效率。(这个是从官网上直接copy的解释)
功能描述
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 });
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
标题名称:webuploader分片上传的实现代码(前后端分离)-创新互联
本文链接:http://ybzwz.com/article/csojjj.html