webuploader多个实例上传（按两个来）

﹏ヽ暗。殇╰゛Y 2021-06-26 16:06 495阅读 0赞

![20191007092417778.png][]

<script src="~/Scripts/jquery-1.9.1.min.js"></script>
    <link href="~/Scripts/1/bootstrap.css" rel="stylesheet" />
    <link href="~/Scripts/1/webuploader.css" rel="stylesheet" />
    
    <script src="~/Scripts/1/webuploader.js"></script>
    <script src="~/Scripts/1/bootstrap.min.js"></script>
    <script src="~/Scripts/1/webuploader.js"></script>
    
    <div id="uploader" class="wu-example">
        
        <div id="thelist" class="uploader-list"></div>
        <div class="btns">
            <div id="picker0" data-ids="picker" >文件上传</div>
            <div id="picker1" style="display:none" >选择文件</div>
        </div>
    </div>
    
    <span style="font-size: 14px;">
        <script type="text/javascript"> $(function () { var uploader; Size = 0; uploader= aa("0"); }); function aa(i) { /*init webuploader*/ $list = $("#thelist"); uploader = WebUploader.create({ auto: true, // swf文件路径 swf: '/Scripts/1/Uploader.swf', // 文件接收服务端。 server: '/Home/UpLoadProcess/', // 选择文件的按钮。可选。 // 内部根据当前运行是创建，可能是input元素，也可能是flash. pick: { id: '#picker'+i, //只能选择一个文件上传 //multiple: false }, fileSingleSizeLimit: 100 * 1024 * 1024, //设定单个文件大小 //限制只能上传一个文件 //fileNumLimit: 1, // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！ resize: false, chunked: true,//分片上传-大文件的时候分片上传，默认false chunkSize: 500 * 1024, }) // 当有文件被添加进队列的时候 uploader.on('fileQueued', function (file) { // 判断当前上传文件的格式 if (uploader.getFiles()[uploader.getFiles().length - 1].ext.toLowerCase() != "docx" && uploader.getFiles()[uploader.getFiles().length - 1].ext.toLowerCase() != "doc" && uploader.getFiles()[uploader.getFiles().length - 1].ext.toLowerCase() != "xlsx" && uploader.getFiles()[uploader.getFiles().length - 1].ext.toLowerCase() != "xls" && uploader.getFiles()[uploader.getFiles().length - 1].ext.toLowerCase() != "pptx" && uploader.getFiles()[uploader.getFiles().length - 1].ext.toLowerCase() != "ppt" && uploader.getFiles()[uploader.getFiles().length - 1].ext.toLowerCase() != "mp4" && uploader.getFiles()[uploader.getFiles().length - 1].ext.toLowerCase() != "swf" && uploader.getFiles()[uploader.getFiles().length - 1].ext.toLowerCase() != "pdf" && uploader.getFiles()[uploader.getFiles().length - 1].ext.toLowerCase() != "jpg" && uploader.getFiles()[uploader.getFiles().length - 1].ext.toLowerCase() != "png") { alert("上传格式不正确！"); } else { var $li = $('#WU_FILE_' + i), $percent = $li.find('.info'); if (!$percent.length) { $list.append('<div id="WU_FILE_' + i + '" class="item">' + '<h4 class="info">' + file.name + '</h4>' + '<p class="state">等待上传...</p>' + ' <span id="iid' + i + '"></span><span id="all' + i + '"></span></div>'); } else { var $lii = $('#WU_FILE_' + i);//修改已上传的 $lii.html('<div id="WU_FILE_' + i + '" class="item">' + '<h4 class="info">' + file.name + '</h4>' + '<p class="state">等待上传...</p>' + '<span id="iid' + i + '"></span><span id="all' + i + '"></span></div>'); } } }); // 文件上传过程中创建进度条实时显示。 uploader.on('uploadProgress', function (file, percentage) { $li = $('#WU_FILE_' + i), $percent = $li.find('.progress .progress-bar'); // 避免重复创建---进度条 if (!$percent.length) { $percent = $('<div class="progress ctive">' + '<div class="progress-bar" role="progressbar" style="width: 0%">' + '</div>' + '</div>').appendTo($li).find('.progress-bar'); } $li.find('p.state').text('上传中'); $percent.css('width', percentage * 100 + '%');//进度条 //上传期间所上传占总的比例 var nowSize = 0;//已上传大小 var gb = Math.pow(1024, 3); var mb = Math.pow(1024, 2); var kb = 1024; var fileSize = uploader.getFiles()[uploader.getFiles().length - 1].size;//总大小 if (fileSize >= gb) { var fz = (fileSize / gb).toFixed(2); Size = fz + "GB"; nowSize = (fz * percentage).toFixed(2) + "GB"; } else if (fileSize >= mb) { var fz = (fileSize / mb).toFixed(2); Size = fz + "MB"; nowSize = (fz * percentage).toFixed(2) + "MB"; } else if (fileSize >= kb) { var fz = (fileSize / kb).toFixed(2); Size = fz + "KB"; nowSize = (fz * percentage).toFixed(2) + "KB"; } else { var fz = fileSize; Size = fz + "B"; nowSize = fz * percentage + "B"; } //var iidSize = nowSize / Size; $("#iid" + i).html((percentage*100).toFixed(2)+"%");//已上传比例 $("#all" + i).html("总大小：" + Size);//总大小 }); uploader.on('uploadSuccess', function (file, response) { //console.log(response._raw); $('#WU_FILE_' + i).find('p.state').text('已完成'); //uploader.removeFile(file);//删除 //uploader.reset(); }); uploader.on('uploadError', function (file) { $('#WU_FILE_' + i).find('p.state').text('上传出错'); }); uploader.on('uploadComplete', function (file) { //$('#' + file.id).find('.progress').fadeOut();//删除进度条 }); /** * 验证文件格式以及文件大小 */ uploader.on("error", function (type) { if (type == "F_EXCEED_SIZE") { alert("文件大小不能超过100M"); } else { alert("上传出错！请检查后重新上传！错误代码" + type); } }); return uploader; } function bbb(i) { $("#picker1").show(); uploader= aa(i); } </script>
    </span>

[20191007092417778.png]: /images/20210626/ad0e3b12ba3f48469be7c5a94ccd8d90.png

发表评论取消回复

表情：

评论列表（有 0 条评论，495人围观）

还没有评论，来说两句吧...

相关阅读

相关 SpringMVC 按Ctrl上传多个文件

JSP页面注意:必须加入multiple="multiple"属性 <form action="upload2.action" method="post" en

你的名字/ 2024年02月18日 19:18/ 0 赞/ 81 阅读

相关 WebUploader 上传文件的两种方式（手动上传，自动上传）

1 手动上传上传文件分为两步，第一步选择文件，第二步上传文件。 HTML代码： <input type='button' id='selectFile' v

喜欢ヅ旅行/ 2023年10月05日 15:14/ 0 赞/ 24 阅读

相关 springmvc 上传多个文件

/ 多个文件上传 50 @param files <input type="file" name="files"/><input type

矫情吗；*/ 2022年06月02日 05:08/ 0 赞/ 253 阅读

相关关于WebUploader多图上传的几个注意点

1，不少人用webuploader多图上传时，点击”暂停上传“，并没有效果。暂停上传按钮不好使，那就往下看吧。暂停上传有两个模式 1. 当前的上传继续，下个文件不开始上

向右看齐/ 2022年05月21日 00:11/ 0 赞/ 478 阅读

相关 TP5 webuploader 单页面多实例上传图片案例

在使用 webuploader上传文件过程中，如果同一个页面存在多个上传区域，可以参考本示例代码。 HTML 代码： 1 <!DOCTYPE html>

超、凢脫俗/ 2021年12月22日 15:34/ 0 赞/ 306 阅读

相关 WebUploader - 分片上传

在开发过程中遇到需要上传大文件的需求，但是大文件整个上传会导致服务器内存爆炸。分片上传的思路利用[`blob.slice()`][blob.slice]方法，根据指

朱雀/ 2021年07月05日 01:12/ 0 赞/ 651 阅读

相关 webuploader 同一页面两个上传按钮解决办法

实现方法上传`div`设置`class=”filePicker”`，添加方法`addWebuploadCurrent`（回调值`input`的`id`）； `htm

ゝ一纸荒年。/ 2021年06月26日 16:06/ 0 赞/ 942 阅读

相关 webuploader的一个页面多个上传按钮实例

![在这里插入图片描述][20191001224827571.png] 借鉴一位大佬的demo 附上他的github地址https://github.com/lishuqi

╰半夏微凉°/ 2021年06月26日 16:06/ 0 赞/ 832 阅读

相关 webuploader多个实例上传（按两个来）

![20191007092417778.png][] <script src="~/Scripts/jquery-1.9.1.min.js"></script>

﹏ヽ暗。殇╰゛Y/ 2021年06月26日 16:06/ 0 赞/ 496 阅读

相关同一个页面使用webuploader实现多实例多上传案例

项目上遇到一个需求，要实现一个页面有多个上传图片入口，我们使用的是`webuploader`上传组件；研究了一下终于弄好了这个功能，主要是动态获取上传按钮id和需要展现缩

男娘i/ 2021年06月26日 16:06/ 0 赞/ 426 阅读