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

男娘i 2021-06-26 16:06 425阅读 0赞

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

## 1：首先引入所需要的`css`和`js` ##

<link rel="stylesheet" type="text/css" href="webuploader/webuploader.css">
    <link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.css">
    <script type="text/javascript" src="jQuery/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="webuploader/webuploader.js"></script>

## 2：`html`代码： ##

<div class="container">
    	<div class="cerDiv">
    		<p class="cer">
    			身份证件：
    		</p>
    		<div id="identity">
    		</div>
    		<div class="subBut">
    			<span onclick="webUpload('identity')" class="uploadImg">上传图片</span>
    		</div>
    	</div>
    	<div class="cerDiv">
    		<p class="cer">
    			用户头像：
    		</p>
    		<div id="logo">
    		</div>
    		<div class="subBut">
    			<span onclick="webUpload('logo')" class="uploadImg">上传图片</span>
    		</div>
    	</div>
    	<div class="cerDiv">
    		<p class="cer">
    			学历证书：
    		</p>
    		<div id="education">
    		</div>
    		<div class="subBut">
    			<span onclick="webUpload('education')" class="uploadImg">上传图片</span>
    		</div>
    	</div>
    </div>

3：js代码：

<script type="text/javascript">
            /* --上传组件开始-- */
            var $img;
            var uploader = WebUploader.create({ 
                // 选完文件后，是否自动上传。
                auto: true,
                // swf文件路径
                swf: '/webuploader/Uploader.swf',
                server: 'http://public/upload?type=images',
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                pick: '.uploadImg',
                duplicate :true,//让图片可重复上传
                // 只允许选择图片文件。
                accept: { 
                    title: 'Images',
                    extensions: 'gif,jpg,jpeg,bmp,png',
                    mimeTypes: 'image/*'
                },
                resize:false
            });
     
            // 文件上传成功，给item添加成功class, 用样式标记上传成功。
            uploader.on('fileQueued', function (file) { 
     
                var listId = $list.getAttribute("id");
     
                $("#"+listId).append( '<div id="' + file.id + '" class="item" style="position:relative;float:left;">' +
                '<div class="img" style="height:100px;width:100%;padding:0px;">[外链图片转存失败(img-MUTxpBe1-1562080502333)(https://mp.csdn.net/mdeditor/94496177)]</div>' +
                '<h4 class="info">' + file.name + '</h4>' + '<input id="imageId" type="hidden" name="imageId" value="' +  file.id  + '" />' +
                '<div class="file-panel" ><a οnclick="remove(this);"><i class="fa fa-trash" style=""></i></a></div>'+
                '</div>' );
     
                $img = $("#"+ file.id).find('img');
     
                // 创建缩略图 如果为非图片文件，可以不用调用此方法 100（宽） x 100（高）  
                uploader.makeThumb( file, function( error, src ) { 
                    console.log(src);
                    if ( error ) { 
                        $img.replaceWith('<span>不能预览</span>');
                        return;
                    }
                    $img.attr( 'src', src );
                }, 100, 100 );
     
                $(".webUpload").val(file.name);
            });
     
            // 文件上传失败，显示上传出错。
            uploader.on('uploadError', function (file) { 
                alert('上传失败');
            });
     
            // 完成上传完了，成功或者失败，先删除进度条。
            uploader.on('uploadComplete', function (file) { 
                console.log(file);
    //            $(".webUpload").removeClass("webUpload");
            });
            var $list;
            function webUpload(id) { 
                $list = document.getElementById(id);
                document.getElementById(id).setAttribute("class","webUpload");
            }
     
            function remove(ele){ 
                var imgEle = $(ele).parent().parent().find("img");
                var imgId = $(imgEle).attr("data-id");
                // 移除缩略图并将上传文件移出上传序列
                var $li = $('#' + imgId);
                $li.off().remove();
                // 重置uploader，目前只重置了文件队列
                uploader.reset();
     
            }
     
        </script>

发表评论取消回复

表情：

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

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

相关阅读

相关使用webuploader上传文件

准备工作：添加需要的文件和页面 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_

末蓝、/ 2022年10月13日 12:52/ 0 赞/ 273 阅读

相关使用plupload.js实现单页面多实例图片上传

工作中经常会遇到单页面多个上传模块的功能,比如身份证正反面。使用plupload.js可以非常简单的实现这个功能。 github下载地址 https://github.co

怼烎@/ 2022年06月05日 11:22/ 0 赞/ 263 阅读

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

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

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

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

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

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

相关 WebUploader - 分片上传

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

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

相关 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 赞/ 494 阅读

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

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

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

相关文件上传组件WebUploader基本使用

文件上传组件WebUploader基本使用一、缘起公司网站社区有图片上传功能，由于网站已经有些年头了，当时上传的时候根据客户端支不支持flash而分为两种逻辑。如果支...

红太狼/ 2020年06月06日 17:57/ 0 赞/ 931 阅读

相关文件上传组件WebUploader基本使用

其实第三方的js插件一般用法都差不多，基本都是导入资源文件、根据配置初始化插件对象、使用对象的方法或者监听事件完成特定的功能，webuploader也差不多。

朱雀/ 2020年05月10日 16:36/ 0 赞/ 1046 阅读