bootstrap-上传文件

github

website

图片

包含 css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<link href="{{ url_for('admin.static', filename='css/ext/fileinput.min.css') }}" media="all" rel="stylesheet" type="text/css" />

<script src="{{url_for('admin.static', filename='js/ext/fileInput/plugins/piexif.min.js')}}" type="text/javascript"></script>
<!-- sortable.min.js is only needed if you wish to sort / rearrange files in initial preview.
This must be loaded before fileinput.min.js -->
<script src="{{url_for('admin.static', filename='js/ext/fileInput/plugins/sortable.min.js')}}" type="text/javascript"></script>
<!-- purify.min.js is only needed if you wish to purify HTML content in your preview for
HTML files. This must be loaded before fileinput.min.js -->
<script src="{{url_for('admin.static', filename='js/ext/fileInput/plugins/purify.min.js')}}" type="text/javascript"></script>
<!-- popper.min.js below is needed if you use bootstrap 4.x. You can also use the bootstrap js
3.3.x versions without popper.min.js. -->
<script src="{{url_for('admin.static', filename='js/ext/popper.min.js')}}"></script>
<!-- the main fileinput plugin file -->
<script src="{{url_for('admin.static', filename='js/ext/fileInput/fileinput.min.js')}}"></script>
<!-- optionally if you need a theme like font awesome theme you can include it as mentioned below -->
<script src="{{url_for('admin.static', filename='js/ext/fileInput/themes/fa/theme.js')}}"></script>
<!-- optionally if you need translation for your language then include locale file as mentioned below -->
<script src="{{url_for('admin.static', filename='js/ext/fileInput/locales/zh.js')}}"></script>

ajax 方式

需要在 js 中初始化

1
<input type="file" name="file" id="upload_name"  class="file-loading" data-browse-on-zone-click="true">
1
2
3
4
5
// initialize with defaults
$("#upload_name").fileinput({
theme: "fa",
uploadUrl: "/admin/api/v1.0/upload"
});

form 方式

1
<input type="file" name="file" id="upload_name"  class="file" data-browse-on-zone-click="true">

获取多个文件名

1
2
3
4
5
6
7
8
9
$('#input-id').on('filelock', function(event, filestack, extraData) {
var fstack = [];
$.each(filestack, function(fileId, file) {
if (file) {
fstack.push(file);
}
});
console.log('Files selected - ' + fstack.length);
});
坚持原创技术分享,您的支持将鼓励我继续创作!