wangyifang
/
v2.tiantianxinye.365care
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'a5dc5de9f4'
${ noResults }
v2.tiantianxinye.365care/public/hyper/src/saas/form-fileuploads.html

222 lines
14 KiB
Raw Normal View History Unescape

init
5 years ago
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>File Uploads | Hyper - Responsive Bootstrap 4 Admin Dashboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description" />
<meta content="Coderthemes" name="author" />
<!-- App favicon -->
<link rel="shortcut icon" href="assets/images/favicon.ico">
<!-- App css -->
<link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
<link href="assets/css/app.min.css" rel="stylesheet" type="text/css" id="light-style" />
<link href="assets/css/app-dark.min.css" rel="stylesheet" type="text/css" id="dark-style" />
</head>
<body class="loading" data-layout-config='{"leftSideBarTheme":"dark","layoutBoxed":false, "leftSidebarCondensed":false, "leftSidebarScrollable":false,"darkMode":false, "showRightSidebarOnStart": true}'>
<!-- Begin page -->
<div class="wrapper">
@@include('./partials/left-sidebar.html')
<!-- ============================================================== -->
<!-- Start Page Content here -->
<!-- ============================================================== -->
<div class="content-page">
<div class="content">
@@include('./partials/topbar.html')
<!-- Start Content-->
<div class="container-fluid">
<!-- start page title -->
<div class="row">
<div class="col-12">
<div class="page-title-box">
<div class="page-title-right">
<ol class="breadcrumb m-0">
<li class="breadcrumb-item">
<a href="javascript: void(0);">Hyper</a>
</li>
<li class="breadcrumb-item">
<a href="javascript: void(0);">Forms</a>
</li>
<li class="breadcrumb-item active">File Uploads</li>
</ol>
</div>
<h4 class="page-title">File Uploads</h4>
</div>
</div>
</div>
<!-- end page title -->
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<h4 class="header-title m-t-0">Dropzone File Upload</h4>
<p class="text-muted font-14">
DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews.
</p>
<ul class="nav nav-tabs nav-bordered mb-3">
<li class="nav-item">
<a href="#file-upload-preview" data-toggle="tab" aria-expanded="false" class="nav-link active">
Preview
</a>
</li>
<li class="nav-item">
<a href="#file-upload-code" data-toggle="tab" aria-expanded="true" class="nav-link">
Code
</a>
</li>
</ul> <!-- end nav-->
<div class="tab-content">
<div class="tab-pane show active" id="file-upload-preview">
<form action="/" method="post" class="dropzone" id="myAwesomeDropzone" data-plugin="dropzone" data-previews-container="#file-previews"
data-upload-preview-template="#uploadPreviewTemplate">
<div class="fallback">
<input name="file" type="file" multiple />
</div>
<div class="dz-message needsclick">
<i class="h1 text-muted dripicons-cloud-upload"></i>
<h3>Drop files here or click to upload.</h3>
<span class="text-muted font-13">(This is just a demo dropzone. Selected files are
<strong>not</strong> actually uploaded.)</span>
</div>
</form>
<!-- Preview -->
<div class="dropzone-previews mt-3" id="file-previews"></div>
</div> <!-- end preview-->
<div class="tab-pane" id="file-upload-code">
<p>Make sure to include following js files at end of <code>body element</code></p>
<pre class="mb-0">
<span class="html escape">
&lt;!-- plugin js --&gt;
&lt;script src=&quot;assets/js/vendor/dropzone.min.js&quot;&gt;&lt;/script&gt;
&lt;!-- init js --&gt;
&lt;script src=&quot;assets/js/ui/component.fileupload.js&quot;&gt;&lt;/script&gt;
</span>
</pre> <!-- end highlight-->
<pre class="mb-0">
<span class="html escape">
&lt;!-- File Upload --&gt;
&lt;form action=&quot;/&quot; method=&quot;post&quot; class=&quot;dropzone&quot; id=&quot;myAwesomeDropzone&quot; data-plugin=&quot;dropzone&quot; data-previews-container=&quot;#file-previews&quot;
data-upload-preview-template=&quot;#uploadPreviewTemplate&quot;&gt;
&lt;div class=&quot;fallback&quot;&gt;
&lt;input name=&quot;file&quot; type=&quot;file&quot; multiple /&gt;
&lt;/div&gt;
&lt;div class=&quot;dz-message needsclick&quot;&gt;
&lt;i class=&quot;h1 text-muted dripicons-cloud-upload&quot;&gt;&lt;/i&gt;
&lt;h3&gt;Drop files here or click to upload.&lt;/h3&gt;
&lt;span class=&quot;text-muted font-13&quot;&gt;(This is just a demo dropzone. Selected files are
&lt;strong&gt;not&lt;/strong&gt; actually uploaded.)&lt;/span&gt;
&lt;/div&gt;
&lt;/form&gt;
&lt;!-- Preview --&gt;
&lt;div class=&quot;dropzone-previews mt-3&quot; id=&quot;file-previews&quot;&gt;&lt;/div&gt;
&lt;!-- file preview template --&gt;
&lt;div class=&quot;d-none&quot; id=&quot;uploadPreviewTemplate&quot;&gt;
&lt;div class=&quot;card mt-1 mb-0 shadow-none border&quot;&gt;
&lt;div class=&quot;p-2&quot;&gt;
&lt;div class=&quot;row align-items-center&quot;&gt;
&lt;div class=&quot;col-auto&quot;&gt;
&lt;img data-dz-thumbnail src=&quot;#&quot; class=&quot;avatar-sm rounded bg-light&quot; alt=&quot;&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;col pl-0&quot;&gt;
&lt;a href=&quot;javascript:void(0);&quot; class=&quot;text-muted font-weight-bold&quot; data-dz-name&gt;&lt;/a&gt;
&lt;p class=&quot;mb-0&quot; data-dz-size&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;col-auto&quot;&gt;
&lt;!-- Button --&gt;
&lt;a href=&quot;&quot; class=&quot;btn btn-link btn-lg text-muted&quot; data-dz-remove&gt;
&lt;i class=&quot;dripicons-cross&quot;&gt;&lt;/i&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</span>
</pre> <!-- end highlight-->
</div> <!-- end preview code-->
</div> <!-- end tab-content-->
</div>
<!-- end card-body -->
</div>
<!-- end card-->
</div>
<!-- end col-->
</div>
<!-- end row -->
</div>
<!-- container -->
</div>
<!-- content -->
@@include('./partials/footer.html')
</div>
<!-- ============================================================== -->
<!-- End Page content -->
<!-- ============================================================== -->
</div>
<!-- END wrapper -->
@@include('./partials/right-sidebar.html')
<!-- file preview template -->
<div class="d-none" id="uploadPreviewTemplate">
<div class="card mt-1 mb-0 shadow-none border">
<div class="p-2">
<div class="row align-items-center">
<div class="col-auto">
<img data-dz-thumbnail src="#" class="avatar-sm rounded bg-light" alt="">
</div>
<div class="col pl-0">
<a href="javascript:void(0);" class="text-muted font-weight-bold" data-dz-name></a>
<p class="mb-0" data-dz-size></p>
</div>
<div class="col-auto">
<!-- Button -->
<a href="" class="btn btn-link btn-lg text-muted" data-dz-remove>
<i class="dripicons-cross"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- bundle -->
<script src="assets/js/vendor.min.js"></script>
<script src="assets/js/app.min.js"></script>
<!-- Dropzone js -->
<script src="assets/js/vendor/dropzone.min.js"></script>
<!-- File upload js -->
<script src="assets/js/ui/component.fileupload.js"></script>
</body>
</html>