Webuploader结合bootstrap模态框实现文件上传（二）

一、导入js，css文件

<link rel="stylesheet" type="text/css" href="css/webuploader.css">
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/webuploader.min.js"></script>

二、解决webuploader在bootstrap的模态框里无法点击选择文件的bug

    <!--实现webuploaer在bootstrap的模态框里点击选择文件无效问题-->
    <style>  
        #picker div:nth-child(2){width:100%!important;height:100%!important;}  
    </style>

三、jquery操作模态框

<script type="text/javascript">
        //打开模态框
        function chgInfo(obj){
            var id = $(obj).parent().parent().attr('id');
            var tname=$(obj).parent().parent().children().eq(0).html();
            var time=$(obj).parent().parent().children().eq(1).html();
            var tuser=$(obj).parent().parent().children().eq(2).html();
            var tnum=$(obj).parent().parent().children().eq(3).html();
            //向模态框传值
            $("#id").val(id);
            $("#tname").val(tname);
            $("#time").val(time);
            $("#tUser").val(tuser);
            $("#tnum").val(tnum);
            //打开
            $("#myModal").modal('show');
        }

        $(function(){

            var $list=$("#imgList");
            var $btn=$("#addThing");
            //初始化uploader
            var uploader = WebUploader.create({

                // swf文件路径
                swf : 'js/Uploader.swf',

                // 文件接收服务端。
                server : 'addThing',

                //选择上传方式
                sendAsBinary : false,

                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                pick : '#picker',

                // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
                resize : false,

                chunked: true, //是否要分片处理大文件上传
                chunkSize:2*1024*1024, //分片上传，每片2M，默认是5M

                accept : {
                    title: 'Images',
                    extensions: 'gif,jpg,jpeg,bmp,png',
                    mimeTypes: 'image/*'    
                }
            });

            // 当有文件添加进来的时候
            uploader.on( 'fileQueued', function( file ) {
                var $li = $(
                        '<div id="' + file.id + '" class="file-item thumbnail">'+'<img width="100%" 

height="100%">'+'</div>'
                        ),
                    $img = $li.find('img');


                // $list为容器jQuery实例
                $list.append( $li );

                // 创建缩略图
                // 如果为非图片文件，可以不用调用此方法。
                // thumbnailWidth x thumbnailHeight 为 100 x 100
                uploader.makeThumb( file, function( error, src ) {
                    if ( error ) {
                        $img.replaceWith('<span>不能预览</span>');
                        return;
                    }

                    $img.attr( 'src', src );
                }, 100, 80 );
            });

            //文件上传前动态传参
            uploader.on('uploadBeforeSend',function(block,data){
                var file=block.file;
                data.id=$("#id").val();
                data.tname=$("#tname").val();
                data.tuser=$("#tUser").val();
                data.time=$("#time").val();
                data.tnum=$("#tnum").val();
            });
            //上传文件
            $btn.on('click', function () {
                if ($(this).hasClass('disabled')) {
                    return false;
                }
                uploader.upload();
                $("#myModal").modal('hide');
            });

            // 文件上传成功，失败处理
            uploader.on( 'uploadSuccess', function( file ) {
                alert("添加成功！");
                //$( '#'+file.id ).find('p.state').text('已上传');
            });

            uploader.on( 'uploadError', function( file ) {
                alert("添加失败！")
                //$( '#'+file.id ).find('p.state').text('上传出错');
            }); 

            uploader.on( 'uploadComplete', function( file ) {
                //$( '#'+file.id ).find('.progress').fadeOut();
                $('#'+file.id).remove();
            });
        });
    </script>

四、页面body主体

<div id="" align="center">
    <table class="table" id="t1">
        <tr id=0>
            <td>物品名</td>
            <td>捐赠时间</td>
            <td>捐赠人</td>
            <td>捐赠人手机</td>
            <td>
                操作
            </td>
        </tr>

        <tr id=1>
            <td>vivo手机</td>
            <td>2018-04-26</td>
            <td>刘项成</td>
            <td>15078382454</td>
            <td>
                <button onclick="chgInfo(this)">修改物品信息</button>
            </td>
        </tr>

        <tr id=2>
            <td>高数（一）</td>
            <td>2018-04-26</td>
            <td>张涛</td>
            <td>13838465263</td>
            <td>
                <button onclick="chgInfo(this)">修改物品信息</button>
            </td>
        </tr>

        <tr id=3>
            <td>毛巾</td>
            <td>2018-04-16</td>
            <td>李凯</td>
            <td>15634658972</td>
            <td>
                <button onclick="chgInfo(this)">修改物品信息</button>
            </td>
        </tr>
    </table>
</div>

五、模态框部分代码

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    添加物品信息
                </h4>
            </div>
            <div class="modal-body">

                <!--隐藏id-->
                    <input type="hidden" name="id" id="id" value="" />
                    <table border="0" cellspacing="0" cellpadding="0" align="center">
                        <tr>
                            <td>输入物品名：</td>
                            <td>
                                <input type="text" name="tname" id="tname" value="" />
                            </td>
                        </tr>

                        <tr>
                            <td>输入捐赠时间：</td>
                            <td>
                                <input type="text" name="time" id="time" value="" />
                            </td>
                        </tr>

                        <tr>
                            <td>输入捐赠人：</td>
                            <td>
                                <input type="text" name="tUser" id="tUser" value="" />
                            </td>
                        </tr>

                        <tr>
                            <td>输入捐赠人手机：</td>
                            <td>
                                <input type="text" name="tnum" id="tnum" value="" />
                            </td>
                        </tr>

                        <tr>
                            <td>
                                <div id="picker">选择文件</div>
                            </td>
                            <td>
                                <div id="imgList" class="uploaderList"></div>
                            </td>
                        </tr>
                    </table>
            </div>
            <div class="modal-footer">

                <button type="button" class="btn btn-default" data-dismiss="modal">
                    关闭
                </button>

                <button type="button" class="btn btn-primary" id="addThing">
                    确认添加
                </button>

            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>