张浩博客-webUpload文件上传处理及模态框的兼容

# 序言
最近后台需要做一个模态框上传文件，具体效果如下图：
![批量上传](/upload/picture/20190517/efb70d405b7618ee101bb4931fdeed8c.png)
我没有使用bootstrap的样式，所以父级一开始是'display:none'，但是当父级block的时候发现webupload并未渲染，我之前写过一篇关于锚链接导致的这个问题，同理。
# 文件上传
webupload文件上传比较简单，所以我不缀述，可看代码注释
```html
<div id="uploader" class="wu-example">
 
     <div id="thelist" class="uploader-list"></div>
     <div class="btns">
         <div id="picker">选择文件</div>
     </div>
 </div>
 ```
```js
<script>
     var uploader;
     function create(){
         uploader = WebUploader.create({

//是否自动上传，如果为false，则在之前的html代码中需要再设置一个button来进行上传
             auto: true,
             // swf文件路径（根据你自己的工程目录进行设置）
             swf: '/static/webuploader/Uploader.swf',
             // 文件接收服务端（路由）
             //服务器主要负责接受图片并给定唯一id，最后转存到其他目录
             server: "{:U('File/upload_web',array('session_id'=>session_id()))}",
             // 选择文件的按钮。可选。
             // 内部根据当前运行是创建，可能是input元素，也可能是flash.
             pick: {
                 id: '#picker', // 按钮元素
                 multiple: false // 是否支持文件多选，false表示只能选一个
             },

// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
             resize: false,
             //允许上传的文件总数量为1
             fileNumLimit: 1,
             // 只允许选择excel文件。
             accept: {
                 title: 'Excel',
                 extensions: 'xls,xlsx',
                 //如果是图片这里要注意！！！！
                 //此处一定要写得详细，如果使用'image/*'，chrome浏览器会出现打开资源管理器特别慢的bug！！！！！
                 mimeTypes:'application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
             }
         });
         $list=$('#thelist');
         // 当有文件被添加进队列的时候
         uploader.on( 'fileQueued', function( file ) {
             $list.html( '<div id="' + file.id + '" class="item">' +
                     '<h4 class="info">' + file.name + '</h4>' +
                     '<p class="state">等待上传...</p>' +
                     '</div>' );
         });
         // 文件上传过程中创建进度条实时显示。
         uploader.on( 'uploadProgress', function( file, percentage ) {
             var $li = $( '#'+file.id ),
                     $percent = $li.find('.progress .progress-bar');

// 避免重复创建
             if ( !$percent.length ) {
                 $percent = $('<div class="progress progress-striped active">' +
                         '<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 + '%' );
         });
         uploader.on( 'uploadSuccess', function( file ) {
             $( '#'+file.id ).find('p.state').text('已上传');
         });

uploader.on( 'uploadError', function( file ) {
             $( '#'+file.id ).find('p.state').text('上传出错');
         });
         uploader.on("uploadAccept", function(file, data) {
             if (data.status == "0") {
                 // 通过return false来告诉组件，此文件上传有错。

return false;
             }
             //成功，则将file的id保存
             console.log(data);
             $('input[name="eid"]').val(data.id);
         });
         // 文件上传失败，显示上传出错
         uploader.on('uploadError', function(file,reason) {
             var $img_info = $('<span class="info pull-left">' + file.name + '<p class="state"></p>' + '</span>');
             $list.find('p.state').text('上传出错').css({
                 color: 'red'
             });
             //2秒之后提示信息消失
             setTimeout(function() {
                 $img_info.remove();
             }, 2000);
         });

// 完成上传
         uploader.on('uploadComplete', function(file) {
             $('#' + file.id).find('.progress').fadeOut();
             //重置uploader，令其可以继续上传logo
             uploader.reset();
         });
     }
     function destroy(){
         uploader.destroy();
         $list=$('#thelist');
         $('input[name="eid"]').val();
         $list.html('')
     }

</script>

$('.daoru-btn').click(function (event) {
  $('#myModal').show();
  //模态框显示的时候创建
    create();
//            event.stopPropagation()
})
$('.motai-close').click(function(){
    destroy();
    $('#myModal').hide();
})
```
```php
//服务端返回数据
 $return  = array('status' => 1, 'info' => '上传成功', 'data' => '','id'=>'');
```
# 解决办法
## 一、bootstrap的模态框
```js
$("#myModal").on("shown.bs.modal",function(){
		create();
	}
```
## 二、自写模态框样式
```js
$('.daoru-btn').click(function (event) {
  $('#myModal').show();
  //模态框显示的时候创建
    create();
//            event.stopPropagation()
})
```

# 总结
总的来说wenUpload还算是比较好的上传插件，文件上传和图片上传也用起来很舒服，当模态框和这些并用的时候，会出现同时渲染先后顺序的问题，需要将插件放在模态框之后渲染，不然会出现按钮无反应或者无限变大等奇怪问题。

> 欢迎关注我的博客 [www.zhanghao520.com](http://www.zhanghao520.com
> "www.zhanghao520.com")，更多技术问题一起研究！

未经允许不得转载：张浩博客 » webUpload文件上传处理及模态框的兼容

webUpload文件上传处理及模态框的兼容

相关推荐

评论 (3)

评论前必须登录！