HTML5: перетащите сгенерированный JS файл

Question

У меня такое чувство, что проблемы безопасности могут не допустить этого, но возможно ли сгенерировать файл с помощью JavaScript и позволить пользователю перетащить его на рабочий стол (или в файловую систему)?

Следующий код перетаскиваетсяфайл с сервера

files[0].addEventListener("dragstart",function(evt){
    evt.dataTransfer.setData("DownloadURL", "application/octet-stream:Eadui2.ttf:http://thecssninja.come/demo/gmail_dragout/Eadui.ttf");
},false);

И с помощью приведенного ниже кода я могу создать файл и загрузить его, но я не могу задать имя файла или позволить пользователю выбрать местоположение.

var uriContent = "data:application/octet-stream," + encodeURIComponent(JSON.stringify(map));
location.href = uriContent;

В идеале я бы хотел волшебную комбинацию обоих.

Answer 1

следующий код в настоящее время работает только в Chrome:

// generate downloadable URL, file name here will not affect stored file
var url = URL.createObjectURL(new File([JSON.stringify(map)], 'file_name.txt'));
// note that any draggable element may be used instead of files[0]
// since JSON.stringify returns a string, we use 'text' type in setData
files[0].addEventListener("dragstart", function(evt) {
  evt.dataTransfer.setData("DownloadURL", "text:file_name.txt:" + url);
}, false);

теперь, перетаскивая наш элемент files [0] из браузера на рабочий стол или в файловую систему, сохранится там текстовый файл с именем file_name.txt.

Не стесняйтесь выбирать другое имя файла:)

Answer 2

Это возможно только для Chrome, и даже в Chrome вы не можете указать местоположение.Если использовать только Chrome можно, у вас будут следующие опции:

1. Придерживайтесь Drag n 'Drop, как в учебнике CSS Ninja, тогда вам следует попробовать ответ Бена.encodeURIComponent - это один из способов, но если у вас есть файл, сгенерированный с использованием BlobBuilder, вы можете использовать window.webkitURL.createObjectURL(), чтобы получить URL файла.Вы также можете попробовать использовать FileWriter() с requestFileSystem(TEMPORARY, ...).

2. Chrome поддерживает атрибут download для тегов привязки, так что вы можете иметь обычную ссылку для нажатия пользователем (перетаскивание также работает):

   <a href="#your_url" download="filename.ext">Download</a>

3. Для кросс-браузерной поддержки я предлагаю Downloadify .

Answer 3

Вы можете попробовать отправить его на сервер, сохранить файл, проверить возвращаемое значение и запустить функцию загрузки файла, а затем файл сервера, который удаляет файл с сервера.

как-то так (с jQuery)

$.ajax({
  url: 'saveFile.php',
  method: 'post',
  data: {
     Filedata: data// file data variable
  },
  success: function(d) {
    // save file function, where d is the filename
  }
})

PHP: $ filename =; // генерируем имя файла file_put_contents ($ filename, $ _POST ['Filedata']); echo $ filename;

Очевидно, что это еще не все, но это должны быть основы