WebUploader 同一页面中集成多实例，单图上传，多图上传，编辑回显，删除（包括逻辑删除，显示移除）

最新推荐文章于 2024-02-02 17:26:04 发布

VIP文章你才是程序员呢

最新推荐文章于 2024-02-02 17:26:04 发布

阅读量2.5w

点赞数 11

本文链接：https://blog.csdn.net/weixin_35890630/article/details/52805528

版权

介于大家的要求我把demo放到了github上，地址：https://github.com/lishuqi/WebUploaderDemo，

这个Demo是基于java的，框架使用Spring+SpringMVC+MyBatis+Maven实现的，数据库使用mysql(只有一张表)

fork的时候顺带star噢~~~

百度 WebUploader

1.最近项目中需要使用 WebUploader来做图片上传，主要功能：

同一页面中：

添加

a：实现身份证上传，（限制webuploader只能上传一个图片，删除）

b：为微信端和网页端提供封面图片，（限制webuploader只能上传一个图片，删除）

c：附件上传（可以实现多图上传，删除）

效果图：

编辑功能点：

a:图片的回显

b:删除上传

查看功能点：

a：回显

b：不能进行删除，上传等操作

代码实现

前台组件html：

                                          <div class="uploder-container">										      		
			                        <div  class="cxuploder">
			                            <div class="queueList">
			                                <div class="placeholder">
			                                    <div class="filePicker"></div>
			                                    <p>将照片拖到这里</p>
			                                </div>
			                            </div>
			                            
			                            <div class="statusBar" style="display:none;height:50px;" >
			                                <div class="btns">
			                                    <div  class="jxfilePicker"></div>	
			                                </div>
			                                <div class="info"></div>
			                            </div>
			                        </div>
			                    </div>

首先是多实例：

思路，在一个页面中实现多实例，那么页面会有多个div等组成的webuploader组件，他们的div格式等都是相同的。那么就可以循环初始化这些组件，核心代码如下：

//循环页面中每个上传域   
    	$('.uploder-container').each(function(index){//index为标识是页面中第几个webuploader组件
    		console.log(index);
    		// 添加的文件数量
            var fileCount = 0;
            // 添加的文件总大小
            var fileSize = 0;
    		var filePicker=$(this).find('.filePicker');//上传按钮实例
    		var queueList=$