Sym - 一个用 Java 实现的现代化社区平台 • 源码注册

Pipe - 小而美的开源博客平台 • 体验皮肤
Solo - 一个用 Java 实现的博客系统,为你或你的团队创建个博客吧! • 源码下载
Wide - 一个基于 Web 的 Go 语言 IDE • 教程试用

文件拖拽上传

1. 文件拖拽

不多说了,看代码和注释。貌似 Chrome 和 Firefix 都支持的。

    var dragOver = function (event) {
        // 阻止默认事件
        event.stopPropagation();
        event.preventDefault();

    // 修改样式
    this.className = "xx-over";
};

var dragLeave = function (event) {
    event.stopPropagation();
    event.preventDefault();
    this.className = "xx";
};

var drop = function (event) {
    event.stopPropagation();
    event.preventDefault();

    this.className = "xx";
    var files = event.dataTransfer.files;
    for (var i = 0; i < files.length; i++) {
        // 可在此对文件进行大小和类型的限制
        files[i].type
        files[i].size

        // 正式上传
        uploadFile(files[i]);
    }
};

// 把文件拖拽于 content 容器上,监听拖拽中、拖拽结束、拖拽离开的事件
var content = document.getElementById("XXX");
content.addEventListener("dragover", dragOver, false);
content.addEventListener("dragleave", dragLeave, false);
content.addEventListener("drop", drop, false);</pre>


2. 文件上传
    基础知识准备

  •     XMLHttpRequest 请求
var request = new XMLHttpRequest();  
request.open('GET', 'file:///home/user/file.json', false);   
request.send(null);  

open 参数说明

@param {string} 请求方式: GET, POST, PUT, DELETE

@param {string} 请求地址。注:可以是本地文件哦。

@param {boolean} 同步: false; 异步: true

其余常用属性,在此就不解释,解释也只是翻译而已 ^^

request.onreadystatechange
request.readyState
request.responseText
request.statusText
request.statuse

  • FormData Object
var formElement = document.getElementById("formId");
// 如果没有 form 元素,可以不用传入该参数
var formData = new FormData(formElement);  
formData.append("name", nameValue); 

request.send(formData);

  • 上传进度
    var req = new XMLHttpRequest();  

req.addEventListener("progress", updateProgress, false);  

req.open();  

...  

// progress on transfers from the server to the client (downloads)  
function updateProgress(evt) {  
  if (evt.lengthComputable) {  
    var percentComplete = evt.loaded / evt.total;  
    ...  
  } else {  
    // Unable to compute progress information since the total size is unknown  
  }  
}  </pre>


    实现

var uploadFile = function(file) {
    var loadEnd = function() {
        content.className = "bg loading";
        var request = new XMLHttpRequest();
        request.open('POST', "actionURL", true);

    var formData = new FormData();
    formData.append('upload',file);
    request.send(formData);

    request.onload = function () {
        content.className = "bg";
    };

    request.onprogress = function (evt) {  
        if (evt.lengthComputable) {  
            var percentComplete = evt.loaded / evt.total;    
        } else {  
        // Unable to compute progress information since the total size is unknown  
        }  
    }  
};

var reader = new FileReader();
// Firefox 3.6, WebKit
if(reader.addEventListener) {
    reader.addEventListener('loadend', loadEnd, false);
} else {
    reader.onloadend = loadEnd;
}
reader.readAsBinaryString(file);

};



欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

留下你的脚步