@bornkiller 2014-07-15T02:10:58.000000Z 字数 2490 阅读 2382

浏览器图片预览

javascript

图片拖动添加，实时预览以下代码就可以实现。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>

这里代码基本完成要求，说明如下：

拖动添加，需要阻止默认行为，否则浏览器会尝试打开文件。如果是拖动事件，通过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框架编写

/**
 * 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);
}

没有任何安全防护的操作，仅基础的文件保存功能。

浏览器图片预览

疑问请联系QQ:491229492

内容目录