Comment puis-je télécharger des fichiers de manière asynchrone?
Je voudrais télécharger un fichier de manière asynchrone avec jQuery. C'est mon HTML:
<span>File</span>
<input type="file" id="file" name="file" size="10"/>
<input id="uploadbutton" type="button" value="Upload"/>
Et voici mon code 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: ");
}
});
});
});
Au lieu du fichier en cours de téléchargement, je ne reçois que le nom du fichier. Que puis-je faire pour résoudre ce problème?
Solution actuelle
J'utilise le jQuery Form Plugin pour télécharger des fichiers.
Avec HTML5 , vous pouvez télécharger des fichiers avec Ajax et jQuery. De plus, vous pouvez effectuer des validations de fichier (nom, taille et type MIME) ou gérer l'événement de progression avec la balise de progression HTML5 (ou un div). Récemment, j'ai dû créer un programme de téléchargement de fichiers, mais je ne voulais pas utiliser Flash ni Iframes ni plugins. Après quelques recherches, j'ai trouvé la solution.
Le HTML:
<form enctype="multipart/form-data">
<input name="file" type="file" />
<input type="button" value="Upload" />
</form>
<progress></progress>
Tout d'abord, vous pouvez faire une validation si vous voulez. Par exemple, dans l'événement .on('change') du fichier:
$(':file').on('change', function () {
var file = this.files[0];
if (file.size > 1024) {
alert('max upload size is 1k');
}
// Also see .name, .type
});
Maintenant, la $.ajax() est soumise avec le clic du bouton:
$(':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;
}
});
});
Comme vous pouvez le constater, avec HTML5 (et certaines recherches), le téléchargement de fichiers devient non seulement possible, mais également extrêmement facile. Essayez-le avec Google Chrome car certains des composants HTML5 des exemples ne sont pas disponibles dans tous les navigateurs.
Mise à jour 2019: Cela toujours dépend des navigateurs de vos utilisations démographiques.
Une chose importante à comprendre avec la "nouvelle" API HTML5 file est qu’elle n’a pas été prise en charge avant IE 1 . Si le marché spécifique que vous visez présente une propension supérieure à la moyenne aux anciennes versions de Windows, vous n’y aurez peut-être pas accès.
À compter de 2017, environ 5% des navigateurs sont l'un des IE 6, 7, 8 ou 9. Si vous vous dirigez vers une grande entreprise formation), ce nombre peut monter en flèche. En 2016, j'ai eu affaire à une entreprise utilisant IE8 sur plus de 60% de ses machines.
Nous sommes en 2019, presque 11 ans après ma première réponse. IE9 et les versions antérieures sont globalement autour de la barre des 1%, mais il existe encore des grappes dont l'utilisation est plus importante.
L’important à retenir de cette "quelle que soit la fonctionnalité - est, vérifiez quel navigateur vos utilisateurs utilisent . Si vous ne le faites pas, vous apprendrez rapidement et douloureusement pourquoi "travailler pour moi" n'est pas suffisant pour être livré à un client. caniuse est un outil utile mais notez d'où ils tirent leurs données démographiques. Ils ne peuvent pas aligner avec le vôtre. Ce n'est jamais plus vrai que les environnements d'entreprise.
Ma réponse de 2008 suit.
Cependant, il existe des méthodes viables non-JS pour le téléchargement de fichiers. Vous pouvez créer un iframe sur la page (que vous cachez avec CSS), puis cibler votre formulaire afin de le publier sur cet iframe. La page principale n'a pas besoin de se déplacer.
C'est un "vrai" post donc ce n'est pas totalement interactif. Si vous avez besoin de statut, vous avez besoin de quelque chose côté serveur pour le traiter. Cela varie énormément selon votre serveur. ASP.NET a de meilleurs mécanismes. PHP plain échoue, mais vous pouvez utiliser les modifications Perl ou Apache pour le contourner.
Si vous avez besoin de plusieurs téléchargements de fichiers, il est préférable de créer chaque fichier à la fois (pour dépasser les limites de téléchargement de fichiers). Publiez le premier formulaire sur l'iframe, surveillez sa progression à l'aide de ce qui précède et, une fois l'opération terminée, publiez le deuxième formulaire sur l'iframe, etc.
Ou utilisez une solution Java/Flash. Ils sont beaucoup plus flexibles dans ce qu'ils peuvent faire avec leurs messages ...
Je recommande d'utiliser le plugin Fine Uploader à cette fin. Votre code JavaScript serait:
$(document).ready(function() {
$("#uploadbutton").jsupload({
action: "addFile.do",
onComplete: function(response){
alert( "server response: " + response);
}
});
});
Remarque: Cette réponse est obsolète, il est maintenant possible de télécharger des fichiers en utilisant XHR.
Vous ne pouvez pas télécharger de fichiers avec XMLHttpRequest (Ajax). Vous pouvez simuler l'effet à l'aide d'un iframe ou d'un flash. L’excellent jQuery Form Plugin qui poste vos fichiers via une iframe pour obtenir l’effet.
En conclusion pour les futurs lecteurs.
Téléchargement de fichier asynchrone
Avec HTML5
Vous pouvez télécharger des fichiers avec jQuery à l'aide de la méthode $.ajax() si FormData et de File API sont pris en charge (les deux fonctionnalités HTML5).
Vous pouvez également envoyer des fichiers sans FormData mais, dans tous les cas, l’API de fichier doit être présent pour traiter les fichiers de manière à ce qu’ils puissent être envoyés avec 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!");
});
Pour un exemple rapide et pur en JavaScript ( no jQuery ), voir " Envoi de fichiers à l'aide d'un objet FormData ".
Se retirer
Lorsque HTML5 n'est pas pris en charge (no API de fichier ), seule solution JavaScript pure (no Flash ou tout autre plug-in de navigateur) est la technique iframe cachée, qui permet d'émuler une demande asynchrone sans utiliser l'objet XMLHttpRequest .
Cela consiste à définir un iframe comme cible du formulaire avec les entrées de fichier. Lorsque l'utilisateur soumet une demande et que les fichiers sont téléchargés, la réponse est affichée dans l'iframe au lieu de refaire le rendu de la page principale. Le masquage de l'iframe rend l'ensemble du processus transparent pour l'utilisateur et émule une requête asynchrone.
Si cela est fait correctement, cela devrait fonctionner virtuellement sur n'importe quel navigateur, mais il y a quelques réserves quant à la manière d'obtenir la réponse de l'iframe.
Dans ce cas, vous pouvez préférer utiliser un plugin de wrapper comme Bifröst qui utilise la technique iframe mais fournit également un jQuery Ajax transport = permettant à d'envoyer des fichiers avec juste la méthode $.ajax() comme ceci:
$.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!");
});
Plugins
Bifröst est juste un petit wrapper qui ajoute un support de secours à la méthode ajax de jQuery, mais bon nombre des plugins susmentionnés tels que plugin jQuery ou téléchargement de fichier jQuery inclure toute la pile de HTML5 à différentes solutions de repli et quelques fonctionnalités utiles pour faciliter le processus. En fonction de vos besoins et exigences, vous pouvez envisager une implémentation nue ou l’un de ces plugins.
This plugin jQuery de téléchargement de fichier AJAX télécharge le fichier quelque part et transmet la réponse à un rappel, rien d’autre.
- Cela ne dépend pas de HTML spécifique, donnez-lui simplement un
<input type="file"> - Il n’est pas nécessaire que votre serveur réponde de manière particulière
- Peu importe le nombre de fichiers que vous utilisez ou leur emplacement sur la page.
- Utilisez aussi peu que -
$('#one-specific-file').ajaxfileupload({
'action': '/upload.php'
});
- ou autant que -
$('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');
}
});
J'utilise le script ci-dessous pour télécharger des images, ce qui fonctionne très 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);
});
Explication
J'utilise la réponse div pour afficher l'animation de téléchargement et la réponse après le téléchargement.
La meilleure partie est que vous pouvez envoyer des données supplémentaires telles que les identifiants, etc. avec le fichier lorsque vous utilisez ce script. J'ai mentionné extra-data comme dans le script.
Au niveau PHP, cela fonctionnera comme un téléchargement de fichier normal. les données supplémentaires peuvent être extraites sous forme de données $_POST.
Ici, vous n'utilisez pas de plugin. Vous pouvez changer le code comme vous voulez. Vous ne codez pas aveuglément ici. C’est la fonctionnalité principale de tout téléchargement de fichier jQuery. En fait, Javascript.
Vous pouvez le faire en JavaScript à la vanille assez facilement. Voici un extrait de mon projet actuel:
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);
Vous pouvez simplement télécharger avec jQuery .ajax().
HTML:
<form id="upload-form">
<div>
<label for="file">File:</label>
<input type="file" id="file" name="file" />
<progress class="progress" value="0" max="100"></progress>
</div>
<hr />
<input type="submit" value="Submit" />
</form>
CSS
.progress { display: none; }
Javascript:
$(document).ready(function(ev) {
$("#upload-form").on('submit', (function(ev) {
ev.preventDefault();
$.ajax({
xhr: function() {
var progress = $('.progress'),
xhr = $.ajaxSettings.xhr();
progress.show();
xhr.upload.onprogress = function(ev) {
if (ev.lengthComputable) {
var percentComplete = parseInt((ev.loaded / ev.total) * 100);
progress.val(percentComplete);
if (percentComplete === 100) {
progress.hide().val(0);
}
}
};
return xhr;
},
url: 'upload.php',
type: 'POST',
data: new FormData(this),
contentType: false,
cache: false,
processData: false,
success: function(data, status, xhr) {
// ...
},
error: function(xhr, status, error) {
// ...
}
});
}));
});
La manière la plus simple et la plus robuste que j'ai faite dans le passé est de simplement cibler une balise iFrame cachée avec votre formulaire. Il sera ensuite soumis dans l'iframe sans recharger la page.
C’est le cas si vous ne souhaitez pas utiliser de plug-in, JavaScript ou toute autre forme de "magie" autre que HTML. Bien sûr, vous pouvez combiner cela avec JavaScript ou ce que vous avez ...
<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>
Vous pouvez également lire le contenu de l'iframe onLoad pour connaître les erreurs de serveur ou les réponses de réussite, puis l'expédier à l'utilisateur.
Chrome, iFrames et onLoad
- remarque- vous devez continuer à lire si vous êtes intéressé par la façon de configurer un bloqueur d'interface utilisateur lorsque vous effectuez un téléchargement/téléchargement
Actuellement, Chrome ne déclenche pas l'événement onLoad pour l'iframe lorsqu'il est utilisé pour transférer des fichiers. Firefox, IE et Edge déclenchent tous l'événement onload pour les transferts de fichiers.
La seule solution qui fonctionne pour Chrome consiste à utiliser un cookie.
Pour le faire essentiellement lorsque le téléchargement est commencé:
- [Côté client] Commencez un intervalle pour rechercher l'existence d'un cookie
- [Côté serveur] Faites ce que vous voulez avec les données du fichier
- [Côté serveur] Définir le cookie pour l'intervalle côté client
- [Côté client] Interval voit le cookie et l'utilise comme l'événement onLoad. Par exemple, vous pouvez démarrer un bloqueur d'interface utilisateur, puis onLoad (ou lorsqu'un cookie est créé) pour supprimer le bloqueur d'interface utilisateur.
Utiliser un cookie pour cela est moche mais ça marche.
J'ai créé un plugin jQuery pour gérer ce problème pour Chrome lors du téléchargement, vous pouvez trouver ici
https://github.com/ArtisticPhoenix/jQuery-Plugins/blob/master/iDownloader.js
Le même principe de base s'applique également au téléchargement.
Pour utiliser le téléchargeur (y compris le JS, évidemment)
$('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');
});
Et côté serveur, juste avant de transférer les données du fichier, créez le cookie.
setcookie('iDownloader', true, time() + 30, "/");
Le plugin verra le cookie, puis déclenchera le rappel onComplete.
Je l'ai écrit dans un environnement Rails . Il ne s'agit que de cinq lignes de JavaScript, si vous utilisez le plugin léger jQuery-form.
Le défi consiste à faire en sorte que AJAX le téléchargement fonctionne, car le remote_form_for standard ne comprend pas la soumission de formulaire en plusieurs parties. Cela ne va pas envoyer les données du fichier Rails cherche avec la demande AJAX.
C'est là que le plugin jQuery-form entre en jeu.
Voici le code Rails:
<% 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 %>
Voici le code JavaScript associé:
$('#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.
},
});
});
Et voici le Rails action du contrôleur, jolie Vanilla:
@image = Image.new(params[:image_form])
@image.save
render :text => @image.public_filename
Je l’utilise depuis quelques semaines avec Bloggity, et cela a fonctionné comme un champion.
Une solution que j'ai trouvée consistait à faire en sorte que le <form> cible un iFrame caché. L'iFrame peut ensuite exécuter JS pour indiquer à l'utilisateur qu'il est complet (chargement de la page).
Simple Ajax Uploader est une autre option:
https://github.com/LPology/Simple-Ajax-Uploader
- Cross-browser - fonctionne dans IE7 +, Firefox, Chrome, Safari, Opera
- Prend en charge plusieurs téléchargements simultanés, même dans des navigateurs autres que HTML5
- Pas de flash ou de CSS externe - juste un fichier Javascript de 5 Ko
- Prise en charge intégrée facultative des barres de progression couvrant plusieurs navigateurs (utilisant l'extension APC de PHP)
- Flexible et hautement personnalisable - utilisez n'importe quel élément comme bouton de téléchargement, personnalisez vos propres indicateurs de progression
- Aucun formulaire requis, il suffit de fournir un élément qui servira de bouton de téléchargement
- Licence MIT - libre d'utilisation dans un projet commercial
Exemple d'utilisation:
var uploader = new ss.SimpleUpload({
button: $('#uploadBtn'), // upload button
url: '/uploadhandler', // URL of server-side upload handler
name: 'userfile', // parameter name of the uploaded file
onSubmit: function() {
this.setProgressBar( $('#progressBar') ); // designate elem as our progress bar
},
onComplete: function(file, response) {
// do whatever after upload is finished
}
});
jQuery ploadify est un autre bon plugin que j'ai utilisé avant de télécharger des fichiers. Le code JavaScript est aussi simple que ce qui suit: code. Cependant, la nouvelle version ne fonctionne pas dans 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) {
// ...
}
});
J'ai fait beaucoup de recherches et je suis venu à une autre solution pour télécharger des fichiers sans aucun plugin et uniquement avec ajax. La solution est comme ci-dessous:
$(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);
}
Voici juste une autre solution pour télécharger un fichier ( sans plugin )
Utilisation de javascripts simples et AJAX (avec barre de progression)
Partie 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>
JS part
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";
}
partie 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";
}
?>
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){ }
});
Vous pouvez utiliser les données de formulaire pour publier toutes vos valeurs, y compris les images.
Pour télécharger un fichier de manière asynchrone avec Jquery, suivez les étapes ci-dessous:
étape 1 Dans votre projet, ouvrez le gestionnaire Nuget et ajoutez un package (jquery fileupload (vous devez seulement l'écrire dans le champ de recherche) pour l'installer et l'installer. )) URL: https://github.com/blueimp/jQuery-File-Upload
étape 2 Ajoutez ci-dessous les scripts dans les fichiers HTML, qui sont déjà ajoutés au projet en exécutant le package ci-dessus:
jquery.ui.widget.js
jquery.iframe-transport.js
jquery.fileupload.js
étape 3 Écrire le contrôle de téléchargement de fichier conformément au code ci-dessous:
<input id="upload" name="upload" type="file" />
étape 4 écrivez une méthode js comme uploadFile comme ci-dessous:
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
}
});
};
étape 5 Lorsque vous appelez une fonction prête, téléchargez le fichier d'élément pour lancer le processus, comme indiqué ci-dessous:
$(document).ready(function()
{
uploadFile($('#upload'));
});
étape 6 Écrivez le contrôleur et l'action de MVC comme indiqué ci-dessous:
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
};
}
}
Une approche moderne sans Jquery consiste à utiliser l'objet FileList que vous récupérez de <input type="file"> lorsque l'utilisateur sélectionne un fichier. (s) puis utilisez Fetch pour publier la liste de fichiers enroulée autour d'un objet FormData .
// The input DOM element // <input type="file">
const inputElement = document.querySelector('input[type=file]');
// Listen for a file submit from user
inputElement.addEventListener('change', () => {
const data = new FormData();
data.append('file', inputElement.files[0]);
data.append('imageName', 'flower');
// You can then post it to your server.
// Fetch can accept an object of type FormData on its body
fetch('/uploadImage', {
method: 'POST',
body: data
});
});
Convertissez le fichier en base64 en utilisant | HTML5's readAsDataURL () ou n encodeur base64 . violon ici
var reader = new FileReader();
reader.onload = function(readerEvt) {
var binaryString = readerEvt.target.result;
document.getElementById("base64textarea").value = btoa(binaryString);
};
reader.readAsBinaryString(file);
Puis pour récupérer:
window.open("data:application/octet-stream;base64," + base64);
Vous pouvez utiliser
$(function() {
$("#file_upload_1").uploadify({
height : 30,
swf : '/uploadify/uploadify.swf',
uploader : '/uploadify/uploadify.php',
width : 120
});
});
Exemple: Si vous utilisez jQuery, vous pouvez facilement créer un fichier de téléchargement. Ceci est un plugin jQuery petit et puissant, http://jquery.malsup.com/form/ .
Exemple
var $bar = $('.ProgressBar');
$('.Form').ajaxForm({
dataType: 'json',
beforeSend: function(xhr) {
var percentVal = '0%';
$bar.width(percentVal);
},
uploadProgress: function(event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
$bar.width(percentVal)
},
success: function(response) {
// Response
}
});
J'espère que ce serait utile
Vous pouvez voir une solution résolue avec une démonstration fonctionnante ici qui vous permet de prévisualiser et de soumettre des fichiers de formulaire au serveur. Pour votre cas, vous devez utiliser Ajax pour faciliter le téléchargement du fichier sur le serveur:
<from action="" id="formContent" method="post" enctype="multipart/form-data">
<span>File</span>
<input type="file" id="file" name="file" size="10"/>
<input id="uploadbutton" type="button" value="Upload"/>
</form>
Les données soumises sont des données de formulaire. Sur votre jQuery, utilisez une fonction d'envoi de formulaire au lieu d'un clic de souris pour soumettre le fichier de formulaire comme indiqué ci-dessous.
$(document).ready(function () {
$("#formContent").submit(function(e){
e.preventDefault();
var formdata = new FormData(this);
$.ajax({
url: "ajax_upload_image.php",
type: "POST",
data: formdata,
mimeTypes:"multipart/form-data",
contentType: false,
cache: false,
processData: false,
success: function(){
alert("successfully submitted");
});
});
});
Vous pouvez transmettre des paramètres supplémentaires avec le nom de fichier lors de la création d'un téléchargement asynchrone à l'aide de XMLHttpRequest (sans dépendance flash et iframe). Ajoutez la valeur de paramètre supplémentaire avec FormData et envoyez la demande de téléchargement.
var formData = new FormData();
formData.append('parameter1', 'value1');
formData.append('parameter2', 'value2');
formData.append('file', $('input[type=file]')[0].files[0]);
$.ajax({
url: 'post back url',
data: formData,
// other attributes of AJAX
});
En outre, le téléchargement de fichier de l'interface utilisateur JavaScript de Syncfusion fournit une solution pour ce scénario en utilisant simplement un argument d'événement. vous pouvez trouver la documentation ici et plus de détails sur cette commande ici entrer le descriptif du lien ici
Recherchez la gestion du processus de téléchargement d'un fichier, de manière asynchrone ici: https://developer.mozilla.org/en-US/ docs/Using_files_from_web_applications
Échantillon du lien
<?php
if (isset($_FILES['myFile'])) {
// Example:
move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']);
exit;
}
?><!DOCTYPE html>
<html>
<head>
<title>dnd binary upload</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function sendFile(file) {
var uri = "/index.php";
var xhr = new XMLHttpRequest();
var fd = new FormData();
xhr.open("POST", uri, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// Handle response.
alert(xhr.responseText); // handle response.
}
};
fd.append('myFile', file);
// Initiate a multipart/form-data upload
xhr.send(fd);
}
window.onload = function() {
var dropzone = document.getElementById("dropzone");
dropzone.ondragover = dropzone.ondragenter = function(event) {
event.stopPropagation();
event.preventDefault();
}
dropzone.ondrop = function(event) {
event.stopPropagation();
event.preventDefault();
var filesArray = event.dataTransfer.files;
for (var i=0; i<filesArray.length; i++) {
sendFile(filesArray[i]);
}
}
}
</script>
</head>
<body>
<div>
<div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;">Drag & drop your file here...</div>
</div>
</body>
</html>
Vous pouvez utiliser le code suivant.
async: false(true)
En utilisant HTML5 et JavaScript , le téléchargement asynchrone est assez facile, je crée le En chargeant la logique avec votre code HTML, cela ne fonctionne pas complètement car il a besoin de l'API, mais montrez comment cela fonctionne. Si vous avez un noeud final appelé /upload à partir de la racine de votre site Web, ce code devrait fonctionner pour vous:
const asyncFileUpload = () => {
const fileInput = document.getElementById("file");
const file = fileInput.files[0];
const uri = "/upload";
const xhr = new XMLHttpRequest();
xhr.upload.onprogress = e => {
const percentage = e.loaded / e.total;
console.log(percentage);
};
xhr.onreadystatechange = e => {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log("file uploaded");
}
};
xhr.open("POST", uri, true);
xhr.setRequestHeader("X-FileName", file.name);
xhr.send(file);
}<form>
<span>File</span>
<input type="file" id="file" name="file" size="10" />
<input onclick="asyncFileUpload()" id="upload" type="button" value="Upload" />
</form>Quelques informations supplémentaires sur XMLHttpReques:
L'objet XMLHttpRequest
Tous les navigateurs modernes prennent en charge l'objet XMLHttpRequest. L'objet XMLHttpRequest peut être utilisé pour échanger des données avec un serveur Web en coulisse. Cela signifie qu'il est possible de mettre à jour des parties d'une page Web sans recharger toute la page.
Créez un objet XMLHttpRequest
Tous les navigateurs modernes (Chrome, Firefox, IE7 +, Edge, Safari, Opera) ont un objet XMLHttpRequest intégré.
Syntaxe pour créer un objet XMLHttpRequest:
variable = new XMLHttpRequest ();
Accès entre les domaines
Pour des raisons de sécurité, les navigateurs modernes n'autorisent pas l'accès à plusieurs domaines.
Cela signifie que la page Web et le fichier XML qu'il essaie de charger doivent être situés sur le même serveur.
Les exemples de W3Schools ouvrent tous des fichiers XML situés sur le domaine W3Schools.
Si vous souhaitez utiliser l'exemple ci-dessus sur l'une de vos propres pages Web, les fichiers XML que vous chargez doivent être situés sur votre propre serveur.
Pour plus de détails, vous pouvez continuer à lire ici ...
Vous pouvez effectuer les téléchargements de plusieurs fichiers asynchrones à l'aide de JavaScript ou de jQuery sans utiliser de plug-in. Vous pouvez également afficher la progression en temps réel du téléchargement de fichier dans le contrôle de progression. J'ai rencontré 2 beaux liens -
- Fonction de téléchargement de fichiers multiples basée sur les formulaires Web ASP.NET avec barre de progression
- Téléchargement de fichiers multiples basé sur ASP.NET MVC fait en jQuery
Le langage côté serveur est C # mais vous pouvez faire quelques modifications pour le faire fonctionner avec un autre langage comme PHP.
Téléchargement de fichier ASP.NET Core MVC:
Dans la vue Créer un contrôle de téléchargement de fichier en HTML:
<form method="post" asp-action="Add" enctype="multipart/form-data">
<input type="file" multiple name="mediaUpload" />
<button type="submit">Submit</button>
</form>
Maintenant, créez une méthode d'action dans votre contrôleur:
[HttpPost]
public async Task<IActionResult> Add(IFormFile[] mediaUpload)
{
//looping through all the files
foreach (IFormFile file in mediaUpload)
{
//saving the files
string path = Path.Combine(hostingEnvironment.WebRootPath, "some-folder-path");
using (var stream = new FileStream(path, FileMode.Create))
{
await file.CopyToAsync(stream);
}
}
}
la variable hostingEnvironment est de type IHostingEnvironment et peut être injectée au contrôleur à l'aide de l'injection de dépendance, telle que:
private IHostingEnvironment hostingEnvironment;
public MediaController(IHostingEnvironment environment)
{
hostingEnvironment = environment;
}
Ceci est ma solution.
<form enctype="multipart/form-data">
<div class="form-group">
<label class="control-label col-md-2" for="apta_Description">Description</label>
<div class="col-md-10">
<input class="form-control text-box single-line" id="apta_Description" name="apta_Description" type="text" value="">
</div>
</div>
<input name="file" type="file" />
<input type="button" value="Upload" />
</form>
et le js
<script>
$(':button').click(function () {
var formData = new FormData($('form')[0]);
$.ajax({
url: '@Url.Action("Save", "Home")',
type: 'POST',
success: completeHandler,
data: formData,
cache: false,
contentType: false,
processData: false
});
});
function completeHandler() {
alert(":)");
}
</script>
Manette
[HttpPost]
public ActionResult Save(string apta_Description, HttpPostedFileBase file)
{
return Json(":)");
}
Vous pouvez utiliser plus récent Fetch API en JavaScript. Comme ça:
function uploadButtonCLicked(){
var input = document.querySelector('input[type="file"]')
fetch('/url', {
method: 'POST',
body: input.files[0]
}).then(res => res.json()) // you can do something with response
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', response));
}
Avantage: L'API de récupération est prise en charge de manière native par tous les navigateurs modernes. ne pas importer quoi que ce soit. Notez également que fetch () renvoie un Promise qui est ensuite traité à l'aide de .then(..code to handle response..) de manière asynchrone.
Pour PHP, recherchez https://developer.hyvor.com/php/image-upload-ajax-php-mysql
HTML
<html>
<head>
<title>Image Upload with AJAX, PHP and MYSQL</title>
</head>
<body>
<form onsubmit="submitForm(event);">
<input type="file" name="image" id="image-selecter" accept="image/*">
<input type="submit" name="submit" value="Upload Image">
</form>
<div id="uploading-text" style="display:none;">Uploading...</div>
<img id="preview">
</body>
</html>
JAVASCRIPT
var previewImage = document.getElementById("preview"),
uploadingText = document.getElementById("uploading-text");
function submitForm(event) {
// prevent default form submission
event.preventDefault();
uploadImage();
}
function uploadImage() {
var imageSelecter = document.getElementById("image-selecter"),
file = imageSelecter.files[0];
if (!file)
return alert("Please select a file");
// clear the previous image
previewImage.removeAttribute("src");
// show uploading text
uploadingText.style.display = "block";
// create form data and append the file
var formData = new FormData();
formData.append("image", file);
// do the ajax part
var ajax = new XMLHttpRequest();
ajax.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
var json = JSON.parse(this.responseText);
if (!json || json.status !== true)
return uploadError(json.error);
showImage(json.url);
}
}
ajax.open("POST", "upload.php", true);
ajax.send(formData); // send the form data
}
PHP
<?php
$Host = 'localhost';
$user = 'user';
$password = 'password';
$database = 'database';
$mysqli = new mysqli($Host, $user, $password, $database);
try {
if (empty($_FILES['image'])) {
throw new Exception('Image file is missing');
}
$image = $_FILES['image'];
// check INI error
if ($image['error'] !== 0) {
if ($image['error'] === 1)
throw new Exception('Max upload size exceeded');
throw new Exception('Image uploading error: INI Error');
}
// check if the file exists
if (!file_exists($image['tmp_name']))
throw new Exception('Image file is missing in the server');
$maxFileSize = 2 * 10e6; // in bytes
if ($image['size'] > $maxFileSize)
throw new Exception('Max size limit exceeded');
// check if uploaded file is an image
$imageData = getimagesize($image['tmp_name']);
if (!$imageData)
throw new Exception('Invalid image');
$mimeType = $imageData['mime'];
// validate mime type
$allowedMimeTypes = ['image/jpeg', 'image/png', 'image/gif'];
if (!in_array($mimeType, $allowedMimeTypes))
throw new Exception('Only JPEG, PNG and GIFs are allowed');
// Nice! it's a valid image
// get file extension (ex: jpg, png) not (.jpg)
$fileExtention = strtolower(pathinfo($image['name'] ,PATHINFO_EXTENSION));
// create random name for your image
$fileName = round(microtime(true)) . mt_Rand() . '.' . $fileExtention; // anyfilename.jpg
// Create the path starting from DOCUMENT ROOT of your website
$path = '/examples/image-upload/images/' . $fileName;
// file path in the computer - where to save it
$destination = $_SERVER['DOCUMENT_ROOT'] . $path;
if (!move_uploaded_file($image['tmp_name'], $destination))
throw new Exception('Error in moving the uploaded file');
// create the url
$protocol = stripos($_SERVER['SERVER_PROTOCOL'],'https') === true ? 'https://' : 'http://';
$domain = $protocol . $_SERVER['SERVER_NAME'];
$url = $domain . $path;
$stmt = $mysqli -> prepare('INSERT INTO image_uploads (url) VALUES (?)');
if (
$stmt &&
$stmt -> bind_param('s', $url) &&
$stmt -> execute()
) {
exit(
json_encode(
array(
'status' => true,
'url' => $url
)
)
);
} else
throw new Exception('Error in saving into the database');
} catch (Exception $e) {
exit(json_encode(
array (
'status' => false,
'error' => $e -> getMessage()
)
));
}
Vous pouvez également envisager d'utiliser quelque chose comme https://uppy.io .
Il effectue le téléchargement de fichiers sans quitter la page et offre quelques bonus, tels que le glisser-déposer, la reprise des téléchargements en cas de blocage du réseau ou de réseaux volumineux, et l'importation à partir de, par exemple. Instagram. Il est open source et ne repose pas sur jQuery/React/Angular/Vue, mais peut être utilisé avec. Avertissement: en tant que créateur, je suis partial;)
C'est une vieille question, mais qui n'a toujours pas de réponse bonne réponse, alors:
Avez-vous essayé jQuery-File-Upload ?
Voici un exemple du lien ci-dessus qui pourrait résoudre votre problème:
$('#fileupload').fileupload({
add: function (e, data) {
var that = this;
$.getJSON('/example/url', function (result) {
data.formData = result; // e.g. {id: 123}
$.blueimp.fileupload.prototype
.options.add.call(that, e, data);
});
}
});
Essayer
async function saveFile()
{
let formData = new FormData();
formData.append("file", file.files[0]);
await fetch('addFile.do', {method: "POST", body: formData});
alert("Data Uploaded: ");
}<span>File</span>
<input type="file" id="file" name="file" size="10"/>
<input type="button" value="Upload" onclick="saveFile()"/>Le content-type='multipart/form-data' est défini automatiquement par le navigateur, le nom du fichier est également ajouté. Voici un exemple plus développé avec la gestion des erreurs et l’ajout de json
async function saveFile(inp)
{
let user = { name:'john', age:34 };
let formData = new FormData();
let photo = inp.files[0];
formData.append("photo", photo);
formData.append("user", JSON.stringify(user));
try {
let r = await fetch('/upload/image', {method: "POST", body: formData});
console.log('HTTP response code:',r.status);
alert('success');
} catch(e) {
console.log('Huston we have problem...:', e);
}
}<input type="file" onchange="saveFile(this)" >
<br><br>
Before selecting the file Open chrome console > network tab to see the request details.
<br><br>
<small>Because in this example we send request to https://stacksnippets.net/upload/image the response code will be 404 ofcourse...</small>