【Bootstrap】 fileinput:文件or图片上传

时间:2022-01-19 03:39:26

这个是在CSDN一名前辈的微博上学习到的。网址在此:http://blog.csdn.net/Java_chaozi/article/details/53311483
我就补充几个参数的含义,然后自己加深下理解。

【Bootstrap】 fileinput:文件or图片上传

bootsrap fileinput 文件地址下载:https://github.com/kartik-v/bootstrap-fileinput/

<link rel="stylesheet" href="style/css/approve.css">

<div class="form-group fileContainer">
<label for="myFile" class="col-xs-2 col-lg-1 control-label">上传附件</label>
<div class="col-xs-10 col-lg-5">
<input id="myFile" type="file" multiple name="myFile" class="fileloading">
</div>
<input type="hidden" name="user.logo" id="logo">
</div>

<script src="style/js/jquery-1.10.2.min.js"></script>
<script src="style/js/bootstrap.min.js"></script>
<script src="style/js/bootstrap-datetimepicker.min.js"></script>
<script src="style/js/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="style/js/fileinput.js"></script>
<script src="style/js/fileinput_zh.js"></script>
function uploadFile() { // upload file
$("#myFile").fileinput({
language : 'zh', //设置语言
uploadUrl : "${ctx}/admin/uplode/photo", //上传地址
autoReplace : true,
maxFileCount : 1, //表示允许同时上传的最大文件个数
allowedFileExtensions : [ "jpg", "png", "gif","pdf" ],//可接收的文件后缀
browseClass : "btn btn-primary", //按钮样式
dropZoneEnabled: false,//是否显示拖拽区域
showPreview : true, //是否显示预览
enctype: 'multipart/form-data', //上传的文件格式
previewFileIcon : "<i class='glyphicon glyphicon-king'></i>"
}).on("fileuploaded", function(e, data) { //异步上传返回结果处理
console.log(data);
var res = data.response;
alert(res.success);
$("#logo").attr("value", res.success);
}).on('filepreupload', function(event, data, previewId, index) { //上传前
var form = data.form;
var files = data.files;
var extra = data.extra;
var response = data.response;
var reader = data.reader;
});
}