最近做项目,发现实现多个文件上传比较烦,看同事用的都是webuploader等附件,还要去查看源码,来修改样式。想到了一种简单的方法,用原始的<input type="file"/>也能实现。实现方法就是浏览一个文件之后,监听他的change方法,然后将这个file的样式设置成为隐藏,接着追加了一个file控件
<form id="addFeedbackForm" method="post">
<div id="task-m-upload" class="task-m-upload-wrap">
<textarea class="task-m-textarea" id="content"></textarea>
<div class="task-upload-files oh"></div>
<div class="task-upload-btns pr oh">
<a class="task-attachments-btn">添加附件</a>
<input type="file" class="task-input-file" name="file_upload"/>
</div>
</div>
</form>
<script type="text/javascript">
//上传方法
$('#task-m-upload').on('change','.task-input-file',function(){
//时间戳
var timestamp = Date.parse(new Date());
var class_name = Common.getFileType($(this).val());
var file_name = Common.getFileName($(this).val());
var fileHtml = '<div class="task-upload-file '+class_name+'">'
+'<span class="task-file-name">'+file_name+'</span>'
+'<a data-tag="'+timestamp+'" class="task-file-del"></a>'
+'</div>'
$('.task-upload-files').append(fileHtml);
$(this).attr('data-tag',timestamp).hide();
$('.task-upload-btns').append('<input type="file" class="task-input-file" name="file_upload"/>');
});
//绑定删除事件
$('.task-upload-files').on('click','.task-file-del',function(){
var data_tag = $(this).attr('data-tag');
$(this).parent().remove();
$('#hidden-files').find('[data-tag='+data_tag+']').remove();
});
$("#addFeedbackForm").ajaxSubmit({
url:ctxpath+"/web//saveFeedback",
cache:false,
dataType:'json',
data:{
'content' : $('#fcontent').val()
},
success: function(res) {
$('.task-upload-files').empty();
$('.task-input-file').each(function(i,val){
$(this).remove();
});
alert(result.msg);
}else{
alert(result.msg);
}
} ,
error:function(){
alert("系统错误,请联系系统管理员!");
}
});
//用这种方式就能提交文件了到后端了
</script>
这里面省略了样式的代码,这里面要导入jquery-xxx-min.js和jquery.form.js