webuploader上传控件

文章目录

webuploader开源魔改
参考
文件上传
图片上传
遇到的问题
如果解决此问题呢？

webuploader开源魔改

开源地址:https://github.com/luoyunchong/staticfiles/blob/master/libs/abp.webuploader.js

参考

对百度WebUploader开源上传控件的二次封装,精简前端代码(两句代码搞定上传) 一开始就是从此代码改写的，增加了UI样式和图片上传预览效果，秒传等功能。

文件上传

示例，使用方式，用户下载 staticfiles项目后，使用vscode打开项目，安装live server插件，可将前端项目运行起来，进入tests/webuploader-file.html 页面，可展示出具体效果。依赖于后端，暂未整理。

          $(function () {//实例化文件上传，webuploader的属性都可以使用$("#uploadfile").powerWebUpload({// fileNumLimit: 2,// auto: false});//编辑时编辑值webuploader.loadFile({elem: '#uploadfile',rows: [{Id: 1,FileName: '-1d2fab5b7544b288.jpg',FileToken: '9a92df63-24fc-4592-968c-efcf70cea290.jpg',FileSize: '2333'}]});//查看页面，只需要调用 这个方法即可，isCheck为true时为查看页面，没有删除按钮webuploader.loadFile({elem: '#check',isCheck:true,rows: [{Id: 1,FileName: '-1d2fab5b7544b288.jpg',FileToken: '9a92df63-24fc-4592-968c-efcf70cea290.jpg',FileSize: '2333'}]});});//如何获取上传文件的地址  ，多文件上传时，文件名最后以*分割     9a92df63-24fc-4592-968c-efcf70cea290.jpg*9a92df63-24fc-4592-968c-efcf70cea290.jpg  function getFiles() {var data = $("#uploadfile").GetFilesAddress();return data;}</script><form class="form-horizontal"><label for="" class="">附件：</label><div id="uploadfile" style="position: relative"></div><br /><label for="" class="">查看页面：</label><div id="check"></div></form>

图片上传

可参考这个页面：https://github.com/luoyunchong/staticfiles/blob/master/tests/webuploader-img.html
即设置属性 uploadType:'img’即可。

遇到的问题

webuploader在同一个页面中有多个实例时，如果将如下代码放到实例中，事件beforeSendFile会执行多次。但如果只实例一次，无法在验证秒传文件后，得到当前上传文件实例

// 大文件分片，断点续传，以及秒传功能
// 在文件开始发送前做些异步操作。做md5验证
// WebUploader会等待此异步操作完成后，开始发送文件。
WebUploader.Uploader.register({"before-send-file": "beforeSendFile"
}, {beforeSendFile: function (file) {var task = new $.Deferred();var $fileId = file.id;uploader.md5File(file, 0, 10 * 1024 * 1024).progress(function (percentage) {var uploadflieElement = $('#' + fileId);if (opts.uploadType === 'file') {var value = Math.round(percentage * 100);uploadflieElement.find('div.webuploadstate .webupload-text').html('正在上传' + value + '%');}}).then(function (val) {var $fileId = file.id;userInfo.md5 = val;$.ajax({headers: {"Authorization": "Bearer " + webuploader.authorization},type: "POST",url: serviceUrl + '/File/Md5Validate',data: {md5: val},cache: false,timeout: 3000,dataType: "json"}).then(function (response, textStatus, jqXHR) {//若存在，这返回失败给WebUploader，(后台操作)表明该文件不需要上传，然后就可以把数据库查询出的文件信息的物理路径给新文件if (response.success == true) {//task.reject('秒传成功');  此处会执行uploadErroruploader.skipFile(file);//上传成功事件if (opts.uploadType === 'file') {if($('#'+$fileId+' .webuploadstate .file-token').attr('data-filetoken')!=''){return;}var limit = webuploader.bytesToSize(file.size);var downUrl = serviceUrl + '/File/Download?fileToken=' + response.result + '&newName=' + file.name;$('#' + $fileId).find('div.webuploadstate .webupload-text').html(limit + ' 秒传');$('#' + $fileId).find('div.webuploadstate .file-token').attr('data-filetoken', response.result);$('#' + $fileId).find('div.webuploadinfo .webupload-button a').after('<a href="' + downUrl + '" target="_blank"><span  class="webupload-download">下载</span></a>');} else {window.setTimeout(function () {$('#' + $fileId + ' img').attr('src', serviceUrl + '/File/Download?fileToken=' + response.result);$('#' + $fileId + ' .webupload-list-img-cover .img-upload-state span.file-token').attr('data-filetoken', response.result);}, 500);}}task.resolve();}, function (jqXHR, textStatus, errorThrown) { //任何形式的验证失败，都触发重新上传task.resolve();});});return $.when(task);}
});

如果解决此问题呢？

在方法外定义一个对象，存储当前uploader实例，uploaders[userInfo.index]即可访问到当前实例

    var userInfo = {md5: '',index: ''},uploaders = {};

在before-send-file事件前执行此方法，即监听beforeFileQueued方法

    /*当文件被加入队列之前触发，此事件的handler返回值为false，则此文件不会被添加进入队列。*/uploader.on("beforeFileQueued",function (file) {//userInfo.index = pickerid;return true;});

webuploader上传控件相关推荐

封装直传阿里云存储文件上传控件
本文目标封装一个直传阿里云OSS云存储图片上传控件控件效果图上传之前上传成功预览图片文件上传前后台及阿里云存储数据流转过程 1.前端先访问后台接口获取上传阿里云存储权限相关信息和文件编号信 ...
百度上传控件webUPload 的使用
要使用上传控件首先需要引用webuploader的js文件以及css文件,还有对应的image文件具体可以根据使用选择http://fex.baidu.com/webuploader/downloa ...
jquery文件上传控件 Uploadify
基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同时上传,上传进行进度显示,删除已上传文件. 要求使用jquery1.4或以上版本,flash player 9.0.24以上. 有两个 ...
在线编辑器上传控件
为什么80%的码农都做不了架构师?>>> 在线编辑器上传控件 http://kindeditor.net/demo.php 上传控件: 转载于:https://my.osch ...
使用jquery文件上传控件Uploadify来异步上传图片
1.项目中需要图片的异步上传,度娘之后发现有一个插件可以完成这个需求,即是:Uploadify 下面是这个异步上传的插件的一个简单介绍: 基于jquery的文件上传控件,支持ajax无刷新上传,多个文 ...
JQuery文件上传控件Uploadify文档
Uploadify是一个基于JQuery的文件上传控件,支持ajax无刷新上传,比较好用,现在用着一个不爽的地方是--每个版本的属性名和事件名.方法名都有一些不一样,这在遇到问题,查资料的时候会比较麻 ...
文件上传~Uploadify上传控件~续(多文件上传)
对于Uploadify文件上传之前已经讲过一次(文件上传~Uploadify上传控件),只不过没有涉及到多文件的上传,这回主要说一下多个文件的上传,首先,我们要清楚一个概念,多文件上传前端Upload ...
【推荐】.NET批量上传控件——HtmlInputFiles
阅读: 2421 评论: 15 作者: 飛雪飄寒发表于 2009-12-02 17:29 原文链接此控件支持多个文件同时上传,而且上传文件的数量.大小及格式可以根据自己的需要进行设置,并且使用非常 ...
使用Kendo上传控件实现ASP.NET Core的“批处理模式”
从Github下载源代码最初,我将上载控件用于仅表单上的基本上载控件.而且,这正是它的意思.但是,我希望它以一种"批处理模式"工作.我的意思是仅将文件上传到浏览器本身,而不在用户 ...