GSpace

var ddupload = ddupload || function(){};  

container = document.getElementsByName("album");
savedBackColor = container.style.backgroundColor;
container.addEventListener("dragenter", function(event){
    event.stopPropagation();event.preventDefault();  //跳过浏览器的默认处理
    container.style.backgroundColor = "red";
}, false);
container.addEventListener("dragover", function(event){
//理论上不需要处理这个事件,但实际上不行,否则浏览器还是会调用默认事件
    event.stopPropagation();event.preventDefault();
    container.style.backgroundColor = "red";
}, false);
container.addEventListener("dragleave", function(event){
    event.stopPropagation();event.preventDefault();
    container.style.backgroundColor = savedBackColor;
}, false);
container.addEventListener("drop", function(event){
    event.stopPropagation();event.preventDefault();
    container.style.backgroundColor = savedBackColor;
    //drop事件,在这里处理拖进来的文件
        // files = event.dataTransfer.files; 可以得到文件列表
        ddupload.processdroppedfile(event);
}, false);

ddupload.filelimit = 8*1024*1024;
ddupload.filetypes = "jpg,png,gif,jpeg",
ddupload.processdroppedfile = function (event) {
    var files = event.dataTransfer.files;  //得到文件列表
    for (var i = 0; i < files.length; i++) {
        if(files[i].size < ddupload.filelimit) {
            var  file = files[i];
            /* check file ext */
            filename = file.name.split('.');
            ext = filename[filename.length-1];

            if ( ddupload.filetypes.indexOf(ext) >= 0 )
            {
                localreader = new FileReader();
                localreader.file = file;
                localreader.onload = function(event){
                     //文件读取完成的回调函数, 可以在这里处理上传
                     f = event.target.file; //得到文件对象
                     data = event.target.result; //得到文件内容(raw binary data )
                     //上传文件内容
                     ddupload.processXHR(f, data);
                };
                localreader.readAsBinaryString(file);
        }
        else {
            alert("file size exceed!");
        } /*end if*/
    } /*end for*/
};

//这个是状态回调函数,详细内容请看MDC的文档
ddupload.on_XHR_state_change_handler = function(xhr, evt) {
    if (xhr.readyState == 4) {
        if(xhr.status == 200) {
            //上传成功
        } else {
            //失败处理  :(
        }
    }
};

ddupload.processXHR = function (file, bin) {
    var xhr = new XMLHttpRequest(),
         xhrupload = xhr.upload;

        xhrupload.addEventListener("progress", function(event) {
            if (event.lengthComputable) {
                var percentage = Math.round((event.loaded * 100) / event.total);
                //处理上传进度
            }
        }, false);

    xhr.onreadystatechange = function (evt) {
        evt.file = file;
        ddupload.on_XHR_state_change_handler(xhr, evt);
    };
    xhr.open("POST", "http://localhost/upload/"); //指定POST的URL
    xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
    xhr.setRequestHeader('Content-Disposition',
                                  "{'filename':file.name}");  //附带一些自定义数据
    if(xhr.sendAsBinary) xhr.sendAsBinary(bin);  //firefox支持sendAsBinary
    else xhr.send(file);  //chrome(8.0.552.215 beta) 只支持send
};

<script src='ddupload.js'></script>
<script type='text/javascript'>
var postdata_handler = function(file, container)
{   /* post data in 'Content-Disposition' */
    return '{"albumid":"'+ container.id +'","filename":"'+file.name+'"}';
};
var loadedhandler = function(reader_event, container)
{   /* handler on local file loaded */
    console.log(reader_event.target.file.name);
};
var progresshandler = function(file, percentage, container)
{   /* handler on upload progress */
    console.log(percentage);
};
var onupload_success_handler = function(xhr, evt, container)
{   /* handler on success upload(status = 200) */
     console.log(xhr.responseText);
};
var onupload_success_handler = function(xhr, evt, container)
{   /* handler on failed upload(status != 200) */
    console.log(xhr.responseText);
};

window.onload = function(evt) {  //绑定onload
            ddupload.setup('dragtohere', { //这里是ddupload的配置
                    filetypes : "jpg,png,gif,jpeg",
                    filelimit : 8*1024*1024,
                    posturl : "http://localhost:8080/admin/uploadv2/",
                    postdata_handler : postdata_handler,
                    loadedhandler : loadedhandler,
                    progresshandler : progresshandler,
                    onupload_success_handler : onupload_success_handler,
                    onupload_failed_handler: onupload_failed_handler,
                    });
};
</script>