Как сохранить файл на диск с помощью перетаскивания на веб-странице - PullRequest
Новая
       18

Как сохранить файл на диск с помощью перетаскивания на веб-странице

0 голосов
/ 17 июня 2019

Я месяцами пытался перетащить файл в область перетаскивания на веб-странице и сохранить этот файл на диск. Ни один из найденных примеров не сохранил файл.

Код ниже, где я сейчас нахожусь. Я могу получить файл в строке "var file = ev.dataTransfer.items [i] .getAsFile ();" и console.log () показывают правильный тип и имя файла. Я могу использовать JSP, если это помогает, но назначение перетаскиваемого файла для ввода формы type = "file" дает мне ошибку нарушения безопасности. Мне нужно знать, что делать, где у меня "Теперь что? Сохранить файл!" Я поймал основной код из https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop.

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="UTF-8">
<style>
#div1 {
  width: 350px;
  height: 70px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    console.log('File(s) dropped');
    ev.preventDefault();

    if (ev.dataTransfer.items)
    {
        for (var i = 0; i < ev.dataTransfer.items.length; i++)
        {
            if (ev.dataTransfer.items[i].kind === 'file')       // If dropped items aren't files, reject them
            {
                var file = ev.dataTransfer.items[i].getAsFile();

                console.log('type: ' + file.type);
                console.log('file[' + i + '].name = ' + file.name + ", type: " + file.type);
                // Now What? Save File to disk!
            }
        }
    }

    else {
        console.log('dataTransfer');
        for (var i = 0; i < ev.dataTransfer.files.length; i++)
        {
            console.log('... file[' + i + '].name = ' + ev.dataTransfer.files[i].name);
        }
    }
}
</script>
</head>
<body>

<p>Drag some image into the rectangle:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

</body>
</html>

Фактические результаты состоят в том, что операторы console.log () показывают правильный тип и имя файла, но у меня нет информации о том, что делать, чтобы фактически сохранить файл на диск.

1 Ответ

0 голосов
/ 17 июня 2019

Вы не можете сделать это с Javascript из соображений безопасности, если вы не используете NodeJs или другой внутренний язык.

...