Carga de archivos AJAX/envío de formularios sin jquery o iframes?

Question

¿Es posible enviar un formulario AJAX sin jQuery o IFrames (solo JavaScript puro)? Actualmente estoy enviando a un struts fileUploadAction que funciona. ¿Seguiría funcionando el código de la acción con el envío asincrónico, o se requieren adiciones para recoger el formulario asíncrono?

estoy usando puntales 1.x y corriente mi formulario es:

<html:form action="fileUploadAction" method="post" enctype="multipart/form-data"> 
    ...form elements... 
    <html:file property="theFile" /> 
    ...other elements... 
</html:form> 

se pueden enviar este formulario, y por lo tanto el archivo cargado con AJAX?

Answer 1

Si entendí que es correcto, puede usar el siguiente código para cargar el archivo asincrónico. Modificarlo a su gusto

var AjaxFileUploader = function() { 
    this._file = null; 
    var self = this; 

    this.uploadFile = function (uploadUrl, file) { 
     var xhr = new XMLHttpRequest(); 
     xhr.onprogress = function (e) { 
      ... 
     }; 

     xhr.onload = function (e) { 
      ... 
     }; 

     xhr.onerror = function (e) { 
      ... 
     }; 

     xhr.open("post", uploadUrl, true); 

     xhr.setRequestHeader("Content-Type", "multipart/form-data"); 
     xhr.setRequestHeader("X-File-Name", file.name); 
     xhr.setRequestHeader("X-File-Size", file.size); 
     xhr.setRequestHeader("X-File-Type", file.type); 

     xhr.send(file); 
    }; 
}; 

AjaxFileUploader.IsAsyncFileUploadSupported = function() { 
    return typeof (new XMLHttpRequest().upload) !== 'undefined'; 
} 

if (AjaxFileUploader.IsAsyncFileUploadSupported) { 
     ajaxFileUploader = new AjaxFileUploader(); 

     $("form").submit(function() { 
      var uploader = $("#fileUploader")[0]; 

      if (uploader.files.length == 0) { 
       return; 
      } else { 
       ajaxFileUploader.uploadFile(
        "/YourUploadUrl", 
        uploader.files[0]); 
      } 

      return false; 
     }); 
    } 

Para cargar el formulario de utilizar la clase FormData, rellenarlo con los valores del formulario y que lo ponga con XHR.

Actualización: Para HTML 4 pruebe lo siguiente

• http://www.albanx.com/?pid=5&subid=21
• Asynchronous file upload (AJAX file upload) using jsp and javascript

Answer 2

http://fineuploader.com/ es un archivo-Registro de ajax.

Este plugin utiliza XHR para cargar varios archivos con una barra de progreso en FF3.6 +, + Safari4, Chrome y vuelve a caer a carga basado iframe oculto en otros navegadores, proporcionando una buena experiencia de usuario en todas partes.

Answer 3

No es necesario agregar jquery o cualquier otra biblioteca de terceros, solo agregue la biblioteca IPerfect JS y listo.

IP_uploadFile (URL, responseType, esta [objeto], [dynamicFunctionForResponse])

si el usuario seleccione responseType como 'html', entonces dynamicFunctionForResponse obtendrá la respuesta en formato HTML. En el ejemplo siguiente obtendrá la respuesta 'hecho' en alerta.

HTML

<script type="text/javascript" src="http://services.iperfect.net/js/IP_generalLib.js"></script> 


    <script language='javascript'> 
    function testResponse(data){ 
    alert(data) 
    } 
    </script> 

cuerpo

<form method="POST" enctype="multipart/form-data" onsubmit="IP_uploadFile('testupload.php','html',this,testResponse); return false;"> 
     <input type="file" name="file1"> 
     <input type="submit" name="submit1" value="Click here"> 
    </form> 

PHP: testupload.php

move_uploaded_file($_FILES['file1']['tmp_name'], realpath("./")."/upload/".$_FILES["file1"]["name"]); 
    echo "done";