image-uploader实现多图片上传表单效果代码
代码语言:html
所属分类:上传
代码描述:image-uploader实现多图片上传表单效果代码,可以选择图片并删除,和表单一起上传。
代码标签: image-uploader 多 图片 上传 表单
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="content-language" content="en" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/image-uploader.min.css"> <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link href="https://fonts.googleapis.com/css?family=Lato:300,700|Montserrat:300,400,500,600,700|Source+Code+Pro&display=swap" rel="stylesheet"> <style> * { margin: 0; padding: 0; font-weight: normal; } body { font-family: 'Lato', sans-serif; font-size: 16px; font-weight: 300; color: rgba(0, 0, 0, 0.9); line-height: 1.5; } header { background-color: rgba(0, 0, 0, 0.9); color: rgb(255, 255, 255); padding: 1rem; } header p { font-family: 'Montserrat', sans-serif; font-size: 1.2em; font-weight: 200; margin-bottom: 4rem; } main { text-align: justify; position: relative; margin: 4rem 0; } footer { background-color: rgba(0, 0, 0, 0.9); color: rgb(255, 255, 255); padding: 1rem 0; margin-top: 4rem; } footer p { text-align: center; font-family: 'Montserrat', sans-serif; font-size: 1em; font-weight: 200; margin: 0; } a { color: #50ce7d; text-decoration: none; } h1, h4, h6 { font-family: 'Montserrat', sans-serif; font-weight: 600; } h1 { font-size: 3.6em; margin: 4rem 0 1rem 0; } h4 { font-size: 2em; margin: 3rem 0 1rem 0; } h6 { font-size: 1.2em; margin: 1rem 0; } h4 small { font-size: 70%; font-weight: 300; } p { margin: 1rem 0; } nav { position: absolute; margin-left: -12em; } nav ul { margin-left: 0; list-style: none; } nav ul li { padding: .2rem 0; } nav ul li a { font-size: 1.2em; font-weight: 400; font-family: 'Montserrat', sans-serif; color: #2196f3; } pre { font-family: 'Source Code Pro', monospace; margin: 1rem 0; padding: 1rem 1rem; background: #f3f3f3; font-size: .9em; overflow-x: scroll; } table code, p code { font-family: 'Source Code Pro', monospace; background: #f3f3f3; font-size: .9em; padding: .1rem .3rem; } strong { font-weight: 600; } form > button { -webkit-appearance: none; cursor: pointer; font-family: 'Montserrat', sans-serif; font-weight: 600; padding: 1rem 2rem; border: none; background-color: #50ce7d; color: #fff; text-transform: uppercase; display: block; margin: 2rem 0 2rem auto; font-size: 1em; } ul { margin-left: 2rem; } input { background-color: transparent; border: none; border-radius: 0; outline: none; width: 100%; line-height: normal; font-size: 1em; padding: 0; -webkit-box-shadow: none; box-shadow: none; -webkit-box-sizing: content-box; box-sizing: content-box; margin: 0; color: rgba(0, 0, 0, 0.72); background-position: center bottom, center calc(100% - 1px); background-repeat: no-repeat; background-size: 0 2px, 100% 1px; -webkit-transition: background 0s ease-out 0s; -o-transition: background 0s ease-out 0s; transition: background 0s ease-out 0s; background-image: -webkit-gradient(linear, left top, left bottom, from(#2196f3), to(#2196f3)), -webkit-gradient(linear, left top, left bottom, from(#d9d9d9), to(#d9d9d9)); background-image: -webkit-linear-gradient(#2196f3, #2196f3), -webkit-linear-gradient(#d9d9d9, #d9d9d9); background-image: -o-linear-gradient(#2196f3, #2196f3), -o-linear-gradient(#d9d9d9, #d9d9d9); background-image: linear-gradient(#2196f3, #2196f3), linear-gradient(#d9d9d9, #d9d9d9); height: 2.4em; } input:focus { background-size: 100% 2px, 100% 1px; outline: 0 none; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; border-bottom: none; -webkit-box-shadow: none; box-shadow: none; } .input-field label { width: 100%; color: #9e9e9e; position: absolute; top: 0; left: 0; height: 100%; font-size: 1em; cursor: text; -webkit-transition: -webkit-transform .2s ease-out; transition: -webkit-transform .2s ease-out; -webkit-transform-origin: 0 100%; transform-origin: 0 100%; text-align: initial; -webkit-transform: translateY(7px); transform: translateY(7px); pointer-events: none; } input:focus + label { color: #2196f3; } .input-field { position: relative; margin-top: 2.2rem; } .input-field label.active { -webkit-transform: translateY(-15px) scale(0.8); transform: translateY(-15px) scale(0.8); -webkit-transform-origin: 0 0; transform-origin: 0 0; } .container { width: 60%; max-width: 1200px; margin: 0 auto; position: relative; } .step { font-size: 1.6em; font-weight: 600; margin-right: .5rem; } .option { margin-top: 2rem; border-bottom: 1px solid #d9d9d9; } .modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, .5); display: flex; align-items: center; justify-content: center; } .modal .content { background: #fff; display: inline-block; padding: 2rem; position: relative; } .modal .content h4 { margin-top: 0; } .modal .content a.close { position: absolute; top: 1rem; right: 1rem; color: inherit; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #888; } ::-webkit-scrollbar-thumb:hover { background: #555; } @media screen and (max-width: 1366px) { body { font-size: 15px; } nav ul li a { font-size: 1.1em; } } @media screen and (max-width: 992px) { main { margin: 2rem 0; } nav { margin-left: -10em; } } @media screen and (max-width: 786px) { body { font-size: 14px; } nav { display: none; } .container { width: 80%; } } @media screen and (max-width: 450px) { .container { width: 90%; } } </style> </head> <body> <header> <div class="container"> <h1>Image-Uploader</h1> <p>Image-Uploader is a simple jQuery Drag & Drop Image Uploader plugin made to be used in forms, withot AJAX. </p> </div> </header> <main> <div class="container"> <nav> <ul> <li><a href="#howtouse">How to use it</a></li> <li><a href="#options">Options</a></li> <li><a href="#example-1">Example 1</a></li> <li><a href="#example-2">Example 2</a></li> </ul> </nav> <h4 id="howtouse"><a href="#howtouse"># How to use it <small>in 5 steps</small> </a></h4> <p><span class="step">1.</span>Import the CSS file at the <code><head></code> along Material Icons for the icons: </p> <pre><code><link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/image-uploader.min.css"></code></pre> <p><span class="step">2.</span>Import the JS file at the end of the <code><body></code>, after the jQuery: </p> <pre><code><script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/image-uploader.min.js"></script></code></pre> <p><span class="step">3.</span>Create a form with <code>enctype="multipart/form-data"</code> attributte:</p> <pre><code><form action="http://example.com/post" enctype="multipart/form-data"></form></code></pre> <p><span class="step">4.</span>Inside the form, create a wrapper to the plugin:</p> <pre><code><div class="input-images"></div></code></pre> <p><span class="step">5.</span>Initialize it with jQuery</p> <pre><code>$('.input-images').imageUploader();</code></pre> <h4 id="options"><a href="#options"># Options <small>for custumization</small> </a></h4> <div class="option"> <h6>label</h6> <p><strong>Type:</strong> <code>string</code></p> <p><strong>Default:</strong> <code>'Drag & Drop files here or click to browse'</code></p> <p>Informative label, telling the user what to do with the draggable area.</p> </div> <div class="option"> <h6>preloaded</h6> <p><strong>Type:</strong> <code>{id: number, src: string}[]</code></p> <p><strong>Default:</strong> <code>[]</code></p> <p>Array of objects representing images that are already stored, containing an identification for that image and the source.</p> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0