| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>文件上傳</title> | |
| <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css"> | |
| <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script> | |
| <style> | |
| body,html{ | |
| margin: 0 auto; | |
| } | |
| .up-header { | |
| width:600px; | |
| text-align: center; | |
| } | |
| .up-content { | |
| min-height: 200px; | |
| border: 1px solid #CCCCCC; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| background-color: #FAFAFA; | |
| color: #999; | |
| font-size: 20px; | |
| text-align: center; | |
| } | |
| .up-area { | |
| border: 2px dashed #ccc; | |
| margin: 10px 20px 20px 20px; | |
| width: 300px; | |
| min-height: 200px; | |
| line-height: 100px; | |
| background-color: #fff; | |
| } | |
| .list-group { | |
| margin: 0px auto;; | |
| width: 200px; | |
| min-height: 100px; | |
| padding: 10px; | |
| } | |
| img { | |
| max-width: 100%; | |
| } | |
| .btn { | |
| } | |
| .close { | |
| margin-left: 550px; | |
| margin-top: -20px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header id="header" class="page-header"> | |
| <!-- 頭部顯示 --> | |
| <div class="container upload "> | |
| <div class="up-header center-block"> | |
| <h2 >文件上傳——兩種形式</h2> | |
| <div class="input-group" style="width:600px; display:flex;"> | |
| <input type="text" class="form-control" placeholder="在此處粘貼圖片網址"> | |
| <button type="button" class="btn btn-primary">上傳圖片</button> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <!-- 拖拽圖片到這來 --> | |
| <div class="col-md-5 col-md-offset-1 up-content dragFile"> | |
| <p style="margin-top:10px;">拖拽圖片到這里喲</p> | |
| <div class="up-area"> | |
| <input type="file" style="display:none;" id="fileDrag" name="fileDragselect" multiple> | |
| <div class="row"> | |
| <ul class="list-group clearfix list-drag"> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 點擊按鈕上傳文件 --> | |
| <div class="col-md-5 up-content btnFile"> | |
| <div class="btn"> | |
| <button type="button" class="btn btn-success" id="btn"> 本地上傳文件</button> | |
| <input type="file" style="display:none;" id="fileInput" name="fileselect" multiple> | |
| </div> | |
| <div class="up-area"> | |
| <div class="row"> | |
| <ul class="list-group clearfix list-btn"> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <script type="text/javascript"> | |
| //點擊本地上傳文件 | |
| $('#btn').click( () => { | |
| $('#fileInput').click(); | |
| }) | |
| $('#fileInput').change( (event) => { | |
| var files = event.target.files; | |
| appendFile(files, '.list-btn'); | |
| }) | |
| //拖拽上傳文件 在頁面進行預覽 上傳form用到ajax | |
| const dragbox = document.querySelector('.dragFile'); | |
| dragbox.addEventListener('dragover', function (e) { | |
| e.preventDefault(); // 必須阻止默認事件 | |
| }, false); | |
| dragbox.addEventListener('drop', function (e) { | |
| e.preventDefault(); // 阻止默認事件 | |
| var files = e.dataTransfer.files; //獲取文件 | |
| appendFile(files, '.list-drag') | |
| // code | |
| }, false); | |
| function appendFile (files, listName) { | |
| for( file of files ) { | |
| let url = window.URL.createObjectURL(file); | |
| let liStr = ` | |
| <li class="list-group-item"> | |
| <div> | |
| <img src="${url}" alt="文件" /> | |
| </div> | |
| </li> | |
| `; | |
| $(listName).append(liStr); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
聯(lián)系客服
