瀏覽器圖片預覽

瀏覽器圖片預覽

https://www.zybuluo.com/bornkiller/note/5

  • 圖片拖動添加,實時預覽如下代碼就能夠實現。FileReader接口提供了標準方法,chrome瀏覽器有快捷方法。
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Title Page</title>
        <meta charset="UTF-8">
        <meta name=description content="">
        <meta name=viewport content="width=device-width, initial-scale=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
       <div id="loves"></div>
       <input type="button" id="upload" value="submit">
       <progress max=100 min=0 value=0></progress>
        <script>
           document.addEventListener('drop', prevent);
           document.addEventListener('drop', fileHunter);
           document.addEventListener('dragenter', prevent);
           document.addEventListener('dragleave', prevent);
           document.addEventListener('dragover', prevent);
           var tmp = null;
           function prevent(e){
               e.stopPropagation();
               e.preventDefault();
           }
           function fileHunter(e){
              var reader = new FileReader();
              var images = e.dataTransfer.files;
              tmp = images[0];
              reader.readAsDataURL(images[0]);
              reader.addEventListener('load',function(e){
                  var img = document.createElement('img');
                  img.src = reader.result;
                  document.querySelector('#loves').appendChild(img);
              })
           }
           function uploadFile(){
              var form = new FormData();
              form.append(tmp.name,tmp);
              var xhr = new XMLHttpRequest();
              xhr.open('POST','http://127.0.0.1:1337/upload',true);
              var progress = document.querySelector('progress');
              xhr.addEventListener('progress',function(e){
                 if(e.lengthComputable){
                    progress.value = Math.round((e.loaded/e.total)*100);
                 }
              });
              xhr.addEventListener('load',function(e){
                 console.log(this.response);
              })
              xhr.send(form);
           }
           document.querySelector('#upload').addEventListener('click',uploadFile);
        </script>
    </body>
</html>

這裏代碼基本完成要求,說明以下:javascript

  • 拖動添加,須要阻止默認行爲,不然瀏覽器會嘗試打開文件。若是是拖動事件,經過e.dataTransfer.files獲取文件列表,若是經過<input type="file" multiple>須要監聽change事件,經過e.target.files獲取文件列表。
  • 文件預覽 FileReader不知道是否是HTML5標準,可是現代瀏覽器基本上都支持,並且須要瀏覽器支持data-url schema,firefox跟chrome提供的快捷方法window.URL.createObjectURL(),window.webkitURL.createObjectURL()返回的是一個blob:***的二進制流,也是能夠用的,但不清楚原理。
  • 文件上傳進度監控,XHR2提供progress事件用於檢測上傳狀態,兩個屬性e.total,e.loaded總大小和已上傳大小。
function shortcut(e){
   var images = e.dataTransfer.files;
   var img = document.createElement('img');
   img.src = window.webkitURL.createObjectURL(images[0]);
   document.querySelector('#loves').appendChild(img);        
}

後臺使用nodejs Express框架編寫html

/**
 * Created by Administrator on 14-2-5.
 */
var express =require('express');
var app = express();
app.post('/upload',
     express.bodyParser({ keepExtensions: true, uploadDir: __dirname +  '/static/upload' }),
    uploadSolve);
app.use(app.router);
app.use(express.static(__dirname + '/static'));
app.listen(1337);
function uploadSolve(req,res,next){
    res.status(200);
}

沒有任何安全防禦的操做,僅基礎的文件保存功能。java

疑問請聯繫QQ:491229492

相關文章
相關標籤/搜索