如何实现上传拖拽进入浏览器的文件
通过HTML5的文件API ,Firefox、Chrome等浏览器已经支持从操作系统直接拖拽文件进入浏览器,并上传到服务器。
让我们看一下Firefox 是如何使用拖拽上传功能的:
1)首先提供一个区域来放置文件
<div name="image" id="dropbox" style="min-width:300px;min-height:100px;border:3px dashed silver;"></div>
2)然后监听拖拽过程中的dragenter、dragleave、drop等事件
document.addEventListener("dragenter", function(e){ dropbox.style.borderColor = 'gray'; }, false); document.addEventListener("dragleave", function(e){ dropbox.style.borderColor = 'silver'; }, false); dropbox.addEventListener("dragenter", function(e){ dropbox.style.borderColor = 'gray'; dropbox.style.backgroundColor = 'white'; }, false); dropbox.addEventListener("dragleave", function(e){ dropbox.style.backgroundColor = 'transparent'; }, false); dropbox.addEventListener("dragenter", function(e){ e.stopPropagation(); e.preventDefault(); }, false); dropbox.addEventListener("dragover", function(e){ e.stopPropagation(); e.preventDefault(); }, false); dropbox.addEventListener("drop", function(e){ e.stopPropagation(); e.preventDefault(); //如果是获取拖拽进入浏览器的url地址,可以通过var url = e.dataTransfer.getData("text/uri-list")获取到 handleFiles(e.dataTransfer.files); submit.disabled = false; }, false);
其中最主要的是drop事件中用handleFiles()依次处理所有文件
handleFiles = function(files) { for (var i = 0; i < files.length; i++) { var file = files[i]; } }
对于图片类型的文件可以直接读取内容,显示预览图
if (!file.type.match(/image*/)) { continue; } var img = document.createElement("img"); img.classList.add("obj"); img.file = file; preview.appendChild(img); var reader = new FileReader(); reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img); reader.readAsDataURL(file);
接下来就是核心功能:ajax上传。首先新建一个XHR请求
var xhr = new XMLHttpRequest(); xhr.open('post', '/file/upload', true);
监听上传进度和完成事件
xhr.upload.addEventListener("progress", function(e) { if (e.lengthComputable) { var percentage = Math.round((e.loaded * 100) / e.total); img.style.opacity = 1-percentage/100.0; } }, false); xhr.upload.addEventListener("load", function(e){ }, false);
最后把数据模拟成multipart/form-data的格式上传
xhr.setRequestHeader("Content-Type", "multipart/form-data, boundary="+boundary); // simulate a file MIME POST request. xhr.setRequestHeader("Content-Length", fileSize); var body = ''; body += "--" + boundary + "\r\n"; body += "Content-Disposition: form-data; name=\""+dropbox.getAttribute('name')+"\"; filename=\"" + fileName + "\"\r\n"; body += "Content-Type: "+fileType+"\r\n\r\n"; body += fileData + "\r\n"; body += "--" + boundary + "--\r\n"; xhr.sendAsBinary(body);
来源:http://www.cnblogs.com/caonidayecnblogs/archive/2010/09/09/1821925.html
加支付宝好友偷能量挖...