est-il possible de faire un formulaire Ajax Soumettre sans jQuery ou iframes (donc juste pure javascript)? J'envoie actuellement à une Struts Fileduploadaction qui fonctionne. Le code de l'action fonctionnerait-il toujours avec la soumission asynchrone ou y a-t-il des ajouts nécessaires pour choisir le formulaire ASYNC Soumettre?
J'utilise des jambes 1.x et actuelle mon formulaire est le suivant: P>
<html:form action="fileUploadAction" method="post" enctype="multipart/form-data">
...form elements...
<html:file property="theFile" />
...other elements...
</html:form>
3 Réponses :
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;
});
}
Je suppose que cette solution ne fonctionnera que dans les navigateurs pris en charge HTML5, corrige-moi si je me trompe, alors si le navigateur ne le supporte pas, alors vous devez fournir une méthode de secours qui utilisera des iframes je suppose
Oui. Je commence à penser qu'il n'y a pas de route non-HTML5 et non iframes.
Oui, cette solution fonctionnera uniquement dans HTML5. Essayez de trouver du polyfill pour le fichier Fileduploader. J'ai regardé ici Github.com/modernizr/modernizr/wiki/..., mais semble que l'on n'y ait pas de remplaceur de téléchargeur de fichier. En tout état de cause, je pense que cela ne prendra pas beaucoup de temps pour réécrire le code ci-dessus pour travailler dans HTML4
http://fineuploader.com/ est un fichier de fichier AJAX.
Ce plugin utilise XHR pour le téléchargement de plusieurs fichiers avec la barre de progression dans la FF3.6 +, le Safari4 +, le chrome et redevient un upload Iframe caché dans d'autres navigateurs, fournissant une bonne expérience utilisateur partout.
On dirait que cela a été déplacé et vous oblige maintenant à acheter une licence (au moins pour une licence commerciale)
Il est transféré à Fineduploader maintenant (j'ai mis à jour le lien). Et toujours un service sous licence.
@edwardmyte merci mate
Pas besoin d'ajouter jQuery ou une autre bibliothèque tierce partie, il suffit d'ajouter iperfect JS Bibliothèque et vous êtes prêt à partir.
IP_Uploadfile (URL, NAPPETETYPE, CETTE [OBJECT], [DYNAMICFONCTIONNEFORRESPONSE])
Si l'utilisateur Sélectionnez la responsabilité de «HTML», DynamicFunCorResponse obtiendra une réponse au format HTML. Dans un exemple ci-dessous, vous obtiendrez "Terminé" réponse en alerte.
html corps
oui vous pouvez le faire par JavaScript
Tous les navigateurs ne le soutiennent pas sans l'iframe.
J'ai vu que j'ai besoin de créer un XMLHTTPQUEST ou une compatibilité ActiveXObject pour le navigateur, toute chance d'un exemple de JavaScript?
Les navigateurs prenant en charge ActiveXOBJECT ne prennent pas en charge le téléchargement de fichier si bonne chance les faire fonctionner.
Ouais, me regarde comme je dois utiliser des iframes. Exemple: openjs.com/articles/ajax/ajax_file_upload
@edwardmyte, juste étant curieux, tandis que
jQuery est la bibliothèque la plus populaire et la plus standard pour la mise en œuvre du navigateur croisée deJS , pourquoi vous avez besoin de solution JavaScript pure qui pourrait ne pas être compatible partout?Bonne question. Mettez simplement la politique de l'entreprise. Pourquoi apporter une bibliothèque externe si vous pouvez gérer sans (quelle que soit la facilité).
Téléchargement de fichier AJAX sans iframe et tous les navigateurs compatibles, impossible.
@edwardmyte "Pourquoi apporter une bibliothèque externe si vous pouvez gérer sans (quelle que soit la facilité)?" Parce que tu serais un imbécile de ne pas le faire. Vous peut Demandez à vos employés de créer leurs propres bureaux de matières premières avant de commencer à faire quelque chose d'utile. Mais pourquoi le feriez-vous juste "parce que vous pouvez gérer sans bureaux pré-construits"? Votre entreprise a-t-elle plaisir de dépenser de l'argent pour son propre saké ou quelque chose? :)