Zar*_*rel 68 javascript ajax html5
拖放文件上传可以在Firefox 3.6中完成.
谷歌搜索html5拖放文件上传-gmail提供的内容如下:
所有这些指南都使用FileReader(或者Firefox 3.6已被弃用getAsBinary,其他浏览器也不支持).
但是,谷歌最近发布了一个Gmail更新,允许在Chromium和Firefox中上传文件,而Chromium则没有FileReader.我每晚都在使用最新的Chromium,它可以拖放上传文件,但不支持FileReader.
我见过有人提到可以通过拖动到拖放上传来实现拖放上传<input type="file" />,但是一次只能支持一个文件,而Gmail的上传器可以处理拖动到它上面的多个文件,所以这显然不是它们的内容这样做.
所以问题是,他们是如何做到的？你如何支持Chromium进行HTML5文件上传？另外,你能支持Safari吗？
Zar*_*rel 33
警告:这是适用于旧版Safari和Chrome的兼容性代码.现代浏览器都支持FileReader API; 这是一个教程:https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications
此代码现在仅在由于某种原因您需要支持Safari 5及更早版本或Chrome 6及更早版本时才有用.
使用<input type="file" multiple="multiple" />如下:
<form method="post" enctype="multipart/form-data" id="uploadform">
<input type="file" name="dragupload[]" multiple="multiple"
onchange="if (this.value) document.getElementById('uploadform').submit();" />
</form>
输入元素可以设置为具有opacity: 0和定位(绝对)在接受上载的元素上.整个表单可以放在iframefor"Ajax"之类的行为中.并且上传元素可以是隐藏的图层,直到将某些内容拖过它.
这样的iframe看起来像:
<script>
<!--
var entered = 0;
-->
</script>
<body ondragenter="entered++;document.getElementById('uploadelement').style.display='block'" ondragleave="entered--;if (!entered) document.getElementById('uploadelement').style.display='none'">
<form method="post" enctype="multipart/form-data" id="uploadform">
Things can be dragged and dropped here!
<input type="file" id="uploadelement" name="dragupload[]" multiple="multiple" onchange="if (this.value) { document.getElementById('uploadform').submit(); }" style="display:none;position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;" />
</form>
</body>
这应该仅在检测到Safari或Chrome时执行(因为其他浏览器不支持拖放到<input type="file" />元素上),并且可以与dropFirefox 3.6+ 的HTML5 事件结合使用.
我不知道这是否是Gmail使用的方法,但它肯定也有效.
Arn*_*met 13
您可能对更符合技术和浏览器的内容感兴趣.
在我看来,Plupload做得很好,支持以下功能:
对于以下大多数技术:
是的,自2010.05.27起,它支持在Chrome测试版上运行HTML5的拖放功能.
Cas*_*Chu 10
经过很多很多侦探工作之后,我在Chrome上工作了一些东西.这仅适用于Chrome.在Safari上,它冻结了.在Firefox上,它不会让我删除该文件.IE会打开删除的文件.即使在Chrome中,拖放只能运行一次,出于某种原因,之后您必须刷新页面.(可能的原因是事件处理程序出了问题.)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
window.onload = function () {
var div = document.getElementById('div');
div.ondragenter = div.ondragover = function (e) {
e.preventDefault();
e.dataTransfer.dropEffect = 'copy';
return false;
}
div.ondrop = function (e) {
for (var i = 0; i < e.dataTransfer.files.length; i++) { // e.dataTransfer is a DataTransfer object (https://developer.mozilla.org/En/DragDrop/DataTransfer), e.dataTransfer.files is a FileList object (https://developer.mozilla.org/en/DOM/FileList)
var file = e.dataTransfer.files[i]; // file is a File object (https://developer.mozilla.org/en/DOM/File)
var xhr = new XMLHttpRequest;
xhr.open('post', 'handler.php', true);
xhr.onreadystatechange = function () {
if (this.readyState != 4)
return;
document.body.innerHTML += '<pre>' + this.responseText + '</pre>';
}
xhr.setRequestHeader('Content-Type', 'multipart/form-data');
xhr.setRequestHeader('X-File-Name', file.fileName);
xhr.setRequestHeader('X-File-Size', file.fileSize);
xhr.send(file); // For some reason sending the actual File object in Chrome works?
}
e.preventDefault();
return false;
}
}
</script>
</head>
<body>
<div id="div" style="width: 100%; height: 200px; border: 1px solid blue">Drop here</div>
</body>
</html>
handler.php:
// This is not a true file upload. Instead, it sends the raw data directly.
echo htmlentities(file_get_contents('php://input'));
| 归档时间： |
|
| 查看次数： |
67885 次 |
| 最近记录： |