webuploader 一个页面放置多个上传按钮

[ 2020-12-04 16:15:55 | 作者: admin ]
字号: | |
p.s. js脚本中 index 这个索引值很有用,多个上传的图片数组,需要按这个索引值来命名和保存。

WebUploader 文档部分 http://fex.baidu.com/webuploader/document.html
WebUploader API http://fex.baidu.com/webuploader/doc/index.html


html按钮代码
<div class="uploaderBtnBox">
         <!--用来存放item-->
         <div id="fileList1" class="uploader-list"></div>
         <div class="filePicker">选择图片</div>
</div>
<div class="imgBox"> </div>



js处理部分
$('.filePicker').each(function(index,el){
               console.log(index);
             var uploader= WebUploader.create({
  
                     // 选完文件后,是否自动上传。
                     auto: true,
  
                     // swf文件路径
                     swf: './js/webuploader-0.1.5/Uploader.swf',
  
                     // 文件接收服务端。
                     server: 'fileupload.php',
  
                     // 选择文件的按钮。可选。
                     // 内部根据当前运行是创建,可能是input元素,也可能是flash.
                     pick: el,
  
  
                     // 只允许选择图片文件。
                     accept: {
                     title: 'Images',
                     extensions: 'gif,jpg,jpeg,bmp,png',
                     mimeTypes: 'image/jpg,image/jpeg,image/png'
                     }
               });

                //执行删除方法
                $(el).parents('.uploaderBtnBox').siblings('.imgBox').on("click", ".cp_img_del", function ()
                {
                     $(el).removeClass( 'element-invisible');
                });  


                //上传成功后执行
               uploader.on( 'uploadSuccess', function(file,msg) {
                     console.log(index+'ok');
                     $(el).parents('.uploaderBtnBox').siblings('.imgBox').html("<img src='"+msg._raw+"' /><a class='cp_img_del' >删除</a>");
               });

                //文件上传失败,显示上传出错。
                uploader.on( 'uploadError', function( file ) {
                     var $li = $( '#'+file.id ),
                     $error = $li.find('div.error');
                     // 避免重复创建
                     if ( !$error.length ) {
                     $error = $('<div class="error"></div>').appendTo( $li );
                     }
                     $error.html('<font color="red">上传失败</font>');
                });

       });



                //外部删除方法2
                /*
                function deleteFile(obj) {
                     $(obj).parent().remove();
                } */
[最后修改由 admin, 于 2020-12-04 16:31:19]
评论Feed 评论Feed: http://blog.xg98.com/feed.asp?q=comment&id=2735

这篇日志没有评论。

此日志不可发表评论。