DataTransferItem.getAsFile()

翻译不完整。 请帮助我们翻译这篇文章!

如果DataTransferItem是一个文件, 那 DataTransferItem.getAsFile()  方法将返回拖拽项数据的 File 对象. 如果拖拽项的数据不是一个文件,则返回 null.

语法

File = DataTransferItem.getAsFile();

参数

无.

返回值

File
如果拖拽项的对象是一个文件, 则返回 File 对象; 否则返回 null .

例子

下面这个例子中使用 getAsFile() 。放在 drop 事件处理里面.

function drop_handler(ev) {
 console.log("Drop");
 ev.preventDefault();
 var data = event.dataTransfer.items;
 for (var i = 0; i < data.length; i += 1) {
   if ((data[i].kind == 'string') && 
       (data[i].type.match('^text/plain'))) {
     // 遍历拖拽项的内容
     data[i].getAsString(function (s){
       ev.target.appendChild(document.getElementById(s)); 
     });
   } else if ((data[i].kind == 'string') && 
              (data[i].type.match('^text/html'))) {
     // 拖拽项的数据是 HTML
     console.log("... Drop: HTML");
   } else if ((data[i].kind == 'string') && 
              (data[i].type.match('^text/uri-list'))) {
     // 拖拽项的数据是URI
     console.log("... Drop: URI");
   } else if ((data[i].kind == 'file') && 
              (data[i].type.match('^image/'))) {
     // 拖拽项的数据是一个图片
     var f = data[i].getAsFile();
     console.log("... Drop: File ");
   }
 }
}

规范

Specification Status Comment
HTML Living Standard
getAsFile()
Living Standard Initial value
HTML 5.1
getAsFile()
Recommendation Snapshot of the HTML WHATWG document

浏览器兼容

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
getAsFileChrome Full support 11Edge Full support 12Firefox Full support 50IE No support NoOpera Full support 12Safari Full support 5.1WebView Android Full support 4Chrome Android Full support 18Firefox Android Full support 50Opera Android No support NoSafari iOS Full support 5Samsung Internet Android Full support 1.0

Legend

Full support  
Full support
No support  
No support

查看更多