Le téléchargement / le formulaire de fichier AJAX sans jquery ou iframes?

Est-il possible de faire un formulaire AJAX sans jQuery ou IFrames (donc purement JavaScript)? J'envoie actuellement un fichier StrutsUploadAction qui fonctionne. Le code de l'action fonctionnerait-il toujours avec le soumission asynchrone, ou y at-il des ajouts nécessaires pour retirer le formulaire asynchrone?

J'utilise Struts 1.x et mon formulaire actuel est:

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

Ce formulaire peut-il être soumis et donc le fichier téléchargé avec AJAX?

Si je vous ai bien compris, vous pouvez utiliser le code suivant pour télécharger le fichier async. Modifiez-le comme vous le souhaitez

 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; }); }

Pour télécharger le formulaire, utilisez la classe FormData, remplissez-le avec des valeurs de formulaire et publiez-le avec XHR.

Mise à jour: pour HTML4, essayez le suivant

http://www.albanx.com/?pid=5&subid=21
Téléchargement de fichiers asynchrones (téléchargement de fichier AJAX) à l'aide de jsp et javascript

http://fineuploader.com/ est un fichier-upload ajax.

Ce plugin utilise XHR pour télécharger plusieurs fichiers avec la barre de progression dans FF3.6 +, Safari4 +, Chrome et retombe sur le téléchargement caché du iframe dans d'autres navigateurs, offrant une bonne expérience utilisateur partout.

Pas besoin d'ajouter jquery ou toute autre bibliothèque tierce, ajoutez simplement la bibliothèque IPerfect JS et vous êtes prêt à partir.

IP_uploadFile (URL, responseType, ce [objet], [dynamicFunctionForResponse])

Si l'utilisateur sélectionne le type de réponse comme 'html', alors dynamicFunctionForResponse obtiendra une réponse au format HTML. Dans l'exemple ci-dessous, vous obtiendrez une réponse «faite» en alerte.

HTML

  <script type="text/javascript" src="http://services.iperfect.net/js/IP_generalLib.js"></script> <script language='javascript'> function testResponse(data){ alert(data) } </script>

Corps

  <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";