261 lines
10 KiB
HTML
261 lines
10 KiB
HTML
{% extends 'base.html' %}
|
||
|
||
{% load static %}
|
||
|
||
{% block title %}Multiple File Upload{% endblock %}
|
||
|
||
{% block css %}
|
||
<link href="{% static 'plugins/blueimp-gallery/css/blueimp-gallery.min.css' %}" rel="stylesheet" />
|
||
<link href="{% static 'plugins/blueimp-file-upload/css/jquery.fileupload.css' %}" rel="stylesheet" />
|
||
<link href="{% static 'plugins/blueimp-file-upload/css/jquery.fileupload-ui.css' %}" rel="stylesheet" />
|
||
{% endblock %}
|
||
|
||
{% block js %}
|
||
<script src="{% static 'plugins/blueimp-file-upload/js/vendor/jquery.ui.widget.js' %}"></script>
|
||
<script src="{% static 'plugins/blueimp-tmpl/js/tmpl.js' %}"></script>
|
||
<script src="{% static 'plugins/blueimp-load-image/js/load-image.all.min.js' %}"></script>
|
||
<script src="{% static 'plugins/blueimp-canvas-to-blob/js/canvas-to-blob.js' %}"></script>
|
||
<script src="{% static 'plugins/blueimp-gallery/js/jquery.blueimp-gallery.min.js' %}"></script>
|
||
<script src="{% static 'plugins/blueimp-file-upload/js/jquery.iframe-transport.js' %}"></script>
|
||
<script src="{% static 'plugins/blueimp-file-upload/js/jquery.fileupload.js' %}"></script>
|
||
<script src="{% static 'plugins/blueimp-file-upload/js/jquery.fileupload-process.js' %}"></script>
|
||
<script src="{% static 'plugins/blueimp-file-upload/js/jquery.fileupload-image.js' %}"></script>
|
||
<script src="{% static 'plugins/blueimp-file-upload/js/jquery.fileupload-audio.js' %}"></script>
|
||
<script src="{% static 'plugins/blueimp-file-upload/js/jquery.fileupload-video.js' %}"></script>
|
||
<script src="{% static 'plugins/blueimp-file-upload/js/jquery.fileupload-validate.js' %}"></script>
|
||
<script src="{% static 'plugins/blueimp-file-upload/js/jquery.fileupload-ui.js' %}"></script>
|
||
<script src="{% static 'js/demo/form-multiple-upload.demo.js' %}"></script>
|
||
<script src="{% static 'plugins/@highlightjs/cdn-assets/highlight.min.js' %}"></script>
|
||
<script src="{% static 'js/demo/render.highlight.js' %}"></script>
|
||
{% endblock %}
|
||
|
||
{% block content %}
|
||
<!-- BEGIN breadcrumb -->
|
||
<ol class="breadcrumb float-xl-end">
|
||
<li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
|
||
<li class="breadcrumb-item"><a href="javascript:;">Form Stuff</a></li>
|
||
<li class="breadcrumb-item active">Multiple File Upload</li>
|
||
</ol>
|
||
<!-- END breadcrumb -->
|
||
<!-- BEGIN page-header -->
|
||
<h1 class="page-header">Multiple File Upload <small>header small text goes here...</small></h1>
|
||
<!-- END page-header -->
|
||
|
||
<!-- BEGIN form-file-upload -->
|
||
<form id="fileupload" action="{% static 'plugins/jquery-file-upload/server/php/' %}" method="POST" enctype="multipart/form-data">
|
||
<!-- BEGIN panel -->
|
||
<div class="panel panel-inverse">
|
||
<!-- BEGIN panel-heading -->
|
||
<div class="panel-heading">
|
||
<h4 class="panel-title">
|
||
jQuery File Upload
|
||
<b class="badge d-inline-flex align-items-center p-0 ms-1">
|
||
<i class="fa fa-circle fa-fw fs-6px text-blue me-1"></i>
|
||
<i class="fa fa-circle fa-fw fs-6px text-cyan me-1"></i>
|
||
<i class="fa fa-circle fa-fw fs-6px text-teal"></i>
|
||
</b>
|
||
</h4>
|
||
<div class="panel-heading-btn">
|
||
<a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
|
||
<a href="javascript:;" class="btn btn-xs btn-icon btn-success" data-toggle="panel-reload"><i class="fa fa-redo"></i></a>
|
||
<a href="javascript:;" class="btn btn-xs btn-icon btn-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
|
||
<a href="javascript:;" class="btn btn-xs btn-icon btn-danger" data-toggle="panel-remove"><i class="fa fa-times"></i></a>
|
||
</div>
|
||
</div>
|
||
<!-- END panel-heading -->
|
||
<div class="alert alert-primary rounded-0 d-flex align-items-center mb-0">
|
||
<div class="fs-24px w-80px text-center">
|
||
<i class="fa fa-lightbulb fa-2x"></i>
|
||
</div>
|
||
<div class="flex-1 ms-3">
|
||
<h4>Demo Notes</h4>
|
||
<ul class="ps-3 mb-1">
|
||
<li>The maximum file size for uploads in this demo is <strong>5 MB</strong> (default file size is unlimited).</li>
|
||
<li>Only image files (<strong>JPG, GIF, PNG</strong>) are allowed in this demo (by default there is no file type restriction).</li>
|
||
<li>Uploaded files will be deleted automatically after <strong>5 minutes</strong> (demo setting).</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!-- BEGIN panel-body -->
|
||
<div class="panel-body">
|
||
<div class="row fileupload-buttonbar">
|
||
<div class="col-xl-7">
|
||
<span class="btn btn-primary fileinput-button me-1">
|
||
<i class="fa fa-fw fa-plus"></i>
|
||
<span>Add files...</span>
|
||
<input type="file" name="files[]" multiple>
|
||
</span>
|
||
<button type="submit" class="btn btn-primary start me-1">
|
||
<i class="fa fa-fw fa-upload"></i>
|
||
<span>Start upload</span>
|
||
</button>
|
||
<button type="reset" class="btn btn-default cancel me-1">
|
||
<i class="fa fa-fw fa-ban"></i>
|
||
<span>Cancel upload</span>
|
||
</button>
|
||
<button type="button" class="btn btn-default delete me-1">
|
||
<i class="fa fa-fw fa-trash"></i>
|
||
<span>Delete</span>
|
||
</button>
|
||
<!-- The global file processing state -->
|
||
<span class="fileupload-process"></span>
|
||
</div>
|
||
<!-- The global progress state -->
|
||
<div class="col-xl-5 fileupload-progress fade d-none d-xl-block">
|
||
<!-- The global progress bar -->
|
||
<div class="progress progress-striped active">
|
||
<div class="progress-bar progress-bar-success" style="width:0%;"></div>
|
||
</div>
|
||
<!-- The extended global progress state -->
|
||
<div class="progress-extended"> </div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- END panel-body -->
|
||
<!-- BEGIN table -->
|
||
<div class="table-responsive">
|
||
<table class="table table-panel text-nowrap mb-0">
|
||
<thead>
|
||
<tr>
|
||
<th width="10%">PREVIEW</th>
|
||
<th>FILE INFO</th>
|
||
<th>UPLOAD PROGRESS</th>
|
||
<th width="1%"></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="files">
|
||
<tr data-id="empty">
|
||
<td colspan="4" class="text-center text-gray-500 py-30px">
|
||
<div class="mb-10px"><i class="fa fa-file fa-3x"></i></div>
|
||
<div class="fw-bold">No file selected</div>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<!-- END table -->
|
||
<!-- BEGIN hljs-wrapper -->
|
||
<div class="hljs-wrapper rounded-0 rounded-bottom">
|
||
<pre><code class="html" data-url="{% static 'data/form-multiple-upload/code-1.json' %}"></code></pre>
|
||
</div>
|
||
<!-- END hljs-wrapper -->
|
||
</div>
|
||
<!-- END panel -->
|
||
</form>
|
||
<!-- END form-file-upload -->
|
||
{% endblock %}
|
||
|
||
{% block outter_content %}
|
||
<!-- The blueimp Gallery widget -->
|
||
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" data-filter=":even">
|
||
<div class="slides"></div>
|
||
<h3 class="title"></h3>
|
||
<a class="prev">‹</a>
|
||
<a class="next">›</a>
|
||
<a class="close">×</a>
|
||
<a class="play-pause"></a>
|
||
<ol class="indicator"></ol>
|
||
</div>
|
||
|
||
{% verbatim %}
|
||
<!-- The template to display files available for upload -->
|
||
<script id="template-upload" type="text/x-tmpl">
|
||
{% for (var i=0, file; file=o.files[i]; i++) { %}
|
||
<tr class="template-upload fade show">
|
||
<td>
|
||
<span class="preview"></span>
|
||
</td>
|
||
<td>
|
||
<div class="bg-light rounded p-3 mb-2">
|
||
<dl class="mb-0">
|
||
<dt class="text-dark">File Name:</dt>
|
||
<dd class="name">{%=file.name%}</dd>
|
||
<hr />
|
||
<dt class="text-dark mt-10px">File Size:</dt>
|
||
<dd class="size mb-0">Processing...</dd>
|
||
</dl>
|
||
</div>
|
||
<strong class="error text-danger h-auto d-block text-left"></strong>
|
||
</td>
|
||
<td>
|
||
<dl>
|
||
<dt class="text-dark mt-3px">Progress:</dt>
|
||
<dd class="mt-5px">
|
||
<div class="progress progress-sm progress-striped active rounded-pill"><div class="progress-bar progress-bar-primary" style="width:0%; min-width: 40px;">0%</div></div>
|
||
</dd>
|
||
</dl>
|
||
</td>
|
||
<td nowrap>
|
||
{% if (!i && !o.options.autoUpload) { %}
|
||
<button class="btn btn-primary start w-100px pe-20px mb-2 d-block" disabled>
|
||
<i class="fa fa-upload fa-fw text-dark"></i>
|
||
<span>Start</span>
|
||
</button>
|
||
{% } %}
|
||
{% if (!i) { %}
|
||
<button class="btn btn-default cancel w-100px pe-20px d-block">
|
||
<i class="fa fa-trash fa-fw text-muted"></i>
|
||
<span>Cancel</span>
|
||
</button>
|
||
{% } %}
|
||
</td>
|
||
</tr>
|
||
{% } %}
|
||
</script>
|
||
|
||
<!-- The template to display files available for download -->
|
||
<script id="template-download" type="text/x-tmpl">
|
||
{% for (var i=0, file; file=o.files[i]; i++) { %}
|
||
<tr class="template-download fade show">
|
||
<td width="1%">
|
||
<span class="preview">
|
||
{% if (file.thumbnailUrl) { %}
|
||
<a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailUrl%}" class="rounded"></a>
|
||
{% } else { %}
|
||
<div class="bg-light text-center fs-20px" style="width: 80px; height: 80px; line-height: 80px; border-radius: 6px;">
|
||
<i class="fa fa-file-image fa-lg text-gray-500"></i>
|
||
</div>
|
||
{% } %}
|
||
</span>
|
||
</td>
|
||
<td>
|
||
<div class="bg-light p-3 mb-2">
|
||
<dl class="mb-0">
|
||
<dt class="text-dark">File Name:</dt>
|
||
<dd class="name">
|
||
{% if (file.url) { %}
|
||
<a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
|
||
{% } else { %}
|
||
<span>{%=file.name%}</span>
|
||
{% } %}
|
||
</dd>
|
||
<hr />
|
||
<dt class="text-dark mt-10px">File Size:</dt>
|
||
<dd class="size mb-0">{%=o.formatFileSize(file.size)%}</dd>
|
||
</dl>
|
||
{% if (file.error) { %}
|
||
<hr />
|
||
<div><span class="badge bg-danger me-1">ERROR</span> {%=file.error%}</div>
|
||
{% } %}
|
||
</div>
|
||
</td>
|
||
<td></td>
|
||
<td>
|
||
{% if (file.deleteUrl) { %}
|
||
<button class="btn btn-danger delete w-100px mb-2 pe-20px" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>
|
||
<i class="fa fa-trash float-start fa-fw text-dark mt-2px"></i>
|
||
<span>Delete</span>
|
||
</button>
|
||
<input type="checkbox" name="delete" value="1" class="toggle">
|
||
{% } else { %}
|
||
<button class="btn btn-default cancel w-100px me-3px pe-20px">
|
||
<i class="fa fa-trash float-start fa-fw text-muted mt-2px"></i>
|
||
<span>Cancel</span>
|
||
</button>
|
||
{% } %}
|
||
</td>
|
||
</tr>
|
||
{% } %}
|
||
</script>
|
||
{% endverbatim %}
|
||
{% endblock %} |