HTML拖放 - 如何设置*传出*拖动的文件名(到桌面)

14

我正在尝试让用户从网页浏览器拖动图标到桌面时创建一个文本文件。我已经处理好了内容部分,但是我无法设置文件名。我尝试改变 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/


我已经掌握了内容部分。你能创建一个 stacksnippets 或 plnkr(http://plnkr.co)来演示吗? - guest271314
@guest271314 上面的代码正是这样做的(拖放到桌面,创建一个文件)。我会添加一个 Plunker 链接。 - ffxsam
1
在plnkr上将元素拖到桌面上不会创建文件,只有将元素拖到文件管理器中才会创建指向文件的链接。请参见https://dev59.com/tm035IYBdhLWcg3wcvmS?rq=1#comment53385290_5416795。虽然使用这种方法http://stackoverflow.com/questions/29343897/drag-file-in-data-uri-format-from-browser-to-desktop,您可以通过设置例如被拖动到文件管理器的<a>元素的.innerHTML来设置链接到文件名。 - guest271314
你考虑过使用put_file_contents或fwrite&fopen吗?你可以用PHP编写脚本,并使用AJAX调用它,因为javascript与本地或服务器文件无关(它不适合服务器端)。 - The Bumpaster
1
@TheBumpaster 这听起来像是服务器端代码。 - ffxsam
@guest271314 请尽快发布答案(悬赏期即将结束)- 您的链接(第二个链接)指引我朝着正确的方向至少在Chrome中使其工作。 - ffxsam
4个回答

2
根据这个MDN页面(强调是我的)

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

因此,如果您不是编写浏览器扩展程序,则无法执行此操作,并将收到安全错误

当您将某些数据拖到桌面时,会由您的操作系统处理(我的会将其转换为一些.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中不会出现此问题。这真是太遗憾了。

0
你可以使用 .innerHTML 属性来设置链接文件的名称,该属性适用于 <a> 元素。
<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操作系统的文件管理器中,从而创建了一个Link to file.txt

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

另请参阅从浏览器以Data URI格式将文件拖到桌面


-3

你可以编写

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

没有冒犯他的意思,但我认为Sandip需要学习JavaScript。 ;) - ffxsam
@ffxsam:你能告诉我哪里出了问题,这样我就可以纠正我的错误了。 - Sandip Tajne
1
当然,event.dataTransfer.setData 是一个方法。你正在设置一个方法来等于其他东西(顺便说一句,这似乎是有效的 JS 句法,但我以前从未见过)。 - ffxsam

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接