Comment puis-je télécharger des fichiers de manière asynchrone?
j'aimerais télécharger un fichier de façon 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 ici 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 de télécharger le fichier, je ne reçois que le nom du fichier. Que puis-je faire pour régler ce problème?
Solution
j'utilise le jQuery form Plugin pour télécharger des fichiers.
30 réponses
avec HTML5 vous pouvez télécharger des fichiers avec Ajax et jQuery. En plus de cela, vous pouvez effectuer des validations de fichiers (Nom, taille et type MIME) ou gérer l'événement de progression avec la balise de progression HTML5 (ou une div). Récemment, j'ai dû faire un téléchargement de fichier, mais je ne voulais pas utiliser Flash ni Iframes ou plugins et après quelques recherches, j'ai trouvé la solution.
the HTML:
<form enctype="multipart/form-data">
<input name="file" type="file" />
<input type="button" value="Upload" />
</form>
<progress></progress>
First, tu peux faire un peu de validation si tu veux. Par exemple, dans l'événement onChange 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 L'Ajax soumettre 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 voir, avec HTML5 (et certaines recherches) le téléchargement de fichiers devient non seulement possible mais super facile. Essayez avec Google Chrome car certains des composants HTML5 des exemples ne sont pas disponibles dans chaque navigateur.
il y a plusieurs plugins prêts à l'emploi sur le téléchargement de fichiers pour jQuery.
ce genre de téléchargement n'est pas une expérience agréable, donc les gens aiment utiliser des solutions toutes faites.
En voici quelques-uns:
- JQuery File Uploader
- Plugin De Téléchargement De Fichiers Multiples
- Mini-Télécharger Plusieurs Fichiers À L'
- jQuery File Upload
vous pouvez rechercher d'autres projets sur NPM (en utilisant "jQuery-plugin" comme mot clé) ou sur Github.
2017 Mise à jour: il dépend toujours sur les navigateurs votre utilisations démographiques.
une chose importante à comprendre avec le" nouveau "HTML5 file API est que n'a pas été pris en charge JUSQU'à ce que IE 10 . Si le marché spécifique que vous visez a une densité supérieure à la moyenne vers les anciennes versions de Windows, vous pourriez ne pas y avoir accès.
en entrant dans 2017, environ 5% des navigateurs sont un D'IE 6, 7, 8 ou 9. Si vous allez dans une grande entreprise (par exemple, il s'agit d'un outil B2B, ou quelque chose que vous livrez pour la formation) ce nombre peut fusée. Il y a quelques mois à peine-en 2016 - j'ai traité avec une entreprise utilisant IE8 sur plus de 60% de ses machines.
donc avant de faire quoi que ce soit: Vérifiez quel navigateur votre les utilisateurs utilisent . Si vous ne le faites pas, vous apprendrez rapidement et douloureusement pourquoi "travaille pour moi" n'est pas assez bon dans un livrable à un client.
ma réponse de 2008 suit.
cependant, il existe des méthodes non-JS viables de téléchargement de fichiers. Vous pouvez créer une iframe sur la page (que vous cachez avec CSS) et ensuite cibler votre formulaire pour l'afficher sur cette iframe. La page principale n'a pas besoin de bouger.
C'est un" vrai " post donc ce n'est pas entièrement interactif. Si vous avez besoin de vous besoin de quelque chose côté serveur de processus. Cela varie considérablement en fonction de votre serveur. ASP.NET a des mécanismes plus agréables. 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 faire chaque fichier un à la fois (pour surmonter les limites maximales de téléchargement de fichiers). Postez le premier formulaire à l'iframe, surveillez sa progression en utilisant le ci-dessus et quand il a terminé, postez le deuxième formulaire à l'iframe, et ainsi de suite.
ou utiliser une solution Java/Flash. Ils sont beaucoup plus flexibles en ce qu'ils peuvent faire avec leurs postes...
je recommande d'utiliser le plugin Fine Uploader à cet effet. Votre code JavaScript serait:
$(document).ready(function() {
$("#uploadbutton").jsupload({
action: "addFile.do",
onComplete: function(response){
alert( "server response: " + response);
}
});
});
Note: Cette réponse est périmée, il est maintenant possible de télécharger des fichiers en utilisant 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 Plugin qui affiche vos fichiers à travers une 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
- peu importe le nombre de fichiers que vous utilisez, ou l'endroit où ils se trouvent sur la page
-- Utilisez 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');
}
});
Emballage pour les futurs lecteurs.
Téléchargement De Fichiers Asynchrones
avec HTML5
vous pouvez télécharger des fichiers avec jQuery en utilisant la méthode $.ajax() si FormData et le File API sont pris en charge (les deux fonctionnalités HTML5).
vous pouvez également envoyer des fichiers sans FormData mais dans tous les cas le fichier L'API doit être présente pour traiter les fichiers de telle manière 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 rapide, JavaScript ( pas de jQuery ) exemple voir " l'Envoi de fichiers à l'aide d'un objet FormData ".
de Secours
lorsque HTML5 n'est pas pris en charge (pas de File API ) la seule autre solution JavaScript pure (pas de Flash ou tout autre plugin de navigateur) est la technique iframe caché , qui permet d'émuler une requête asynchrone sans utiliser l'objet Xmltprequest .
il consiste à définir une iframe comme cible du formulaire avec les entrées du fichier. Lorsque l'utilisateur soumet une requête est faite et les fichiers sont téléchargés mais la réponse est affichée à l'intérieur de l'iframe au lieu de re-rendre le principal page. Masquage de l'iframe rend l'ensemble du processus transparent pour l'utilisateur et émule une requête asynchrone.
si fait correctement, il devrait fonctionner pratiquement sur n'importe quel navigateur, mais il a quelques mises en garde comme la façon d'obtenir la réponse de l'iframe.
dans ce cas, vous pouvez préférer utiliser un plugin wrapper comme Bifröst qui utilise la technique iframe mais fournit également un Jquery Ajax transport permettant de 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 le support de repli à la méthode ajax de jQuery, mais beaucoup des plugins susmentionnés comme Plugin de forme jQuery ou téléchargement de fichier jQuery inclure l'ensemble de la pile de HTML5 à différents des issues et des fonctionnalités utiles pour faciliter le processus. En fonction de vos besoins et exigences, vous pouvez envisager une implémentation pure ou l'un ou l'autre de ces plugins.
j'ai utilisé le script ci-dessous pour télécharger des images qui fonctionnent 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 montrer l'animation de téléchargement et la réponse après le téléchargement est fait.
la Meilleure partie est que vous pouvez envoyer des données supplémentaires telles que l'id & etc avec le fichier lorsque vous utilisez ce script. J'ai le mentionner extra-data comme dans le script.
au niveau de PHP cela fonctionnera comme un téléchargement de fichier normal. les données supplémentaires peuvent être extraites en tant que données $_POST .
ici vous n'utilisez pas un plugin et tout. Vous pouvez le modifier comme vous le souhaitez. Vous ne codez pas aveuglément ici. C'est la fonctionnalité de base de jQuery téléchargement de fichiers. En Fait En Javascript.
j'ai rencontré quelques bibliothèques de téléchargement de fichiers vraiment puissantes basées sur jQuery. Regardez ça:
vous pouvez télécharger simplement 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) {
// ...
}
});
}));
});
vous pouvez le faire en JavaScript 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);
la façon la plus simple et la plus robuste que j'ai fait cela dans le passé, est de simplement cibler une balise iFrame cachée avec votre formulaire - puis il se soumettra dans l'iframe sans recharger la page.
C'est-à-dire si vous ne voulez pas utiliser un plugin, 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 les erreurs du serveur ou les réponses de succès et ensuite la sortie que l'utilisateur.
Chrome, iFrames, et onLoad
- note-vous n'avez besoin de continuer à lire que si vous êtes intéressé par la façon de configurer un bloqueur D'UI lors du chargement/téléchargement
actuellement, Chrome ne déclenche pas l'événement onLoad pour iframe lorsqu'il est utilisé pour transférer des fichiers. Firefox, IE, et Edge tous le feu l'onload événement pour les transferts de fichiers.
la seule solution que J'ai trouvé fonctionne pour Chrome était d'utiliser un cookie.
pour faire cela essentiellement quand le téléchargement / téléchargement est commencé:
- [côté Client] lancer un intervalle pour rechercher l'existence d'un cookie
- [Côté Serveur] faites tout ce que vous devez faire avec les données du fichier
- [Côté Serveur] définir 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'UI et ensuite charger ( ou lorsque le cookie est fait ) vous supprimez le bloqueur D'UI.
utiliser un cookie pour ceci est laid mais cela fonctionne.
j'ai fait 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 ( 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 du côté du serveur, juste avant de transférer les données du fichier, créer le cookie
setcookie('iDownloader', true, time() + 30, "/");
le plugin verra le cookie, puis déclenchera le callback onComplete .
une solution que j'ai trouvée était d'avoir la cible <form> une iFrame cachée. L'iFrame peut alors exécuter JS pour afficher à l'utilisateur qu'il est complet (sur le chargement de la page).
j'ai écrit ceci dans un environnement de Rails . Ce N'est qu'environ cinq lignes de JavaScript, si vous utilisez le plugin léger jQuery-form.
le défi consiste à faire fonctionner AJAX upload comme la norme remote_form_for ne comprend pas la soumission de formulaires en plusieurs parties. Il ne va pas envoyer le fichier de données que Rails cherche en arrière avec la demande AJAX.
C'est là que le plugin jQuery-form entre en jeu.
voici le code des 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 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 l'action du contrôleur de Rails, pretty vanilla:
@image = Image.new(params[:image_form])
@image.save
render :text => @image.public_filename
J'ai utilisé ça ces dernières semaines avec Bloggity, et ça a marché comme un champion.
simple Ajax Uploader est une autre option:
https://github.com/LPology/Simple-Ajax-Uploader
- Cross-browser -- works in IE7+, Firefox, Chrome, Safari ,Opera
- Supporte plusieurs téléchargements simultanés , même dans les navigateurs non-HTML5
- Pas de flash externe ou CSS -- un seul de 5 ko fichier Javascript
- En Option, prise en charge intégrée croix-navigateur, les barres de progression (à l'aide de PHP APC extension)
- Flexible et hautement personnalisable -- utilisez n'importe quel élément comme bouton de téléchargement, style vos propres indicateurs de progrès
- aucun formulaire requis, il suffit de fournir un élément qui servira de bouton de téléchargement
- licence MIT -- libre de les utiliser dans un autre projet commercial
exemple d'usage:
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 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. 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 recherche et je suis venu à une autre solution pour télécharger des fichiers sans aucun plugin et seulement avec ajax. La solution est la suivante:
$(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 une autre solution pour télécharger un fichier ( sans aucun plugin )
utilisant simple Javascripts 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>
partie JS
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 du formulaire pour afficher toutes vos valeurs, y compris les images.
pour télécharger le fichier de manière asynchrone avec Jquery utilisez les étapes ci-dessous:
étape 1 dans votre projet ouvrir Nuget manager et ajouter paquet (jQuery fileupload(seulement vous avez besoin de l'écrire dans la boîte de recherche, il viendra et l'installer.)) URL: https://github.com/blueimp/jQuery-File-Upload
step 2 ajouter les scripts ci-dessous dans les fichiers HTML, qui sont déjà ajoutés au projet par exécution du paquet ci-dessus:
jquery.interface.widget.js
jquery.iframe-transport.js
jquery.fileupload.js
l'étape 3 Écrire le fichier de contrôle de téléchargement comme par code ci-dessous:
<input id="upload" name="upload" type="file" />
étape 4 écrire 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 dans la fonction ready, appeler le fichier d'élément Télécharger pour lancer le processus comme indiqué ci-dessous:
$(document).ready(function()
{
uploadFile($('#upload'));
});
à l'étape 6 Écrire MVC contrôleur et l'Action comme par 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
};
}
}
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ésolue avec une démo de travail ici qui vous permet de prévisualiser et 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 formdata. Sur votre jQuery, utilisez une fonction de soumission de formulaire au lieu d'un clic de bouton 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");
});
});
});
exemple: si vous utilisez jQuery, vous pouvez facilement télécharger un fichier. C'est un petit et fort plugin jQuery, 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 qu'il serait utile
chercher gérer le processus de téléchargement d'un fichier, 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>
C'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>
contrôleur
[HttpPost]
public ActionResult Save(string apta_Description, HttpPostedFileBase file)
{
return Json(":)");
}
en utilisant HTML5 et JavaScript , le téléchargement async est assez facile, je crée la logique de téléchargement avec votre html, cela ne fonctionne pas entièrement car il a besoin de l'api, mais montrer comment cela fonctionne, si vous avez le point final appelé /upload 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>également quelques informations supplémentaires sur Xmlhttprèques:
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 web serveur en arrière-plan. Cela signifie qu'il est possible de mettre à jour parties d'une page web, sans recharger la page entière.
créer 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 À Travers Les Domaines
pour des raisons de sécurité, les navigateurs modernes ne permettre l'accès à l'ensemble des domaines.
cela signifie que la page web et le fichier XML qu'il essaie de charger, doit être situé sur le même serveur.
les exemples sur W3Schools tous les fichiers XML ouverts situés sur les W3Schools domaine.
Si vous souhaitez utiliser l'exemple ci-dessus sur l'un de vos propres pages web, le Les fichiers XML que vous chargez doivent être situés sur votre propre serveur.
pour plus de détails, vous pouvez continuer à lire ici ...
Une approche moderne de la sans Jquery est d'utiliser le FileList objet que vous recevez à partir de <input type="file"> lorsque l'utilisateur sélectionne un fichier(s) et utilisez ensuite Fetch pour afficher 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
})
});
vous pouvez utiliser plus récent Fetch 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: Fetch API est nativement pris en charge par tous les navigateurs modernes, donc vous n'avez pas à importer quoi que ce soit. De plus, notez que fetch() renvoie une Promise qui est ensuite traitée en utilisant .then(..code to handle response..) de façon asynchrone.
c'est une question ancienne, mais n'a toujours pas de réponse réponse correcte, donc:
avez-vous essayé jQuery-File-Upload ?
voici un exemple du lien ci-dessus - > 1 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);
});
}
});
vous pouvez faire le téléchargement asynchrone de fichiers multiples en utilisant JavaScript ou jQuery et cela sans utiliser de plugin. Vous pouvez également afficher la progression en temps réel du téléchargement de fichier dans le contrôle de progression. Je suis tombé sur 2 liens sympas -
- ASP.NET fonction de téléchargement de plusieurs fichiers à partir de formulaires Web avec barre de progression
- ASP.NET MVC basé Télécharger Plusieurs Fichiers à fait en jQuery
le langage côté serveur est C# mais vous pouvez faire quelques modifications pour le faire fonctionner avec D'autres langues comme PHP.
ASP.NET Central MVC:
dans la vue créer le 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>
créez maintenant la méthode d'action dans votre controller:
[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 d'environnement d'accueil est de type IHostingEnvironment qui peut être injecté au contrôleur en utilisant l'injection de dépendance, comme:
private IHostingEnvironment hostingEnvironment;
public MediaController(IHostingEnvironment environment)
{
hostingEnvironment = environment;
}