源码地址:https://github.com/kartik-v/bootstrap-fileinput
核心文件:
bootstrap-fileinput/css/fileinput.min.css
bootstrap-fileinput/js/fileinput.min.js
bootstrap-fileinput/js/locales/zh.js
html:
<img id="IMG" class="img-circle" src="images/img.png" /> <!-- 图片预览 -->
<input id="Image" name="Image" class="form-control" type="file">
<input id="Image_url" name="ImageUrl" type="hidden" > <!-- 图片地址 -->
多选:
<input id="Image" name="Image" class="form-control" type="file" multiple>
js:
$('#Image').fileinput({
uploadUrl: '', //请求地址
//uploadAsync: true, //异步上传
showUpload: true, //是否显示上传按钮
maxFileSize : 200, //单位为kb,如果为0表示不限制文件大小
maxFileCount: 1, //同时上传的最大文件个数
enctype: 'multipart/form-data',
allowedPreviewTypes : [ 'image' ],
allowedFileExtensions : ["jpg", "png","gif"],
dropZoneTitle: "可拖拽图片文件到这里",
dropZoneClickTitle: "或者点击此区域添加图片",
dropZoneEnabled: false, //是否显示拖拽区域
showBrowse: false,
browseOnZoneClick: true,
browseLabel: '选择图片',
layoutTemplates: {
actionUpload: '', //文件上去除上传按钮
// actionDelete: '', //去除删除按钮
},
uploadExtraData:function(){ //向后台传递参数
//var data = $('#form').serialize(); //表单序列化传后台报错暂不知原因,直接传参可以
//return data;
var data = {
Id: $("#Id").val(),
Name: $("#Name").val(),
Sex: $("input[name=\"sex \"]:checked").val(),
}
return data;
},
}).on("filebatchselected", function(e, files) { //选择文件后处理事件(选择图片后转码64位存储)
var file = this.files[0];
// 创建一个FileReader对象
var oFReader = new FileReader();
// 读取File对象的数据
oFReader.readAsDataURL(file);
// 绑定load事件
oFReader.onload = function (oFREvent) {
cover = oFREvent.target.result;
console.log(oFREvent.target.result);
$("#Image_url").val(oFREvent.target.result)
}
//当FileReader对象通过readAsDataURL读取数据成功后,就会触发load事件。target中的result属性的值,就是该文件的base64数据
}).on("fileuploaded", function(event, data, previewId, index) { //异步上传返回结果处理
var result = data; //后台返回的json
$("#IMG").attr("src", result);
});
可以给按钮添加事件,上传图片同时向后台传递其他表单数据或参数:
$("#Image").fileinput("upload"); //文件上传