HTML5，JavaScript的：拖放文件从外部窗口（Windows资源管理器）(HTML5, [

我恳请为HTML5文件拖放实现良好的工作的例子吗？如果拖放是从外部应用程序（Windows资源管理器）到浏览器窗口中执行的源代码应该工作。它可以工作在尽可能多的浏览器成为可能。

我想问一下用好解释的示例代码。我不希望使用第三方库，因为我需要根据我的需要修改代码。该代码应基于HTML5和JavaScript。 我不想使用jQuery。

我一整天都在寻找材料的良好来源，但奇怪的是，我没有找到什么好东西。我发现的例子就职于Mozilla的，但Chrome浏览器没有工作。

Answer 1:

这是一个死简单的例子。它显示一个红色方块。如果您在红场拖动图像就其追加到身体。我已经证实了它在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>

Answer 2:

此链接解释了我的漂亮的细节问题：

http://www.html5rocks.com/en/tutorials/file/dndfiles/

Answer 3:

考虑ondragover事件。你可以简单地有一个隐藏一个div的内部，直到ondragover事件触发功能，将显示与在它的股利，从而让用户拖放文件。其在一个onchange声明将让你自动调用一个函数（如上传）当一个文件被添加到输入。请确保输入允许多个文件，如你有超过他们会多少，试图拖到浏览器无法控制。

Answer 4:

该接受的答案提供了一个很好的链接对于这个话题; 然而，每SO规则，纯粹的链接的答案应该避免，因为它们随时都可能消失。出于这个原因，我已总结的链接，未来的读者的内容的时间。

入门

要实现将文件上传到您的网站的方法之前，你应该确保你选择支持的浏览器将能够完全支持文件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 ，你可以实例化FileReader读取其内容到内存中。当负载完成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>