Как преобразовать объект файла в заполненный файл, чтобы я мог отправить его через форму?

Question

Итак, у меня есть файловый объект, который я получил от перетаскивания с рабочего стола.Я пытаюсь заполнить скрытый файл ввода, который я могу выполнить с ним.Как я могу это сделать?

Спасибо!

Answer 1

Есть несколько способов.Вам не обязательно вводить скрытый файл.

1. Использовать xhr.send(file): http://www.html5rocks.com/en/tutorials/file/xhr2/#toc-send-blob
2. Использовать xhr.send(formData): http://www.html5rocks.com/en/tutorials/file/xhr2/#toc-send-formdata

3. На самом деле используйте скрытый <input type="file">:

   <style>
   #files {
     position: absolute;
     left: 0px;
     top: 0px;
     width: 100%;
     height: 100%;
     opacity: 0.0;
     z-index: 2;
   }
   [type='submit']{
     display: none;
   }
   #drop {
     position: relative;
     margin: auto;
     width: 500px;
     height: 300px;
   }
   </style>
   
   <form action="/upload" method="POST" enctype="multipart/form-data"> 
     <div id="drop"> 
       <div>Drop files here</div> 
       <input id="files" type="file" name="file" multiple> 
     </div> 
     <input type="submit"> 
   </form> 
   
   <script>
   document.querySelector("#files").addEventListener("change", function(e) {
     document.querySelector("[type='submit']").click();
   }, false);
   </script>
   

Ключ к последнему - opacity: 0;height: 100%;width: 100% при вводе файла.

Answer 2

Нашел это:

(File API) Используя вызов FileReader.readAsDataURL(file), каждый раз, когда файл полностью читается, создается новый объект в формате «URL данных» (RFC 2397) и запускается перенос по событию обработчик onloadend для объекта FileReader.

(К вашему сведению: объект «data URL» - это двоичные данные в кодировке Base64 с заданной спецификацией последовательности заголовков символов. Браузеры понимают их.)

(File API) Теперь, когда у нас есть объект «data URL» из события, мы можем делать с ним классные вещи, такие как замена атрибута src тега, чтобы немедленно показать значение на экране ИЛИ загрузить Часть данных в кодировке Base64 на сервер для обработки в виде двоичных данных .

Источник