源码以及API地址：
bootstrap-fileinput源码：https://github.com/kartik-v/bootstrap-fileinput
bootstrap-fileinput在线API：http://plugins.krajee.com/file-input
bootstrap-fileinput Demo展示：http://plugins.krajee.com/file-basic-usage-demo
使用：
前端html
引用文件<link href="/statics/css/bootstrap.min.css" rel="stylesheet">
<script src="/statics/plugins/bootstrap-fileinput/js/fileinput.js"></script> <!--主功能js-->
<script src="/statics/plugins/bootstrap-fileinput/js/plugins/canvas-to-blob.js"></script> <!--支持托拽-->
<script src="/statics/plugins/bootstrap-fileinput/js/fileinput_locale_zh.js"></script> <!--支持中文-->
<input id="file_upload" name="filename" type="file" multiple class="file-loading"> <!--文件上传区域功能实现-->
<div id="info-msgs" class="col-md-12" style="margin-top: 2%;color: limegreen"></div> <!--显示上传信息-->
js部分
$(document).ready(function(){
upload_files = []; //用来临时存放上传的文件
$("#file_upload").fileinput({ //上传文件
uploadUrl:"{% url 'file_upload' %}", //上传文件的路径
uploadAsync:true, //使用异步传输
language:'zh', //中文支持
maxFileSize:10000, //最大10M
maxFileCount:5, //最多一次上传5个文件
showPreview:false, //关闭预览框
showCaption:true, //是否显示文件标题
allowedFileExtensions: ['xls', 'xlsx'] //上传文件格式限制
});
$('#file_upload').on('filelock',function () { //点击“上传文件”按钮，文件上传过程中解发事件
var row_html = "上传进行中，请稍等";
$("#info-msgs").append(row_html)
});
var from = data.form,files = data.files,extra = data.extra,
response = data.response,reader = data.reader;
console.log(response) ; //打印后端返回的内容
upload_files.push(response);
if(response=="completed") { //根据后端返回的内容判断成功还是失败
alert("上传成功");
location.reload();
}else{
alert("上传失败,请联系网站管理员！");
location.reload()
}
});
});如果要修改上传按钮的名称，使用中文插件的话，请修改fileinput_locale_zh.js这个文件中的相关内容
功能演示
1、开始上传
2、 上传中
3、上传完成
bootstrap-fileinput/README.md
本文中用到的部分功能说明及代码示例
#### fileuploaded
This event is triggered after upload is completed for each thumbnail file. Note this event is also triggered for
asynchronous batch uploads after each file in the selection is uploaded via ajax. Additional parameters available are:
- `data`: This is a data object (associative array) that sends the following information, whose keys are:
- `form`: the FormData object which is passed via XHR2 (or empty object if not available).
- `files`: the file stack array (or empty object if not available).
- `extra`: the `uploadExtraData` settings for the plugin (or empty object if not available).
- `response`: the data sent via ajax response (or empty object if not available).
- `reader`: the FileReader instance if available
- `jqXHR`: the `jQuery XMLHttpRequest` object used for this transaction (if available).
- `previewId`: the identifier of each file's parent thumbnail div element in the preview window.
- `index`: the zero-based index of the file in the file stack.
```js
$('#input-id').on('fileuploaded', function(event, data, previewId, index) {
var form = data.form, files = data.files, extra = data.extra,
response = data.response, reader = data.reader;
console.log('File uploaded triggered');
});
```
This event is triggered when the upload process is launched by clicking a upload button, and the entire widget is locked (disabled) until upload is getting processed. Only the `Cancel` button will be enabled when the file input is locked. Additional parameters available are:
- `filestack`: the array of selected file objects.
- `extraData`: the `uploadExtraData` settings for the plugin (will return an empty object if not set).
```js
$('#input-id').on('filelock', function(event, filestack, extraData) {
var fstack = filestack.filter(function(n){ return n != undefined });
console.log('Files selected - ' + fstack.length);
});
```