html5文件上传预览

function DragUploadFile(d) {
    this.dom = document.getElementById(d); //拖拽的Dom
    this.FileType; //上传文件类型限制
    this.FileTypeNoMsg; //上传文件限制说明
    this.imgCallback; //获取文件成功 回调方法
    this.AjaxPath; //文件上传路径
    this.AjaxCallback; //文件上传完成 回调方法
    //阻止浏览器默认事件
    document.addEventListener("dragleave",
    function(e) {
        e.preventDefault();
    },
    false);
    document.addEventListener("drop",
    function(e) {
        e.preventDefault();
    },
    false);
    document.addEventListener("dragenter",
    function(e) {
        e.preventDefault();
    },
    false);
    document.addEventListener("dragover",
    function(e) {
        e.preventDefault();
    },
    false);
}

//设置完毕加载绑定
DragUploadFile.prototype.Load = function() {
    
    var dom = this.dom;
    var FileType = this.FileType;
    var FileTypeNoMsg = this.FileTypeNoMsg;
    var Callback = this.Callback;
    var AjaxPath = this.AjaxPath;
    var imgCallback = this.imgCallback;
    var AjaxCallback = this.AjaxCallback;
    dom.addEventListener("drop",
    function(e) {
        e.preventDefault();
        var fileList = e.dataTransfer.files; //获取文件列表
        if (fileList.length == 0) {
            return; //没有文件返回
        }
        var ifile; //文件对象
        //检查文件类型
        if (FileType != null) {
            if (fileList[0].type.indexOf(FileType) > -1) {
                ifile = window.webkitUrl?window.webkitUrl.createObjectUrl(fileList[0]):window.URL.createObjectURL(fileList[0]); 
            } else {
                alert(FileTypeNoMsg);
                return;
            }
        }
        if (imgCallback != null) {
            imgCallback(ifile);
        }
        if (AjaxPath != null) {
            //上传
            UpAjax = new XMLHttpRequest();
            UpAjax.open("post", AjaxPath, true);
            UpAjax.setRequestHeader("X-Requested-With", "XMLHttpRequest");

            var postData = new FormData();
            postData.append("pic", fileList[0]);
            UpAjax.send(postData);
            UpAjax.onreadystatechange = function() {
                if (UpAjax.status == 200 && UpAjax.readyState == 4) { //完成
                    //返回数据
                    var retVla = UpAjax.responseText;
                    //eval(retF + "(‘"+retVla+"‘)");
                    AjaxCallback(retVla);
                }
            }
        }

    },
    false);
}

//调用
//定义变量 盒子id
var drag = new DragUploadFile("Drag");
//设置接收文件类型，和错误提示 可以不进行设置，默认为所有类型
drag.FileType="video";
drag.FileTypeNoMsg="请上传视频";
drag.imgCallback=function(file){};//设置获取到文件回调方法
//drag.AjaxPath="/Default/UpFile";//设置ajax文件上传地址
//drag.AjaxPath=function(data){alert(data)};//设置上传回调方法
//设置完毕，加载
drag.Load();