javascript - via - uploadajaxabci




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

Mise à jour 2017: Cela dépend toujours des navigateurs utilisés par votre démographie.

Une chose importante à comprendre avec la "nouvelle" API de file HTML5 est qu’elle n’a pas été prise en charge avant IE 10 . Si le marché spécifique que vous visez présente une prépensité supérieure à la moyenne par rapport aux versions antérieures de Windows, vous n’y aurez peut-être pas accès.

En 2017, environ 5% des navigateurs font partie des navigateurs IE 6, 7, 8 ou 9. Si vous vous dirigez vers une grande entreprise (par exemple, c'est un outil B2B ou quelque chose que vous proposez à des fins de formation), ce nombre peut exploser. Il y a quelques mois à peine, en 2016, j'ai eu affaire à une entreprise utilisant IE8 sur plus de 60% de ses machines.

Avant de faire quoi que ce soit, vérifiez le navigateur utilisé par vos utilisateurs . Si vous ne le faites pas, vous apprendrez rapidement et douloureusement pourquoi "travailler pour moi" n'est pas suffisant pour être livré à un client.

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 cette iframe. La page principale n'a pas besoin de se déplacer.

C'est un "vrai" message, 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. La version PHP échoue, mais vous pouvez utiliser les modifications Perl ou Apache pour la contourner.

Si vous avez besoin de plusieurs téléchargements de fichiers, il est préférable de créer chaque fichier un par un (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 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 plugin jQuery Form 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>

Premièrement, vous pouvez faire une validation si vous voulez. 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 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.


Envelopper 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 l' API de fichier 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ésente 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 ( pas de jQuery ), voir " Envoi de fichiers à l'aide d'un objet FormData ".

Se retirer

Lorsque HTML5 n'est pas pris en charge (pas d' API de fichier ), la seule autre solution JavaScript pur (pas de plugin de navigateur ni de Flash ) est la technique hidden iframe , qui permet d'émuler une requête 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 préférerez peut-être utiliser un plugin wrapper comme Bifröst qui utilise la technique iframe mais fournit également un transport jQuery Ajax permettant d' envoyer des fichiers avec uniquement la $.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 mentionnés ci-dessus, tels que jQuery Form Plugin ou jQuery File Upload, incluent l'intégralité de la pile de HTML5 vers différents replis 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.


Il existe différents plug-ins prêts à l'emploi pour télécharger des fichiers pour jQuery.

Ce type de téléchargement de hacks n’est pas une expérience agréable, alors les gens aiment utiliser des solutions toutes faites.

En voici quelques uns:

Vous pouvez rechercher plus de projets sur NPM (en utilisant "jquery-plugin" comme mot clé) ou sur Github.


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 response 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. Je l'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 récupérées sous forme $_POST 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.


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 à l'aide de XMLHttpRequest (Ajax). Vous pouvez simuler l'effet à l'aide d'un iframe ou d'un flash. L'excellent plug - in jQuery Form qui poste vos fichiers via une iframe pour obtenir l'effet.


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, créez 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
    }
});

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>

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

Voici l'application EXEMPLE


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

jQuery Uploadify est un autre bon plugin que j'ai utilisé auparavant pour 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 seulement 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);
}

J'ai écrit ceci 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 le téléchargement AJAX fonctionne, car le formulaire standard remote_form_for ne comprend pas la soumission de formulaire en plusieurs parties. Il ne va pas envoyer les données du fichier que Rails cherche avec la demande AJAX.

C'est là que le plugin jQuery-form entre en jeu.

Voici le code Rails pour cela:

<% 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 l'action du contrôleur Rails, jolie vanille:

 @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.


Pour télécharger un fichier de manière asynchrone avec Jquery, suivez les étapes ci-dessous:

étape 1 Dans votre projet, ouvrez Nuget Manager et ajoutez un package (jquery fileupload (vous devez seulement l’écrire dans le champ de recherche, il sera installé et installé).) URL: https://github.com/blueimp/jQuery-File- Télécharger

étape 2 Ajoutez les scripts ci-dessous 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 é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 l’appel à la fonction prête, téléchargement du fichier d’élément pour lancer le processus, comme indiqué ci-dessous:

$(document).ready(function()
{
    uploadFile($('#upload'));

});

étape 6 Ecrire le contrôleur MVC et l’action 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
                };


        }

    }

Vous pouvez utiliser

$(function() {
    $("#file_upload_1").uploadify({
        height        : 30,
        swf           : '/uploadify/uploadify.swf',
        uploader      : '/uploadify/uploadify.php',
        width         : 120
    });
});

Demo


En utilisant HTML5 et JavaScript , le téléchargement asynchrone est assez facile, je crée la logique de téléchargement avec votre code HTML, cela ne fonctionne pas complètement car il a besoin de l’API, mais montrez comment cela fonctionne, si le point de terminaison est appelé à /uploadpartir 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é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 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 here ...


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 ça serait utile


Une approche moderne sans Jquery consiste à utiliser l' objet FileList vous récupérez <input type="file">lorsque l'utilisateur sélectionne un fichier, puis à utiliser Fetch pour publier la liste de fichiers entourée d'un objet FormData .

// 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 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 -

  1. Fonction de téléchargement de fichiers multiples basée sur les formulaires Web ASP.NET avec barre de progression
  2. Téléchargement de fichiers multiples basé sur ASP.NET MVC effectué dans 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:

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

Maintenant, créez une méthode d'action dans votre contrôleur:

private IHostingEnvironment hostingEnvironment;
public MediaController(IHostingEnvironment environment)
{
    hostingEnvironment = environment;
}

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:

$('#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 utiliser la nouvelle API Fetch par JavaScript. Comme ça:

<form method="post" asp-action="Add" enctype="multipart/form-data">
    <input type="file" multiple name="mediaUpload" />
    <button type="submit">Submit</button>
</form>

Avantage: L' API de récupération est prise en charge de manière native par tous les navigateurs modernes. Vous n'avez donc rien à importer. Notez également que fetch () renvoie une Promise qui est ensuite gérée de .then(..code to handle response..)manière asynchrone.


Vous pouvez voir une solution résolu avec une démo de travail here qui vous permet de 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 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");

     });
   });
});

here







upload