Drag & Drop and File Reader

参考 : 

http://www.html5rocks.com/zh/tutorials/file/dndfiles/

http://blog.csdn.net/rnzuozuo/article/details/25295899

http://www.tutorialspoint.com/html5/html5_drag_drop.htm

 

本篇只作为个人参考 

 

FIle Reader

method
abort()  停止读
readAsText(file,"utf-8") , 第2参数是指定解码格式，常用于读取一些 txt 文本等
readAsBinaryString(file) , 2进制， 可以用于ajax提交到后端
readAsDataURL(file) , 好像是base64 , 可以用于在本地显示图片 

event
onabort 中断时触发
onerror 出错时触发
onload 文件读取成功完成时触发
onloadend 读取完成触发，无论成功或失败
onloadstart 读取开始时触发
onprogress 读取中

 

//display img in local 
//2 way : FileReader and createObjectURL
document.getElementById("upload").addEventListener("change", function (e) {
    var inputFile = e.target;
    var files = G.toArray(inputFile.files);
    var file = files[0];
            
    //note : minimum need ie10
    //createObjectURL to display img on local            
    var URL = window.URL || window.webkitURL;
    var img = new Image();
    img.onload = function (e) {                
        window.URL.revokeObjectURL(this.src);
        document.body.appendChild(this);
    }
    img.src = URL.createObjectURL(file); 
          
    //note : minimum need ie10
    var reader = new FileReader();
    reader.onload = function (e) {               
        var img = new Image();
        img.src = e.target.result;
        document.body.appendChild(img);
    }
    reader.readAsDataURL(file);
}, false);

 

Drag & Drop 

div 要可以drag , 就放一个 draggable="true"的属性,

div 要可以drop , 就 addEventListener dragover for preventDefault(),stopPropagation() then addEventListener drop 

传输时value 只能是 string 类型
"event" 在传输的时候不是同一个引用

dataTransfer.getData 是可以跨游览器的

 

    document.getElementById("drop").addEventListener("dragover", function (e) {
        e.stopPropagation();
        e.preventDefault();
        log("over");
    }, false);
    document.getElementById("drop").addEventListener("dragenter", function (e) {
        e.stopPropagation();
        e.preventDefault();
        log("enter");
    }, false);
    document.getElementById("drop").addEventListener("drop", function (e) {
        //var files = e.dataTransfer.files; //if drop a file from window. like use file update 
        //log(dataTransfer.types); //if is file = "Files" , else DOMStringList
        e.dataTransfer.dropEffect = 'move'; //copy, link, and move
        var data = e.dataTransfer.getData("key");
        e.preventDefault();
        log("drop!");
    }, false);
    document.getElementById("drag").addEventListener("dragstart", function (e) {
        e.dataTransfer.setData("key", "must string");
        e.dataTransfer.effectAllowed = 'copyLink'; //none, copy, copyLink, copyMove, link, linkMove, move, all and uninitialized.    
        var specifiedImage = document.getElementById("liushishi");
        e.dataTransfer.setDragImage(specifiedImage, 100, 100); //para2,para3 is mouse position x,y in the target element
        //e.dataTransfer.addElement(specifiedImage); //this method is same with setDragImage , better use setDragImage , because can set x,y
        log("drag");
    }, false);