html5拖拽2-chrome拖拽下载

  1. 接着上一文章,chrome中实现了文件的拖拽下载,和桌面互动的效果非常好。
    主要要求是在dataTransfer中设定文件的信息,信息需按以下格式:

    'MIMETYPE:文件名:文件URL'
    

    我们可以这样设置文件元素:

    <a id="mp3" 
        href="http://e.com/f.mp3" 
        draggable='true' 
        data-downloadurl="audio/mpeg:f.mp3:http://e.com/f.mp3">you can download this mp3 to desktop in chrome by drag
    </a>
    
  2. 接下来问题是获取自定义属性,即data-*,使用dataset(html5属性)

    var url=document.getElementById("mp3").dataset.downloadurl;
    
  3. 最后就是绑定数据了:

    document.getElementById("mp3").ondragstart=function(e){
                e.dataTransfer.setData('DownloadURL',e.target.dataset.downloadurl);
            };
    

    可以拖动下载到桌面了,记得是在chrome中啊。

如有疑问,请留言或邮件newbvirgil@gmail.com
本文链接 : http://blog.newbmiao.com/2015/02/22/html5-drag-api2-chrome-drag-to-downloa.html