最近由于项目的需要自己写了一个简易的单文件上传插件,并整合了volidate插件可以对数据进行过滤。
首先贴出html的源码部分(基于bootstrap3 ui):
##页面html代码
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">文档上传 Demo</h3>
</div>
<div class="box-body">
<form id="form" enctype="multipart/form-data" method="post">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<input type="text" class="form-control" name="example" placeholder="请输入文字" style="background-color: transparent;">
</div>
<label>文件1上传</label>
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="上传文档1" name="file1-volidate" style="background-color: transparent;" readOnly="readOnly">
<input type="file" name="file1" class="hide file-upload">
<span class="input-group-btn">
<button type="button" class="btn btn-primary file-upload-button">文件1上传</button>
</span>
</div>
</div>
<label>文件2上传</label>
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="上传文档2" name="file2-volidate" style="background-color: transparent;" readOnly="readOnly">
<input type="file" name="file2" class="hide file-upload">
<span class="input-group-btn">
<button type="button" class="btn btn-primary file-upload-button">文件1上传</button>
</span>
</div>
</div>
<div class="box-footer">
<button type="submit" class="btn btn-primary">提交</button>
</div>
</div>
</div>
</form>
</div>
</div>
##js源码
接下来是js源码部分:
filesUpload.init($("#form"));//传入需要验证的dom,在此之前引入filesUpload.js文件
$('#form').formValidation({
framework: 'bootstrap',
message: '信息不能为空',
icon: {
// valid: 'glyphicon glyphicon-ok',
// invalid: 'glyphicon glyphicon-remove',
// validating: 'glyphicon glyphicon-refresh'
},
fields: {
example: {
validators: {
notEmpty: {
message: '文字不能为空'
}
}
},
'file1-volidate': {
validators: {
callback: {
message: '文件不能为空',
callback: function (value, validator, $field) {
return value != "";
}
}
}
},
"file2-volidate": {
validators: {
callback: {
message: '文件不能为空',
callback: function (value, validator, $field) {
return value != "";
}
}
}
},
}
});
//ajaxForm是jQueryFormAjax插件的方法需要引入[jquery.form.min.js](https://cdn.jsdelivr.net/jquery.form/4.0.1/jquery.form.min.js)
$('#form').ajaxForm({
url:'upload',
dataType:'json',
success:function (data) {
console.log(data);
}
});
filesUpload.js文件源码
##插件代码部分
var filesUpload = {
init:function(volidate){
if(volidate==""){
$.each($('.file-upload'), function(index, value) {
filesUpload.loadBind(value);
});
}else{
$.each($('.file-upload'), function(index, value) {
filesUpload.loadBind(value,volidate);
});
}
},
loadBind:function (obj,volidate) {
let text = $($(obj).parent().children('input[type="text"]')[0]);
text.click(function(){
$(obj).trigger('click');
});
//绑定上传按钮
let button = $($(obj).parent().children().find('.file-upload-button')[0]);
button.click(function(){
$(obj).trigger('click');
});
if(volidate==""){
$(obj).on('change',function(){
//绑定上传样式
let pos =$(this).val().lastIndexOf("\\");
let fileName = $(this).val().substring(pos+1);
text.val(fileName);
text.trigger('click');
});
}else{
$(obj).on('change',function(){
//绑定上传样式
let pos =$(this).val().lastIndexOf("\\");
let fileName = $(this).val().substring(pos+1);
text.val(fileName);
text.trigger('click');
$(volidate).data('formValidation').resetForm();
$(volidate).formValidation('validate');
});
}
}
};