使用js动态加载上传文件

使用js动态加载每行都要上传文件首先导入支持包<link rel="stylesheet" type="text/css" href="${ctxStatic}/webuploader-0.1.5/webuploader.css">

<script type="text/javascript" src="${ctxStatic}/webuploader-0.1.5/webuploader.js"></script>

然后利用js的字符串拼接

<tr>
    <td>
        <div class="form-group">
            <input type="text" placeholder="" class="form-control"
                   name="contentLeave">
        </div>
    </td>
    <td>
        <div class="form-group">
            <input type="text" placeholder="" class="form-control"
                   name="nameLeave">
        </div>
    </td>
    <td>
        <div class="form-group">
            <input type="text" placeholder="" class="form-control"
                   name="sexLeave">
        </div>
    </td>
    <td>
        <div class="form-group">
            <input type="text" placeholder="" class="form-control"
                   name="dutiesLeave">
        </div>
    </td>
    <td>
        <div class="form-group">
            <input type="text" placeholder="" class="form-control"
                   name="phoneLeave">
        </div>
    </td>
    <td>
        <div class="form-group">
            <input type="text" placeholder="" class="form-control"
                   name="">
        </div>
    </td>
    <td >
        <div class="form-group control-show">
            <div id='attach_url"+i+"uploader' class='wu-example'>
                <div id='attach_url"+i+"thelist' class='uploader-list'></div>
                <div class='btns'>
                <sys:webuploader input="attach_url0"
                                 selectMultiple="false"></sys:webuploader>
                <p style="color: red">上传文件类型只能是 .xlsx .xls .doc .docx .pdf .png .jpg .bmp .jpeg .gif结尾的,否则会存储失败!</p>
                </div>
        </div>
    </td>
    <td>
        <div class="form-group">
            <button type="button" class="btn btn-outline btn-danger"
                    οnclick="delLeave(this);">删除
            </button>
        </div>
    </td>
</tr>

<label>
    <a class="btn btn-sm btn-add" οnclick="addLeave();">
        <i class="fa fa-plus"></i> 增加
    </a>
</label>
在有表格一行的基础上实现动态添加绑定addleave事件，和删除delLeaves事件
if(${leave.size()>1}){
        var i=${leave.size()};
    }else {
        var i=1;
    }
    function addLeave() {
       i++;
        var html = "<tr>" +
                "<td><div class='form-group'><input type='text' placeholder='' class='form-control' name='contentLeave'></div></td>" +
                "<td><div class='form-group'><input type='text' placeholder='' class='form-control' name='nameLeave'></div></td>" +
                "<td><div class='form-group'><input type='text' placeholder='' class='form-control' name='sexLeave'></div></td>" +
                "<td><div class='form-group'><input type='text' placeholder='' class='form-control' name='dutiesLeave'></div></td>" +
                "<td><div class='form-group'><input type='text' placeholder='' class='form-control' name='phoneLeave'></div></td>" +
                "<td><div class='form-group'><input type='text' placeholder='' class='form-control' name=''></div></td>" +
                "<td>" +
                "<div id='attach_url"+i+"uploader' class='wu-example'>"+
                "<div id='attach_url"+i+"thelist' class='uploader-list'></div>"+
                 "<div class='btns'>"+
                "<div id='attach_url"+i+"picker'  style='float: left'>"+
                   "选择文件"+
                 "</div>"+
                  "<input type='button' id='attach_url"+i+"reset' class='btn btn-default' value='清除文件' style='float: left;margin-top: 3px;margin-left: 3px;'/>"+
                   "<p style='color: red'>上传文件类型只能是 .xlsx .xls .doc .docx .pdf .png .jpg .bmp .jpeg .gif结尾的,否则会存储失败!</p>"+
                   "<input type='hidden' name='attach_url"+i+"namevalue' id='attach_url"+i+"namevalue' />"+
                  "<input type='hidden' name='attach_url"+i+"urlvalue' id='attach_url"+i+"urlvalue'/>"+
                  "</div>" +
                  "</div>" +
                "</td>" +
                "<td class='text-navy'><div class='form-group'><button type='button' class='btn btn-outline btn-danger' οnclick='delLeave(this);'>删除</button></div></td>" +
                "</tr>";
        $("#LeaveTbody").append(html);
//        这两段代码一定要放在表格添加的下面,不然样式显示不出来
        var attach_url ="attach_url"+i;
        attachsel(attach_url);
    }

    function delLeave(e) {
        $(e).parent().parent().parent().remove();
    }
上面的注释非常的重要，位置不能调换
function attachsel(id){

        var uploader = WebUploader.create({

            // swf文件路径
            swf: '${ctxStatic}/webuploader-0.1.5/Uploader.swf',

            // 文件接收服务端。
            server: '${ctx}/fileuploadservlet',

            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: {
                id: '#'+id+'picker',
                name:"file",  //这个地方 name 没什么用，虽然打开调试器，input的名字确实改过来了。但是提交到后台取不到文件。如果想自定义file的name属性，还是要和fileVal 配合使用。
                label: '选择文件',
                multiple:false           //默认为true，true表示可以多选文件，HTML5的属性
            },
            fileNumLimit:1,
            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: false,
            auto:true
        });
        // 当有文件被添加进队列的时候
        uploader.on( 'fileQueued', function( file ) {
            $("#"+id+"thelist").append( '<div id="'+id+ file.id + '" class="item">' +
                    '<h4 class="info">' + file.name + '</h4>' +
                    '<p class="state">等待上传...</p>' +
                    '</div>' );
        });
        // 文件上传过程中创建进度条实时显示。
        uploader.on( 'uploadProgress', function( file, percentage ) {
            var $li = $( '#'+id+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 ,response) {
            <%--<c:if test="${!selectMultiple}">--%>
            <%--$("#${input}urlvalue").val(response.src);--%>
            <%--$("#${input}namevalue").val(response.name);--%>
            <%--</c:if>--%>
            var url=$("#"+id+"urlvalue").val();
            var name=$("#"+id+"namevalue").val();
            <%--<c:if test="${selectMultiple}">--%>
            $("#"+id+"urlvalue").val(url+response.src);
            $("#"+id+"namevalue").val(name+response.name);
            <%--</c:if>--%>
            $( '#'+id+file.id ).find('p.state').text('已上传');
        });

        uploader.on( 'uploadError', function( file ) {
            $( '#'+id+file.id ).find('p.state').text('上传出错');
        });

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

        $("#"+id+"reset").on("click", function() {
            $("#"+id+"urlvalue").val("");
            $("#"+id+"namevalue").val("");
            // 移除所有缩略图并将上传文件移出上传序列
            for (var i = 0; i < uploader.getFiles().length; i++) {
                // 将图片从上传序列移除
                uploader.removeFile(uploader.getFiles()[i]);
                //uploader.removeFile(uploader.getFiles()[i], true);
                //delete uploader.getFiles()[i];
                // 将图片从缩略图容器移除
                var $li = $('#'+id + uploader.getFiles()[i].id);
                $li.off().remove();
            }
//    setState('pedding');

            // 重置文件总个数和总大小
            fileCount = 0;
            fileSize = 0;
            // 重置uploader，目前只重置了文件队列
            uploader.reset();
            // 更新状态等，重新计算文件总个数和总大小
//    updateStatus();
        })

    }
本来可以使用封装好的方法，但是因为是动态加载，没办法所以就不用封装好的，将js代码写在jsp上，这里表格字符串拼接非常重要，也不能少标签，如果遇到选择文件的按钮
的样式没有出来，要么是少标签，要么是js写的不对，要么就是调用的次序不对。