HTML 拖放 - 如何设置 *outgoing* 拖动的文件名（到桌面）答案

【问题标题】：HTML drag/drop - how to set the filename of an *outgoing* drag (to desktop)HTML 拖放 - 如何设置 *outgoing* 拖动的文件名（到桌面）
【发布时间】：2016-05-31 23:14:43
【问题描述】：

我正在尝试让用户可以将图标从网络浏览器拖到他们的桌面，并创建一个文本文件。我已经把内容部分记下来了，但我不知道如何设置文件名。我试过改变dataTransfer.files，但那是只读的。我不确定如何实现这一点。

class CrashReport extends React.Component {
  dragStart(event) {
    const dat = {name: 'test!', crashDate: new Date()};

    event.dataTransfer.name = 'tmp.txt'; // bad
    event.dataTransfer.setData('text/plain', JSON.stringify(dat, null, 2));
    console.log(event.dataTransfer);
  }

  render() {
    return <div draggable onDragStart={this.dragStart.bind(this)}>
      Drag This
    </div>
  }
}

http://embed.plnkr.co/ar3deFFvedcWhVfwt6c6/

【问题讨论】：

“我已经把内容部分写下来了”你能创建一个 stacksn-ps 或 plnkr plnkr.co 来演示吗？
@guest271314 上面的代码正是这样做的（拖放到桌面，创建一个文件）。我将添加一个 Plunker 链接。
在plnkr这里没有通过拖拽到桌面来创建文件，只有在将plnkr的元素拖到文件管理器时才会创建文件的链接；见stackoverflow.com/questions/5416748/…。虽然使用这种方法stackoverflow.com/questions/29343897/…，但您可以通过设置.innerHTML 来设置文件名的链接，例如拖动到文件管理器的<a> 元素。
您是否考虑过使用 put_file_contents 或 fwrite & fopen ？您可以用 PHP 编写脚本并使用 AJAX 调用它，因为 javascript 与本地或服务器文件无关（它不是服务器端友好的）
@TheBumpaster 这听起来像是服务器端代码。

标签： javascript reactjs

【解决方案1】：

据此MDN page _{（强调我的）}

使用application/x-moz-file 类型和nsIFile 对象的数据值拖动本地文件。 非特权网页无法检索或修改此类数据。

因此，如果您不编写浏览器扩展程序，则不能，并且会收到Security Error。

当您将一些数据拖到桌面时会发生什么取决于您的操作系统（我将其转换为某种.textClipping 文件格式）。

【讨论】：

【解决方案2】：

啊！以下在 Chrome 中运行良好：

const jsonData = JSON.stringify(dat);
event.dataTransfer.setData("DownloadURL", "application/json:crashdump.json:data:application/json;charset=utf-8," + jsonData);

虽然不是在 Safari 或 Firefox 中。真是个大坏蛋。

【讨论】：

【解决方案3】：

您可以使用<a> 元素的.innerHTML 来设置链接文件的名称

<div class="container">
  <h1>Drag out any of these links to your dekstop</h1>
  <a href="file.txt" id="dragout" class="dragme" draggable="true">file.txt</a>    
</div>

其中file.txt 是拖入*nix os 文件管理器的本地文件，它会创建Link to file.txt。

plnkrhttp://plnkr.co/edit/pif0ZraAn9RbJI8w2z0w?p=preview

另见Drag File in Data URI format from Browser to Desktop

【讨论】：

【解决方案4】：

你可以写

event.dataTransfer.setData = ('text', 'tmp.txt');

【讨论】：

无意冒犯他，但我认为 Sandip 需要学习 JavaScript。 ;)
@ffxsam : 你能告诉我这有什么问题，以便我纠正我的错误。
当然。 event.dataTransfer.setData 是一种方法。您正在设置一个方法来等于其他东西（顺便说一句，这显然是有效的 JS 语法，但我以前从未见过）。