能否请我提供一个HTML5 文件拖放实现的良好工作示例？如果从外部应用程序（Windows 资源管理器）拖放到浏览器窗口，源代码应该可以工作。它应该适用于尽可能多的浏览器。
我想要求一个有很好解释的示例代码。我不想使用第三方库，因为我需要根据自己的需要修改代码。代码应基于HTML5 和 JavaScript。我不想使用 JQuery。
我花了一整天的时间寻找好的材料来源，但令人惊讶的是，我没有找到任何好的材料。我发现的示例适用于 Mozilla，但不适用于 Chrome。
问问题
78762 次
4 回答
98
这是一个非常简单的例子。它显示一个红色方块。如果您将图像拖到红色方块上，它会将其附加到正文中。我已经确认它可以在 IE11、Chrome 38 和 Firefox 32 中运行。有关更详细的说明，请参阅Html5Rocks文章。
var dropZone = document.getElementById('dropZone');
// Optional. Show the copy icon when dragging over. Seems to only work for chrome.
dropZone.addEventListener('dragover', function(e) {
e.stopPropagation();
e.preventDefault();
e.dataTransfer.dropEffect = 'copy';
});
// Get file data on drop
dropZone.addEventListener('drop', function(e) {
e.stopPropagation();
e.preventDefault();
var files = e.dataTransfer.files; // Array of all files
for (var i=0, file; file=files[i]; i++) {
if (file.type.match(/image.*/)) {
var reader = new FileReader();
reader.onload = function(e2) {
// finished reading file data.
var img = document.createElement('img');
img.src= e2.target.result;
document.body.appendChild(img);
}
reader.readAsDataURL(file); // start reading the file data.
}
}
});<div id="dropZone" style="width: 100px; height: 100px; background-color: red"></div>于 2014-10-27T03:17:38.237 回答
32
接受的答案为这个主题提供了一个很好的链接；但是，根据 SO 规则，应避免纯链接答案，因为链接可能随时失效。出于这个原因，我花时间为未来的读者总结了链接的内容。
入门
在实施将文件上传到您的网站的方法之前，您应该确保您选择支持的浏览器能够完全支持File API。您可以使用下面的 Javascript 片段快速测试：
// Check for the various File API support.
if (window.File && window.FileReader && window.FileList && window.Blob) {
// Great success! All the File APIs are supported.
} else {
alert('The File APIs are not fully supported in this browser.');
}
当然，您可以修改上面的代码段以满足您的需求。
表单输入
上传文件最常用的方法是使用标准<input type="file">元素。JavaScript 将选定File对象的列表作为FileList.
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// files is a FileList of File objects. List some properties.
var output = [];
for (var i = 0, f; f = files[i]; i++) {
output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
f.size, ' bytes, last modified: ',
f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
'</li>');
}
document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>拖放
对上面的代码片段进行简单的修改允许我们提供拖放支持。
function handleFileSelect(evt) {
evt.stopPropagation();
evt.preventDefault();
var files = evt.dataTransfer.files; // FileList object.
// files is a FileList of File objects. List some properties.
var output = [];
for (var i = 0, f; f = files[i]; i++) {
output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
f.size, ' bytes, last modified: ',
f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
'</li>');
}
document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}
function handleDragOver(evt) {
evt.stopPropagation();
evt.preventDefault();
evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
}
// Setup the dnd listeners.
var dropZone = document.getElementById('drop_zone');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect, false);<div id="drop_zone">Drop files here</div>
<output id="list"></output>读取文件
现在您已经获得了对 的引用File，您可以实例化 aFileReader以将其内容读入内存。当加载完成时，该onload事件被触发，其result属性可用于访问文件数据。随意查看参考，FileReader以涵盖读取文件的四个可用选项。
下面的示例从用户的选择中过滤掉图像，调用reader.readAsDataURL()文件，并通过将src属性设置为数据 URL 来呈现缩略图。
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
var span = document.createElement('span');
span.innerHTML = ['<img class="thumb" src="', e.target.result,
'" title="', escape(theFile.name), '"/>'].join('');
document.getElementById('list').insertBefore(span, null);
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);.thumb {
height: 75px;
border: 1px solid #000;
margin: 10px 5px 0 0;
}<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>切片
在某些情况下，将整个文件读入内存并不是最好的选择。例如，假设您想编写一个异步文件上传器。加快上传速度的一种可能方法是以单独的字节范围块读取和发送文件。然后，服务器组件将负责以正确的顺序重建文件内容。
以下示例演示了读取文件的块。值得注意的是，它使用onloadend并检查了evt.target.readyState而不是使用onload事件。
function readBlob(opt_startByte, opt_stopByte) {
var files = document.getElementById('files').files;
if (!files.length) {
alert('Please select a file!');
return;
}
var file = files[0];
var start = parseInt(opt_startByte) || 0;
var stop = parseInt(opt_stopByte) || file.size - 1;
var reader = new FileReader();
// If we use onloadend, we need to check the readyState.
reader.onloadend = function(evt) {
if (evt.target.readyState == FileReader.DONE) { // DONE == 2
document.getElementById('byte_content').textContent = evt.target.result;
document.getElementById('byte_range').textContent =
['Read bytes: ', start + 1, ' - ', stop + 1,
' of ', file.size, ' byte file'].join('');
}
};
var blob = file.slice(start, stop + 1);
reader.readAsBinaryString(blob);
}
document.querySelector('.readBytesButtons').addEventListener('click', function(evt) {
if (evt.target.tagName.toLowerCase() == 'button') {
var startByte = evt.target.getAttribute('data-startbyte');
var endByte = evt.target.getAttribute('data-endbyte');
readBlob(startByte, endByte);
}
}, false);#byte_content {
margin: 5px 0;
max-height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
#byte_range { margin-top: 5px; }<input type="file" id="files" name="file" /> Read bytes:
<span class="readBytesButtons">
<button data-startbyte="0" data-endbyte="4">1-5</button>
<button data-startbyte="5" data-endbyte="14">6-15</button>
<button data-startbyte="6" data-endbyte="7">7-8</button>
<button>entire file</button>
</span>
<div id="byte_range"></div>
<div id="byte_content"></div>监控进度
使用异步事件处理时，我们免费获得的好处之一是能够监控文件读取的进度；对于大文件、捕获错误和确定读取何时完成很有用。
和事件可用于监视读取的进度onloadstart。onprogress
下面的示例演示了显示进度条以监控读取状态。要查看正在运行的进度指示器，请尝试使用大文件或远程驱动器中的文件。
var reader;
var progress = document.querySelector('.percent');
function abortRead() {
reader.abort();
}
function errorHandler(evt) {
switch(evt.target.error.code) {
case evt.target.error.NOT_FOUND_ERR:
alert('File Not Found!');
break;
case evt.target.error.NOT_READABLE_ERR:
alert('File is not readable');
break;
case evt.target.error.ABORT_ERR:
break; // noop
default:
alert('An error occurred reading this file.');
};
}
function updateProgress(evt) {
// evt is an ProgressEvent.
if (evt.lengthComputable) {
var percentLoaded = Math.round((evt.loaded / evt.total) * 100);
// Increase the progress bar length.
if (percentLoaded < 100) {
progress.style.width = percentLoaded + '%';
progress.textContent = percentLoaded + '%';
}
}
}
function handleFileSelect(evt) {
// Reset progress indicator on new file selection.
progress.style.width = '0%';
progress.textContent = '0%';
reader = new FileReader();
reader.onerror = errorHandler;
reader.onprogress = updateProgress;
reader.onabort = function(e) {
alert('File read cancelled');
};
reader.onloadstart = function(e) {
document.getElementById('progress_bar').className = 'loading';
};
reader.onload = function(e) {
// Ensure that the progress bar displays 100% at the end.
progress.style.width = '100%';
progress.textContent = '100%';
setTimeout("document.getElementById('progress_bar').className='';", 2000);
}
// Read in the image file as a binary string.
reader.readAsBinaryString(evt.target.files[0]);
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);#progress_bar {
margin: 10px 0;
padding: 3px;
border: 1px solid #000;
font-size: 14px;
clear: both;
opacity: 0;
-moz-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
-webkit-transition: opacity 1s linear;
}
#progress_bar.loading {
opacity: 1.0;
}
#progress_bar .percent {
background-color: #99ccff;
height: auto;
width: 0;
}<input type="file" id="files" name="file" />
<button onclick="abortRead();">Cancel read</button>
<div id="progress_bar"><div class="percent">0%</div></div>于 2019-04-08T15:20:59.930 回答
4
查看 ondragover 事件。您可以简单地将 div 的内部隐藏起来，直到 ondragover 事件触发一个函数，该函数将在其中显示 div，从而让用户拖放文件。有一个 onchange 声明可以让你在一个文件被添加到输入时自动调用一个函数（比如上传）。确保输入允许多个文件，因为您无法控制它们将尝试拖动到浏览器中的数量。
于 2012-04-28T07:27:52.927 回答
0
这种技术效果很好，但是如果您想要一个二进制 blob 而不仅仅是将拖动的图像放在 html img 元素中，您将需要使用 'fetch' 函数两次。
于 2022-02-01T12:53:35.827 回答