html5文件拖拽上传无插件效果
代码语言:html
所属分类:上传
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.css"> <style> @import url("https://fonts.googleapis.com/css?family=Roboto"); html, body, * { box-sizing: border-box; font-size: 16px; } html, body { height: 100%; text-align: center; } body { padding: 2rem; background: #f8f8f8; } h2 { font-family: "Roboto", sans-serif; font-size: 26px; line-height: 1; color: #454cad; margin-bottom: 0; } p { font-family: "Roboto", sans-serif; font-size: 18px; color: #5f6982; } .uploader { display: block; clear: both; margin: 0 auto; width: 100%; max-width: 600px; } .uploader label { float: left; clear: both; width: 100%; padding: 2rem 1.5rem; text-align: center; background: #fff; border-radius: 7px; border: 3px solid #eee; -webkit-transition: all .2s ease; transition: all .2s ease; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .uploader label:hover { border-color: #454cad; } .uploader label.hover { border: 3px solid #454cad; box-shadow: inset 0 0 0 6px #eee; } .uploader label.hover #start i.fa { -webkit-transform: scale(0.8); transform: scale(0.8); opacity: 0.3; } .uploader #start { float: left; clear: both; width: 100%; } .uploader #start.hidden { display: none; } .uploader #start i.fa { font-size: 50px; margin-bottom: 1rem; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .uploader #response { float: left; clear: both; width: 100%; } .uploader #response.hidden { display: none; } .uploader #response #messages { margin-bottom: .5rem; } .uploader #file-image { display: inline; margin: 0 auto .5rem auto; width: auto; height: auto; max-width: 180px; } .uploader #file-image.hidden { display: none; } .uploader #notimage { display: block; float: left; clear: both; width: 100%; } .uploader #notimage.hidden { display: none; } .uploader progress, .uploader .progress { display: inline; clear: both; margin: 0 auto; width: 100%; max-width: 180px; height: 8px; border: 0; border-radius: 4px; background-color: #eee; overflow: hidden; } .uploader .progress[value]::-webkit-progress-bar { border-radius: 4px; background-color: #eee; } .uploader .progress[value]::-webkit-progress-value { background: -webkit-gradient(linear, left top, right top, from(#393f90), color-stop(50%, #454cad)); background: linear-gradient(to right, #393f90 0%, #454cad 50%); border-radius: 4px; } .uploader .progress[value]::-moz-progress-bar { background: linear-gradient(to right, #393f90 0%, #454cad 50%); border-radius: 4px; } .uploader input[type="file"] { display: none; } .uploader div { margin: 0 0 .5rem 0; color: #5f6982; } .uploader .btn { display: inline-block; margin: .5rem .5rem 1rem .5rem; clear: both; font-family: inherit; font-weight: 700; font-size: 14px; text-decoration: none; text-transform: initial; border: none; border-radius: .2rem; outline: none; padding: 0 1rem; height: 36px; line-height: 36px; color: #fff; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; box-sizing: border-box; background: #454cad; border-color: #454cad; cursor: pointer; } </style> </head> <body translate="no"> <h2>文件上传和图片预览</h2> <p class="lead">纯js版本,无需插件</b></p> <form id="file-upload-form" class="uploader"> <input id="file-upload" type="file" name="fileUpload" accept="image/*" /> <label for="file-upload" id="file-drag"> <img id="file-image" src="#" alt="Preview" class="hidden"> <div id="start"> <i class="fa fa-download" aria-hidden="true"></i> <div>选择一个文件或拖拽</div> <div id="notimage" class="hidden">请选择一个图片</div> <span id="file-upload-btn" class="btn btn-primary">请选择一个文件</span> </div> <div id="response" class="hidden"> <div id="messages"></div> <progress class="progress" id="file-progress" value="0"> <span>0</span>% </progress> </div> </label> </form> <script> // File Upload // function ekUpload(){ function Init() { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0