使用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"
onclick="delLeave(this);">删除
</button>
</div>
</td>
</tr>

<label>
<a class="btn btn-sm btn-add" onclick="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' onclick='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(
4000
"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写的不对，要么就是调用的次序不对。