bootstrap-上传文件

github

website

图片

包含 css

<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 中初始化

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

// initialize with defaults
$("#upload_name").fileinput({
    theme: "fa",
    uploadUrl: "/admin/api/v1.0/upload"
});

form 方式

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

获取多个文件名

$('#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);
});