¿Cómo puedo subir archivos de forma asíncrona?

Me gustaría cargar un archivo de forma asincrónica utilizando jQuery. Este es mi HTML:

 <span>File</span> <input type="file" id="file" name="file" size="10"/> <input id="uploadbutton" type="button" value="Upload"/> 

Y aquí está mi código Jquery :

 $(document).ready(function () { $("#uploadbutton").click(function () { var filename = $("#file").val(); $.ajax({ type: "POST", url: "addFile.do", enctype: 'multipart/form-data', data: { file: filename }, success: function () { alert("Data Uploaded: "); } }); }); }); 

En lugar de cargar el archivo, solo obtengo el nombre del archivo. ¿Qué puedo hacer para solucionar este problema?

Solucion actual

Utilizo el complemento de formulario jQuery para subir archivos.

2695
03 окт. puesta por Sergio del Amo 03 oct. 2008-10-03 13:22 '08 a la 1:22 pm 2008-10-03 13:22
@ 33 respuestas
  • 1
  • 2

Con HTML5, puedes subir archivos usando Ajax y jQuery. Además, puede realizar verificaciones de archivos (nombre, tamaño y tipo MIME) o manejar un evento de progreso con una etiqueta de progreso HTML5 (o div). Recientemente tuve que hacer un cargador de archivos, pero no quería usar Flash, iframe o plugins, y después de algunas investigaciones se me ocurrió una solución.

HTML:

 <form enctype="multipart/form-data"> <input name="file" type="file" /> <input type="button" value="Upload" /> </form> <progress></progress> 

Primero, puedes hacer un chequeo si quieres. Por ejemplo, en el archivo onChange evento:

 $(':file').on('change', function() { var file = this.files[0]; if (file.size > 1024) { alert('max upload size is 1k') } // Also see .name, .type }); 

Ahora envíe con el botón Ajax:

 $(':button').on('click', function() { $.ajax({ // Your server script to process the upload url: 'upload.php', type: 'POST', // Form data data: new FormData($('form')[0]), // Tell jQuery not to process data or worry about content-type // You *must* include these options! cache: false, contentType: false, processData: false, // Custom XMLHttpRequest xhr: function() { var myXhr = $.ajaxSettings.xhr(); if (myXhr.upload) { // For handling the progress of the upload myXhr.upload.addEventListener('progress', function(e) { if (e.lengthComputable) { $('progress').attr({ value: e.loaded, max: e.total, }); } } , false); } return myXhr; } }); }); 

Como puede ver, con HTML5 (y algunas investigaciones) la carga de archivos no solo es posible, sino que también es muy simple. Pruebe Google Chrome porque algunos de los componentes HTML5 en los ejemplos no están disponibles en todos los navegadores.

2393
06 янв. La respuesta se da olanod 06 de enero 2012-01-06 16:34 '12 a las 4:34 pm 2012-01-06 16:34

Hay varios complementos ya preparados para descargar archivos jQuery.

La ejecución de este tipo de hacks de arranque no es una experiencia agradable, por lo que a las personas les gusta usar soluciones ya hechas.

Aquí hay algunos:

border=0

Puede buscar más proyectos en NPM (usando "jquery-plugin" como palabra clave) o en Github.

336
15 окт. La respuesta se da alegre 15 oct. 2008-10-15 13:35 '08 a las 13:35 2008-10-15 13:35

Actualización 2017: todavía depende de los navegadores que usan sus datos demográficos.

Es importante comprender que el uso de la nueva API de file HTML5 es que no fue compatible antes de IE 10 . Si el mercado específico al que te diriges tiene una predicción más alta que el promedio de las versiones anteriores de Windows, es posible que no tengas acceso a él.

Desde 2017, aproximadamente el 5% de los navegadores son uno de IE 6, 7, 8 o 9. Si va a una corporación grande (por ejemplo, esta es una herramienta B2B o algo que entrega para capacitación), este número puede ser un cohete. Hace solo unos meses, en 2016, estaba tratando con una compañía que usa IE8 para más del 60% de sus máquinas.

Por lo tanto, antes de hacer nada: compruebe que su usuario utiliza el navegador . Si no lo hace, aprenderá una lección rápida y dolorosa de por qué "trabajar para mí" no es lo suficientemente bueno como para entregarlo a un cliente.

Esto es seguido por mi respuesta de 2008.


Sin embargo, hay métodos viables de carga de archivos no JS. Puede crear un iframe en una página (que oculta con CSS), y luego dirigir su formulario para publicar en un iframe. En la página principal no es necesario moverse.

Esta es una publicación "real" para que no sea completamente interactiva. Si necesita estado, necesita algo servidor para manejarlo. Depende de tu servidor. ASP.NET tiene mecanismos más convenientes. PHP normal no funciona, pero puede usar modificaciones de Perl o Apache para solucionarlo.

Si necesita varias descargas de archivos, es mejor hacer cada archivo de uno en uno (para superar los límites máximos de descarga de archivos). Envíe el primer formulario al iframe, haga un seguimiento de su progreso, use el anterior y cuando haya terminado, coloque el segundo formulario en el iframe, etc.

O utilice una solución Java / Flash. Son mucho más flexibles en lo que pueden hacer con sus mensajes ...

246
03 окт. La respuesta se da Oli 03 oct. 2008-10-03 13:41 '08 a la 1:41 pm 2008-10-03 13:41

Para este propósito, recomiendo usar el plugin Fine Uploader . Tu código JavaScript será:

 $(document).ready(function() { $("#uploadbutton").jsupload({ action: "addFile.do", onComplete: function(response){ alert( "server response: " + response); } }); }); 
108
21 нояб. La respuesta se da pixxaar 21 nov. 2008-11-21 19:38 '08 a las 7:38 pm 2008-11-21 19:38

Nota Esta respuesta no está actualizada, ahora puede cargar archivos utilizando XHR.


No puede cargar archivos utilizando XMLHttpRequest (Ajax). Puedes simular el efecto usando iframe o flash. Un excelente complemento de jQuery Form que envía tus archivos a través de un iframe para obtener el efecto.

92
03 окт. respuesta dada por Mattias el 3 de octubre 2008-10-03 13:36 '08 a la 1:36 pm 2008-10-03 13:36

Este archivo AJAX que carga el complemento jQuery carga el archivo en algún lugar y envía la respuesta a la devolución de llamada, nada más.

  • Esto es independiente del HTML específico, solo dale <input type="file">
  • Esto no requiere que su servidor responda de ninguna manera en particular.
  • No importa cuántos archivos utilice o dónde estén en la página.

- Utilizar solo

 $('#one-specific-file').ajaxfileupload({ 'action': '/upload.php' }); 

- o tanto como -

 $('input[type="file"]').ajaxfileupload({ 'action': '/upload.php', 'params': { 'extra': 'info' }, 'onComplete': function(response) { console.log('custom handler for file:'); alert(JSON.stringify(response)); }, 'onStart': function() { if(weWantedTo) return false; // cancels upload }, 'onCancel': function() { console.log('no file selected'); } }); 
83
29 июля '11 в 3:34 2011-07-29 03:34 Jordan Feldstein dio la respuesta el 29 de julio de 2011 a las 3:34 2011-07-29 03:34

Resumiendo para futuros lectores.

Descargar archivo asíncrono

De HTML5

Puede cargar archivos usando jQuery usando el método $.ajax() si se admiten FormData y la API del archivo (ambas propiedades HTML5).

También puede enviar archivos sin FormData, pero en cualquier caso, los archivos API deben estar presentes para procesar los archivos para que puedan enviarse utilizando XMLHttpRequest (Ajax).

 $.ajax({ url: 'file/destination.html', type: 'POST', data: new FormData($('#formWithFiles')[0]), // The form with the file inputs. processData: false, contentType: false // Using FormData, no need to process data. }).done(function(){ console.log("Success: Files sent!"); }).fail(function(){ console.log("An error occurred, the files couldn't be sent!"); }); 

Para un ejemplo rápido y limpio de javascript ( sin jQuery ), consulte " Enviar archivos usando el objeto FormData ".

Retiro

Cuando HTML5 no es compatible (sin API de archivos), la única otra solución de JavaScript limpia (sin Flash o cualquier otro complemento del navegador) es la técnica de iframe oculta que le permite emular una solicitud asíncrona sin usar el objeto XMLHttpRequest.

Consiste en establecer un iframe como objetivo de un formulario con archivos de entrada. Cuando un usuario envía una solicitud y los archivos se cargan, pero la respuesta se muestra dentro del iframe en lugar de volver a renderizar la página principal. La ocultación de un iframe hace que todo el proceso sea transparente para el usuario y emula una solicitud asíncrona.

Si se hace correctamente, debería funcionar en casi cualquier navegador, pero tiene algunas advertencias sobre cómo obtener una respuesta del iframe.

En este caso, puede preferir usar un complemento de shell, como Bifröst, que usa la técnica de iframe, pero también proporciona el transporte jQuery Ajax, que le permite enviar archivos usando solo $.ajax() siguiente manera:

 $.ajax({ url: 'file/destination.html', type: 'POST', // Set the transport to use (iframe means to use Bifröst) // and the expected data type (json in this case). dataType: 'iframe json', fileInputs: $('input[type="file"]'), // The file inputs containing the files to send. data: { msg: 'Some extra data you might need.'} }).done(function(){ console.log("Success: Files sent!"); }).fail(function(){ console.log("An error occurred, the files couldn't be sent!"); }); 

Complementos

Bifröst es solo un pequeño shell que agrega soporte para el método jQuery ajax, pero muchos de los complementos mencionados anteriormente, como el complemento de formulario jQuery o la carga de archivos jQuery, incluyen toda la pila HTML5 en varias copias de seguridad y algunas funciones útiles para facilitar el proceso. Dependiendo de sus necesidades y requisitos, puede considerar la versión básica de la implementación o cualquiera de estos complementos.

82
25 авг. La respuesta se da 404 25 ago. 2014-08-25 17:17 '14 a las 5:17 pm 2014-08-25 17:17

Utilicé el siguiente script para subir imágenes que funcionan bien.

HTML

 <input id="file" type="file" name="file"/> <div id="response"></div> 

Javascript

 jQuery('document').ready(function(){ var input = document.getElementById("file"); var formdata = false; if (window.FormData) { formdata = new FormData(); } input.addEventListener("change", function (evt) { var i = 0, len = this.files.length, img, reader, file; for ( ; i < len; i++ ) { file = this.files[i]; if (!!file.type.match(/image.*/)) { if ( window.FileReader ) { reader = new FileReader(); reader.onloadend = function (e) { //showUploadedItem(e.target.result, file.fileName); }; reader.readAsDataURL(file); } if (formdata) { formdata.append("image", file); formdata.append("extra",'extra-data'); } if (formdata) { jQuery('div#response').html('<br /><img src="ajax-loader.gif"/>'); jQuery.ajax({ url: "upload.php", type: "POST", data: formdata, processData: false, contentType: false, success: function (res) { jQuery('div#response').html("Successfully uploaded"); } }); } } else { alert('Not a vaild image!'); } } }, false); }); 

Explicación

Uso el div respuesta para mostrar la carga de la animación y la respuesta después de que se complete la descarga.

Lo mejor de todo es que puede enviar datos adicionales, como identificadores, etc., con el archivo que usa este script. Mencioné sus extra-data , como en el guión.

En el nivel de PHP, esto funcionará como una descarga de archivos regular. Se pueden recibir datos adicionales como datos de $_POST .

Aquí no usas el plugin y así sucesivamente. Puede cambiar el código como desee. Aquí no se codifica a ciegas. Esta es la funcionalidad principal de cualquier descarga de archivos jQuery. En realidad javascript.

59
25 янв. Respuesta dada por Techie el 25 de enero. 2013-01-25 14:03 '13 a las 14:03 2013-01-25 14:03

Encontré varios archivos jQuery realmente poderosos para descargar archivos. Échales un vistazo:

55
08 апр. La respuesta se da Hristo 08 abr. 2011-04-08 19:43 '11 a las 19:43 2011-04-08 19:43

Usted puede hacer esto fácilmente en javascript de vainilla. Aquí hay un fragmento de mi proyecto actual:

 var xhr = new XMLHttpRequest(); xhr.upload.onprogress = function(e) { var percent = (e.position/ e.totalSize); // Render a pretty progress bar }; xhr.onreadystatechange = function(e) { if(this.readyState === 4) { // Handle file upload complete } }; xhr.open('POST', '/upload', true); xhr.setRequestHeader('X-FileName',file.name); // Pass the filename along xhr.send(file); 
43
17 февр. la respuesta se da mpen 17 feb . 2013-02-17 12:34 '13 a las 12:34 pm 2013-02-17 12:34

Puedes cargarlo solo usando jQuery .ajax() .

HTML:

 .progress { display: none; } 

Javascript:

43
08 авг. La respuesta la da Zayn Ali 08 ago. 2014-08-08 05:59 '14 a las 5:59 am 2014-08-08 05:59

La forma más fácil y confiable que he hecho en el pasado es simplemente apuntar la etiqueta iFrame oculta a su formulario, luego se enviará al iframe sin volver a cargar la página.

Es decir, si no desea utilizar un complemento, javascript o cualquier otra forma de magia que no sea HTML Por supuesto, puedes combinar esto con javascript o lo que tengas ...

 <form target="iframe" action="" method="post" enctype="multipart/form-data"> <input name="file" type="file" /> <input type="button" value="Upload" /> </form> <iframe name="iframe" id="iframe" style="display:none" ></iframe> 

También puede leer el contenido de iframe onLoad para los errores del servidor o las respuestas exitosas, y luego mostrarlas al usuario.

Chrome, iFrames y onLoad

-nota: solo necesita leer si se está preguntando cómo configurar un bloqueo de interfaz de usuario al cargar / cargar

Chrome actualmente no activa un evento onLoad para un iframe cuando se usó para transferir archivos. Firefox, IE y Edge activan el evento onload para transferir archivos.

La única solución que he encontrado para Chrome es usar una cookie.

Para esto principalmente al cargar / descargar:

  • [Lado del cliente] Iniciar el intervalo de búsqueda de cookies
  • [Del lado del servidor] Haga todo lo que necesita con los datos del archivo
  • [Server Side] Configurar cookie para intervalo de cliente
  • [Lado del cliente] El intervalo ve la cookie y la usa como un evento onLoad. Por ejemplo, puede iniciar un bloqueador de la interfaz de usuario y, a continuación, en la carga (o cuando la cookie está lista), elimina el bloqueador de la interfaz de usuario.

Usar una cookie para esto es feo, pero funciona.

Creé un complemento de jQuery para resolver este problema para Chrome al cargar, lo puedes encontrar aquí

https://github.com/ArtisticPhoenix/jQuery-Plugins/blob/master/iDownloader.js

El mismo principio básico se aplica a la descarga.

Para usar el gestor de arranque (incluyendo JS, obviamente)

  $('body').iDownloader({ "onComplete" : function(){ $('#uiBlocker').css('display', 'none'); //hide ui blocker on complete } }); $('somebuttion').click( function(){ $('#uiBlocker').css('display', 'block'); //block the UI $('body').iDownloader('download', 'htttp://example.com/location/of/download'); }); 

Y en el lado del servidor, antes de pasar los datos del archivo, cree una cookie

  setcookie('iDownloader', true, time() + 30, "/"); 

El complemento verá la cookie y luego activará la onComplete llamada onComplete .

39
26 июня '14 в 7:43 2014-06-26 07:43 La respuesta se da ArtisticPhoenix 26 de junio '14 a las 7:43 2014-06-26 07:43

La solución que encontré fue que el objetivo de <form> era el iFrame oculto. Luego, iFrame puede ejecutar JS para mostrarlo al usuario, quien lo completó (cuando se carga la página).

32
18 окт. respuesta dada por Darryl Hein el 18 de octubre. 2008-10-18 22:30 '08 a las 10:30 pm 2008-10-18 22:30

Escribí esto en un entorno de Rails . Estas son solo cinco líneas de javascript si está utilizando el complemento de formulario jQuery.

El desafío es que la carga de AJAX funciona porque el remote_form_for estándar no comprende la forma de múltiples componentes de la vista. Él no va a enviar los datos del archivo. Rails busca una solicitud AJAX.

Lo que incluye el complemento jQuery-form.

Heres Rails código para ello:

 <% remote_form_for(:image_form, :url => { :controller => "blogs", :action => :create_asset }, :html => { :method => :post, :id => 'uploadForm', :multipart => true }) do |f| %> Upload a file: <%= f.file_field :uploaded_data %> <% end %> 

Aquí está el javascript correspondiente:

 $('#uploadForm input').change(function(){ $(this).parent().ajaxSubmit({ beforeSubmit: function(a,f,o) { o.dataType = 'json'; }, complete: function(XMLHttpRequest, textStatus) { // XMLHttpRequest.responseText will contain the URL of the uploaded image. // Put it in an image element you create, or do with it what you will. // For example, if you have an image elemtn with id "my_image", then // $('#my_image').attr('src', XMLHttpRequest.responseText); // Will set that image tag to display the uploaded image. }, }); }); 

Y aquí está la acción del controlador de Rails, bastante vainilla:

  @image = Image.new(params[:image_form]) @image.save render :text => @image.public_filename 

Lo usé durante las últimas semanas con Bloggity, y trabajó como un campeón.

31
14 авг. La respuesta se da wbharding 14 ago. 2009-08-14 01:44 '09 a la 1:44 2009-08-14 01:44

La carga simple de Ajax es otra opción:

https://github.com/LPology/Simple-Ajax-Uploader

  • Navegador cruzado: funciona en IE7 +, Firefox, Chrome, Safari, Opera
  • Soporte para múltiples descargas simultáneas, incluso en navegadores que no son HTML5
  • Sin flash o CSS externo - solo un archivo Javascript de 5Kb
  • Soporte incorporado adicional para barras de paso completo (usando la extensión APC de PHP)
  • Flexible y personalizable: use cualquier elemento como botón de descarga, cree sus propios indicadores de progreso.
  • No se requiere ningún formulario, solo especifique el elemento que se utilizará como botón de descarga.
  • Licencia MIT - Uso gratuito en un proyecto comercial

Ejemplo de uso:

30
26 июня '13 в 4:12 2013-06-26 04:12 la respuesta está dada por el usuario1091949 26 de junio de 2013 a las 4:12 2013-06-26 04:12

jQuery Uploadify es otro buen complemento que usé anteriormente para cargar archivos. El código de JavaScript es simple, como se muestra a continuación: código. Sin embargo, la nueva versión no funciona en Internet Explorer.

 $('#file_upload').uploadify({ 'swf': '/public/js/uploadify.swf', 'uploader': '/Upload.ashx?formGuid=' + $('#formGuid').val(), 'cancelImg': '/public/images/uploadify-cancel.png', 'multi': true, 'onQueueComplete': function (queueData) { // ... }, 'onUploadStart': function (file) { // ... } }); 

Busqué mucho y encontré otra solución para cargar archivos sin un complemento y solo con ajax. La solución es la siguiente:

 $(document).ready(function () { $('#btn_Upload').live('click', AjaxFileUpload); }); function AjaxFileUpload() { var fileInput = document.getElementById("#Uploader"); var file = fileInput.files[0]; var fd = new FormData(); fd.append("files", file); var xhr = new XMLHttpRequest(); xhr.open("POST", 'Uploader.ashx'); xhr.onreadystatechange = function () { if (xhr.readyState == 4) { alert('success'); } else if (uploadResult == 'success') alert('error'); }; xhr.send(fd); } 
22
16 июня '13 в 12:49 2013-06-16 12:49 la respuesta la da farnoush resa 16 de junio de 13 a 12:49 2013-06-16 12:49

Esta es solo otra solución, cómo cargar un archivo ( sin ningún complemento )

Usando Javascripts simples y AJAX (con barra de progreso)

parte de HTML

 <form id="upload_form" enctype="multipart/form-data" method="post"> <input type="file" name="file1" id="file1"><br> <input type="button" value="Upload File" onclick="uploadFile()"> <progress id="progressBar" value="0" max="100" style="width:300px;"></progress> <h3 id="status"></h3> <p id="loaded_n_total"></p> </form> 

Parte de Js

 function _(el){ return document.getElementById(el); } function uploadFile(){ var file = _("file1").files[0]; // alert(file.name+" | "+file.size+" | "+file.type); var formdata = new FormData(); formdata.append("file1", file); var ajax = new XMLHttpRequest(); ajax.upload.addEventListener("progress", progressHandler, false); ajax.addEventListener("load", completeHandler, false); ajax.addEventListener("error", errorHandler, false); ajax.addEventListener("abort", abortHandler, false); ajax.open("POST", "file_upload_parser.php"); ajax.send(formdata); } function progressHandler(event){ _("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total; var percent = (event.loaded / event.total) * 100; _("progressBar").value = Math.round(percent); _("status").innerHTML = Math.round(percent)+"% uploaded... please wait"; } function completeHandler(event){ _("status").innerHTML = event.target.responseText; _("progressBar").value = 0; } function errorHandler(event){ _("status").innerHTML = "Upload Failed"; } function abortHandler(event){ _("status").innerHTML = "Upload Aborted"; } 

Parte de PHP

 <?php $fileName = $_FILES["file1"]["name"]; // The file name $fileTmpLoc = $_FILES["file1"]["tmp_name"]; // File in the PHP tmp folder $fileType = $_FILES["file1"]["type"]; // The type of file it is $fileSize = $_FILES["file1"]["size"]; // File size in bytes $fileErrorMsg = $_FILES["file1"]["error"]; // 0 for false... and 1 for true if (!$fileTmpLoc) { // if file not chosen echo "ERROR: Please browse for a file before clicking the upload button."; exit(); } if(move_uploaded_file($fileTmpLoc, "test_uploads/$fileName")){ // assuming the directory name 'test_uploads' echo "$fileName upload is complete"; } else { echo "move_uploaded_file function failed"; } ?> 

Aquí está la aplicación EJEMPLO

21
30 марта '16 в 19:48 2016-03-30 19:48 La respuesta se le da a Siddhartha Chowdhury el 30 de marzo de '16 a las 19:48 2016-03-30 19:48
 var formData=new FormData(); formData.append("fieldname","value"); formData.append("image",$('[name="filename"]')[0].files[0]); $.ajax({ url:"page.php", data:formData, type: 'POST', dataType:"JSON", cache: false, contentType: false, processData: false, success:function(data){ } }); 

Puede utilizar los datos del formulario para publicar todos sus valores, incluidas las imágenes.

15
28 июля '15 в 16:39 2015-07-28 16:39 Vivek Aasaithambi da la respuesta el 28 de julio de 2015 a las 16:39 2015-07-28 16:39

Para descargar un archivo de forma asincrónica utilizando jQuery, siga estos pasos:

Paso 1 En su proyecto, abra el administrador de Nuget y agregue el paquete (jquery fileupload (solo necesita escribirlo en el campo de búsqueda, aparecerá e instalarlo.)) URL: https://github.com/blueimp/jQuery-File-Upload

Paso 2 Agregue los siguientes scripts a los archivos HTML que ya se han agregado al proyecto ejecutándose en el paquete:

jquery.ui.widget.js

jquery.iframe-transport.js

jquery.fileupload.js

Paso 3 Registre el control de descarga de archivos como se muestra en el siguiente código:

 <input id="upload" name="upload" type="file" /> 

Paso 4 Escribe el método js como uploadFile, como se muestra a continuación:

  function uploadFile(element) { $(element).fileupload({ dataType: 'json', url: '../DocumentUpload/upload', autoUpload: true, add: function (e, data) { // write code for implementing, while selecting a file. // data represents the file data. //below code triggers the action in mvc controller data.formData = { files: data.files[0] }; data.submit(); }, done: function (e, data) { // after file uploaded }, progress: function (e, data) { // progress }, fail: function (e, data) { //fail operation }, stop: function () { code for cancel operation } }); }; 

Paso 5 En la carga finalizada del archivo de llamada de la llamada de función para iniciar el proceso, como se muestra a continuación:

 $(document).ready(function() { uploadFile($('#upload')); }); 

Paso 6 Grabe el controlador MVC y la acción como se muestra a continuación:

 public class DocumentUploadController : Controller { [System.Web.Mvc.HttpPost] public JsonResult upload(ICollection<HttpPostedFileBase> files) { bool result = false; if (files != null || files.Count > 0) { try { foreach (HttpPostedFileBase file in files) { if (file.ContentLength == 0) throw new Exception("Zero length file!"); else //code for saving a file } } catch (Exception) { result = false; } } return new JsonResult() { Data=result }; } } 
13
ответ дан ashish 23 июня '14 в 11:18 2014-06-23 11:18

Преобразуйте файл в base64 с помощью HTML5 readAsDataURL() или некоторый кодировщик base64 . Заклинание здесь

 var reader = new FileReader(); reader.onload = function(readerEvt) { var binaryString = readerEvt.target.result; document.getElementById("base64textarea").value = btoa(binaryString); }; reader.readAsBinaryString(file);