webuploader百度图片上传

webuploader百度图片上传

第一步 引入 js

<link rel="stylesheet" href="/webuploader/css/webuploader.css" />
<link rel="stylesheet" href="/webuploader/css/webuploader-demo.css" />

    <script type="text/javascript">
        // 添加全局站点信息
        var BASE_URL = '/webuploader/js/webuploader';
    </script>

<script src="/webuploader/js/webuploader/webuploader.min.js"></script>
<script src="/webuploader/js/demo/webuploader-demo.js"></script>

注意   ： 
	<script type="text/javascript">
        // 添加全局站点信息
        var BASE_URL = '/webuploader/js/webuploader';
    </script>

第二步 在html页面加入 div

<div class=" am-u-sm-12 am-form-group ">
								<label for="" class="am-u-sm-2 am-form-label label_right" style="font-weight: 100;">图片 </label>
								<div class="am-u-sm-3 am-u-end ">
									<div class="ibox float-e-margins" style="">
					                   
					                    <div class="ibox-content">
					                        <div class="page-container">
					                            <!-- <p>您可以尝试文件拖拽，使用QQ截屏工具，然后激活窗口后粘贴，或者点击添加图片按钮，来体验此demo.</p> -->
					                            <div id="uploader" class="wu-example uploader-list-container">
					                                <div class="queueList">
					                                    <div id="dndArea" class="placeholder">
					                                        <div id="filePicker"></div>
					                                        <p>或将照片拖到这里，单次最多可选10张</p>
					                                    </div>
					                                </div>
					                                <div class="statusBar" style="display:none;">
					                                    <div class="progress">
					                                        <span class="text">0%</span>
					                                        <span class="percentage"></span>
					                                    </div>
					                                    <div class="info"></div>
					                                    <div class="btns">
					                                        <div id="filePicker2"></div>
					                                        <div class="uploadBtn">开始上传</div>
					                                    </div>
					                                </div>
					                            </div>
					                        </div>
					                    </div>
					                    
					                </div>
								</div>
							</div>

第三步 值的获取

var list=new Array();//上传之后的图片路径 存储在这里
 //上传图片
var wuploader;
var id="";//一定要加上 不然报错    传入准确的id时  是修改页面
$(document).ready(function() {     
    // 初始化上传插件
   

});

第四步 引入的js说明
```javascript
<script src="/webuploader/js/demo/webuploader-demo.js"></script>

为核心的js 

注意：
1：

2：如下图
uploadSuccess 方法为文件上传成功就执行的方法
list.push(res); 就是把返回的路径添加到list集合

3.如果图片选中，但是没有上传是，就点击了确定按钮，需要加入判断，有图片时，必须先点击上传再 确定

if($(".imgWrap").children("img").length>0 && list.length==0){
			layer.msg('请先点击开始上传图片！');
			return;
}

4. uploader.on(‘ready’, function() {} 方法就是页面加载时运行的 ，用于在修改页面赋值
   

5.修改页面运行的是 editFile()方法 可以按照自己的需求去修改