BootStrapFileinput的使⽤教程
bootstrap-fileinput是基于bootstrap的上传控件，此控件⽹上有很多例⼦。我照着例⼦做后发现请求⽆法提交到后台，反复测试后发现，不能禁⽌预览（showPreview要设置为true），禁⽌预览后fileuploaded则⽆法响应(实际情况是showPreview=false时, 即便是uploadAsync=true, 也是filebatchuploadsuccess响应返回结果。如果showPreview=true, uploadAsync=true, 才是fileuploaded响应返回结果)。
注意：
如果出现$("#xxxx").fileinput({}); 不⽣效的情况请将fileinput.js中最后⼏⾏注释掉：
/* $(document).ready(function () {
var $input = $('input.file[type=file]'), count = $input.attr('type') ? $input.length : 0;
if (count > 0) {
$input.fileinput();
}
jquery学习在线教程
}); */
<link rel="stylesheet" href="css/bootstrapCSS/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrapCSS/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/bootstrapCSS/fileinput.css" />
<div>
<input type="file" name="uploadfile" id="uploadfile" multiple class="file-loading" />
</div>
<script type="text/JavaScript" src="js/jQuery.min.js"></script>
<script type="text/javascript" src="js/bootstrap/fileinput.js"></script>
<script type="text/javascript" src="js/bootstrap/fileinput_locale_zh.js"></script>
<script type="text/javascript" src="js/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript">
$("#uploadfile").fileinput({
language: 'zh', //设置语⾔
uploadUrl: "127.0.0.1/testDemo/fileupload/upload.do", //上传的地址
allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的⽂件后缀
//uploadExtraData:{"id": 1, "fileName":'123.mp3'},
uploadAsync: true, //默认异步上传
showUpload: true, //是否显⽰上传按钮
showRemove : true, //显⽰移除按钮
showPreview : true, //是否显⽰预览
showCaption: false,//是否显⽰标题
browseClass: "btn btn-primary", //按钮样式
dropZoneEnabled: false,//是否显⽰拖拽区域
//minImageWidth: 50, //图⽚的最⼩宽度
//minImageHeight: 50,//图⽚的最⼩⾼度
//maxImageWidth: 1000,//图⽚的最⼤宽度
//maxImageHeight: 1000,//图⽚的最⼤⾼度
//maxFileSize: 0,//单位为kb，如果为0表⽰不限制⽂件⼤⼩
//minFileCount: 0,
maxFileCount: 10, //表⽰允许同时上传的最⼤⽂件个数
enctype: 'multipart/form-data',
validateInitialCount:true,
previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
msgFilesTooMany: "选择上传的⽂件数量({n}) 超过允许的最⼤数值{m}！",
});
//异步上传返回结果处理
$('#uploadfile').on('fileerror', function(event, data, msg) {
console.log(data.id);
console.log(data.index);
console.log(data.file);
console.ader);
console.log(data.files);
// get message
alert(msg);
});
//异步上传返回结果处理
$("#uploadfile").on("fileuploaded", function (event, data, previewId, index) {
console.log(data.id);
console.log(data.index);
console.log(data.file);
console.ader);
console.log(data.files);
var obj = sponse;
alert(JSON.stringify(data.success));
});
//同步上传错误处理
$('#uploadfile').on('filebatchuploaderror', function(event, data, msg) {
console.log(data.id);
console.log(data.index);
console.log(data.file);
console.ader);
console.log(data.files);
// get message
alert(msg);
});
/
/同步上传返回结果处理
$("#uploadfile").on("filebatchuploadsuccess", function (event, data, previewId, index) {
console.log(data.id);
console.log(data.index);
console.log(data.file);
console.ader);
console.log(data.files);
var obj = sponse;
alert(JSON.stringify(data.success));
});
//上传前
$('#uploadfile').on('filepreupload', function(event, data, previewId, index) {
var form = data.form, files = data.files, extra = a,
response = sponse, reader = ader;
console.log('File pre upload triggered');
});
</script>
经查资料得知，异步上传处理错误和返回结果要处理fileerror和fileuploaded⽅法；同步上传处理错误和返回结
果filebatchuploaderror和filebatchuploadsuccess⽅法
以上所述是⼩编给⼤家介绍的BootStrap Fileinput的使⽤教程，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。