{% extends 'base.html' %} {% load mytags %} {% block self_head_css_js %} <link href="/static/css/plugins/datepicker/datepicker3.css" rel="stylesheet"> <link href="/static/css/plugins/chosen/chosen.css" rel="stylesheet"> <script src="/static/js/plugins/chosen/chosen.jquery.js"></script> {% endblock %} {% block content %} {% include 'nav_cat_bar.html' %} <style> table { display: table; border-collapse: separate; border-spacing: 2px; border-color: grey; } tbody { display: table-row-group; vertical-align: middle; border-color: inherit; } .table.border { border: 1px solid #999; } .table.hovered tbody tr:hover { background-color: rgba(28,183,236,.1) } tr { display: table-row; vertical-align: inherit; border-color: inherit; } td, th { display: table-cell; vertical-align: inherit; } #hosts_list { background-color: white; background-image: none; border-radius: 1px; color: inherit; display: block; right: 23px; left: 23px; } </style> <div class="wrapper wrapper-content animated fadeIn"> <div class="row"> <div class="col-sm-10"> <div class="ibox float-e-margins"> <div class="ibox-title"> <h5>上传文件</h5> <div class="ibox-tools"> <a class="collapse-link"> <i class="fa fa-chevron-up"></i> </a> <a class="close-link"> <i class="fa fa-times"></i> </a> </div> </div> <div class="ibox-content"> <div> <form id="my-awesome-dropzone" class="dropzone" action=""> <div class="alert alert-warning text-center" id="error" style="display: none"></div> <div class="alert alert-success text-center" id="msg" style="display: none"></div> <div class="dropzone-previews"> <div class="form-group"> <div class="col-sm-10"> <select name="asset_ids" id="assets" data-placeholder="请选择上传的主机" class="chosen-select form-control m-b" multiple tabindex="2"> {% for asset in assets %} <option value="{{ asset.id }}">{{ asset.hostname }}</option> {% endfor %} </select> </div> </div> </div> <button type="submit" class="btn btn-primary pull-right">全部上传</button> </form> </div> <div> <div class="m text-right"><small>上传文件到后端服务器的/tmp下,请注意查看</small> </div> </div> </div> </div> </div> </div> </div> {% endblock %} {% block self_footer_js %} <script> $(document).ready(function(){ Dropzone.options.myAwesomeDropzone = { autoProcessQueue: false, uploadMultiple: true, parallelUploads: 100, maxFiles: 100, url: '/file/upload/', // Dropzone settings init: function() { var myDropzone = this; this.element.querySelector("button[type=submit]").addEventListener("click", function(e) { e.preventDefault(); e.stopPropagation(); myDropzone.processQueue(); }); this.on("sendingmultiple", function() { }); this.on("successmultiple", function(files, response) { $('#msg').css('display', 'block'); $('#msg').html(response) }); this.on("errormultiple", function(files, response) { $('#error').css('display', 'block'); $('#error').html(response) }); } } }); var config = { '.chosen-select' : {}, '.chosen-select-deselect' : {allow_single_deselect:true}, '.chosen-select-no-single' : {disable_search_threshold:10}, '.chosen-select-no-results': {no_results_text:'Oops, nothing found!'}, '.chosen-select-width' : {width:"95%"} }; for (var selector in config) { $(selector).chosen(config[selector]); } $('#my-awesome-dropzone').validator({ timely: 2, theme: "yellow_right_effect", fields: { "hosts": { rule: "required", tip: "输入上传的主机", ok: "", msg: {required: "必须填写!"} } }, valid: function(form) { form.submit(); } }); </script> <script src="/static/js/cropper/cropper.min.js"></script> <script src="/static/js/datapicker/bootstrap-datepicker.js"></script> {% endblock %}