Comment puis-je télécharger des fichiers de manière asynchrone?

2019 mise à Jour: Il encore dépend des navigateurs votre démographique utilise.

Une chose importante à comprendre avec la "nouvelle" HTML5 file API qui est n'était pas pris en charge jusqu'à ce que IE 10. Si le marché que vous visez à a un plus élevé que la moyenne prepensity vers des versions plus anciennes de Windows, vous pourriez ne pas avoir accès.

À compter de 2017, environ 5% des navigateurs sont l'un des IE 6, 7, 8 ou 9. Si vous vous dirigez dans une grosse société (par exemple, c'est un outil B2B, ou quelque chose que vous livrez à des fins de formation) que le nombre peut fusée. En 2016, j'ai eu affaire avec une entreprise qui utilise IE8 sur plus de 60% de leurs machines.

C'est 2019 de cette édition, près de 11 ans après ma première réponse. IE9 et inférieur, sont à l'échelle mondiale autour de 1%, mais il y a encore des grappes de taux d'utilisation.

Le plus important à retenir de ce —quelle que soit la fonction— est, vérifier ce navigateur votre aux utilisateurs d'utiliser. Si vous ne le faites pas, vous allez apprendre une rapide et douloureuse leçon de pourquoi "travaille pour moi" n'est pas assez bon dans la prestation à un client. caniuse est un outil utile mais note où ils obtiennent leur démographie de. Ils ne peuvent pas s'aligner avec les vôtres. Ce n'est jamais plus vrai que les environnements d'entreprise.

Ma réponse à partir de 2008 de la façon suivante.

---

Cependant, il existe viable non-JS méthodes de téléchargement de fichiers. Vous pouvez créer un iframe sur la page (que vous cacher avec du CSS) et ensuite cibler votre formulaire de post pour que l'iframe. La page principale n'a pas besoin de se déplacer.

C'est un "vrai" post il n'est donc pas entièrement interactif. Si vous avez besoin de vous besoin de quelque chose côté serveur de processus. Cela varie massivement en fonction de votre serveur. ASP.NET a plus agréable mécanismes. PHP plain échoue, mais vous pouvez utiliser Perl ou Apache modifications de la contourner.

Si vous avez besoin de plusieurs fichiers uploads, il est préférable de faire un fichier à la fois (à surmonter maximale de téléchargement de fichiers des limites). Post la première forme de l'iframe, suivi de ses progrès à l'aide de la et quand il a fini, après la deuxième forme de l'iframe, et ainsi de suite.

Ou utiliser un Java/Flash solution. Ils sont beaucoup plus flexibles en ce qu'ils peuvent faire avec leurs messages...

Note: Cette réponse est obsolète, il est maintenant possible de télécharger des fichiers à l'aide de XHR.

---

Vous ne pouvez pas télécharger des fichiers à l'aide de XMLHttpRequest (Ajax). Vous pouvez simuler l'effet en utilisant une iframe ou Flash. L'excellent jQuery Forme de Plugin que les messages que vos fichiers via un iframe pour obtenir l'effet.

Ce AJAX upload de fichier plugin jQuery télécharge le fichier quelque part, et passe le
réponse à un rappel, rien d'autre.

• Il ne dépend pas de code HTML spécifique, juste lui donner un <input type="file">
• Il n'a pas besoin de votre serveur à répondre d'une manière particulière
• Il n'a pas d'importance combien de fichiers que vous utilisez, ou si elles sont sur la page

-- Utiliser aussi peu que --

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

-- ou --

$('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');
  }
});

Vous pouvez le faire en JavaScript natif 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);

Le plus simple et le plus robuste de la façon dont je l'ai fait dans le passé, c'est tout simplement une cible cachée balise iFrame avec votre formulaire, puis il soumettra à l'intérieur de l'iframe sans recharger la page.

Qui est si vous ne souhaitez pas utiliser un plugin, JavaScript, ou toute autre forme de "magie" d'autres que le HTML. Bien sûr, vous pouvez combiner cela avec le JavaScript ou qu'avez-vous...

<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 les erreurs de serveur ou de réponses de réussite et alors que la sortie de l'utilisateur.

Chrome, iframe, et onLoad

-note - vous seulement besoin de continuer à lire si vous vous intéressez à la configuration de l'INTERFACE utilisateur bloqueur lorsque vous effectuez un téléchargement

Actuellement Chrome ne déclenche pas l'événement onLoad de la balise iframe quand il est utilisé pour transférer des fichiers. Firefox, IE, et à Bord d'un incendie à l'événement onload pour les transferts de fichiers.

La seule solution que j'ai trouvé qui fonctionne pour Chrome a été d'utiliser un cookie.

Faire que, fondamentalement, une fois le chargement/téléchargement est lancé:

• [Côté Client] Début d'un intervalle à rechercher l'existence d'un cookie
• [Côté serveur] Faire ce que vous devez avec les données du fichier
• [Côté serveur] cookie Ensemble pour le côté client de l'intervalle de
• [Côté Client] Intervalle voit le cookie et l'utilise comme l'événement onLoad. Par exemple, vous pouvez démarrer une INTERFACE utilisateur bloqueur puis onLoad ( ou lorsque le biscuit est fait ), vous enlevez l'INTERFACE utilisateur bloquant.

À l'aide d'un cookie pour ce qui est laid, mais il fonctionne.

J'ai fait un plugin jQuery pour gérer ce problème pour google 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 qui s'applique à la mise en ligne, ainsi.

À utiliser le téléchargeur ( inclure 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 sur le côté serveur, juste avant de transférer le fichier de données, créer le cookie

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

Le plugin va voir le cookie, puis déclencher le onComplete de rappel.

J'ai écrit cela dans un environnement Rails. Il n'est que d'environ cinq lignes de JavaScript, si vous utilisez le léger jQuery-forme de plugin.

Le défi consiste à obtenir de l'AJAX upload de travail comme la norme remote_form_for ne comprends pas partie multi-formulaire de soumission. Il ne va pas envoyer le fichier de données Rails cherche de retour avec la requête AJAX.

C'est là que le jQuery-forme de plugin est en jeu.

Voici les Rails code:

<% 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 JavaScript associées:

$('#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 les Rails de contrôleur de l'action, la jolie vanille:

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

J'ai été en utilisant cette depuis quelques semaines avec Bloggity, et il a travaillé comme un champion.

jQuery Uploadify est un autre bon plugin que j'ai utilisé avant de télécharger des fichiers. Le code JavaScript est aussi simple que: le code. Toutefois, 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 recherche et j'en viens à une autre solution pour télécharger des fichiers sans aucun plugin, et seulement avec l'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);
}

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 le formulaire de données pour toutes les valeurs, y compris les images.

Convertir fichier en base64 à l'aide de |HTML5 readAsDataURL() ou certains encoder en 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 à récupérer:

window.open("data:application/octet-stream;base64," + base64);

Vous pouvez voir une solution résolu avec un travail de démonstration ici qui vous permet de prévisualiser et envoyer le formulaire de fichiers vers le serveur. Pour votre cas, vous devez utiliser Ajax pour faciliter l'upload de 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 présentées est un formdata. Sur votre jQuery, utilisez un formulaire de soumission de la fonction au lieu d'un clic sur un bouton pour soumettre le formulaire de fichier 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");
});
});
});

Voir plus de détails

Une approche moderne de la sans Jquery est d'utiliser le FileList objet que vous recevez de <input type="file"> lorsque l'utilisateur sélectionne un fichier(s) et utilisez ensuite Fetch de publier la liste de Fichiers s'enrouler autour d'un FormData objet.

//The input DOM element
const inputElement = document.querySelector('input');
//Listen for a file submit from user
inputElement.addEventListener('change', () => {
const data = new FormData();
data.append('file', inputElement.files[0]);
data.append('imageName', 'flower');
//Post to server
fetch('/uploadImage', {
method: 'POST',
body: data
});
});

Recherchez de la Manipulation du processus de téléchargement d'un fichier en mode asynchrone ici:
https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

De l'échantillon à partir 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>

À l'aide de HTML5 et JavaScript, téléchargement asynchrone est assez facile, j'ai créer le téléchargement logique avec votre code html, ce n'est pas complète, car elle a besoin de l'api, mais de démontrer comment il fonctionne, si vous avez le point de terminaison appelé /upload de la racine de votre site, ce code devrait fonctionner pour vous:

JS:

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

HTML:

<form>
<span>File</span>
<input type="file" id="file" name="file" size="10" />
<input onclick="asyncFileUpload()" id="upload" type="button" value="Upload" />
</form>

Également quelques informations supplémentaires à propos de XMLHttpReques:

L'Objet XMLHttpRequest

Tous les navigateurs modernes soutien de l'objet XMLHttpRequest.
L'objet XMLHttpRequest peut être utilisé pour échanger des données avec un site web
serveur en arrière-plan. Cela signifie qu'il est possible de mettre à jour
parties d'une page web, sans avoir à recharger la page entière.

Créer un Objet XMLHttpRequest

Tous les navigateurs modernes (Chrome, Firefox,
IE7+, Edge, Safari, Opera) ont un objet XMLHttpRequest.

Syntaxe pour la création d'un objet XMLHttpRequest:

variable = new XMLHttpRequest();

L'Accès À L'Ensemble Des Domaines

Pour des raisons de sécurité, les navigateurs modernes n'
permettre l'accès à l'ensemble des domaines.

Cela signifie que la page web et le fichier XML il essaie de charger,
doit être situé sur le même serveur.

Les exemples sur W3Schools tous les fichiers open XML situé sur la W3Schools
domaine.

Si vous souhaitez utiliser l'exemple ci-dessus sur l'un de vos propres pages web, le
Les fichiers XML que vous charge doit être situé sur votre propre serveur.

Pour plus de détails, vous pouvez continuer la lecture ici...

Vous pouvez utiliser plus récent Chercher de l'API par JavaScript. Comme ceci:

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: Chercher de l'API est pris en charge nativement par tous les navigateurs modernes, de sorte que vous n'avez pas à importer quoi que ce soit. Notez également que fetch() retourne un Promesse qui sont ensuite traités par 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()
)
));
}

C'est une vieille question, mais n'a toujours pas de réponse correcte réponse, donc:

Avez-vous essayé jQuery-File-Upload?

Voici un exemple à partir du lien ci-dessus qui peuvent 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);
});
} 
});