Wie kann ich Dateien hochladen asynchron?

Mit HTML5 Sie können Datei-Upload mit Ajax und jQuery. Nicht nur das, Sie können tun, Datei-Validierungen (name, Größe und MIME-Typ) oder Sie behandeln das progress-Ereignis mit der HTML5-progress-tag (oder ein div). Kürzlich hatte ich eine Datei hochlade, aber ich wollte nicht zu verwenden Flash noch Iframes oder plugins, und nach einigen Recherchen kam ich auf die Lösung.

HTML:

<form enctype="multipart/form-data">
    <input name="file" type="file" />
    <input type="button" value="Upload" />
</form>
<progress></progress>

Ersten, können Sie einige der überprüfung, wenn Sie wollen. Zum Beispiel, in der .on('change') Fall der Datei:

$(':file').on('change', function () {
  var file = this.files[0];

  if (file.size > 1024) {
    alert('max upload size is 1k');
  }

  //Also see .name, .type
});

Nun die $.ajax() abschicken mit klicken auf die Schaltfläche:

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

Wie Sie sehen können, mit HTML5 (und einige der Forschung) Datei hochladen, wird nicht nur möglich, sondern auch super einfach. Versuchen Sie es mit Google Chrome als einige der HTML5-Komponenten der Beispiele sind nicht in jedem browser.

InformationsquelleAutor olanod

Empfehle ich die Fine Uploader plugin für diesen Zweck. Ihre JavaScript code wäre:

$(document).ready(function() {
  $("#uploadbutton").jsupload({
    action: "addFile.do",
    onComplete: function(response){
      alert( "server response: " + response);
    }
  });
});

InformationsquelleAutor

Verpackung für die zukünftigen Leser.

Asynchrone Datei-Upload

Mit HTML5

Können Sie Dateien hochladen mit jQuery mit der $.ajax() Methode, wenn FormData und die Datei-API unterstützt werden (sowohl HTML5-features).

Können Sie auch Dateien senden ohne FormData aber so oder so wird die File API vorhanden sein muss, um Dateien zu Bearbeiten, in einer Weise, dass Sie gesendet werden können, mit 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!");
});

Für eine schnelle, pure JavaScript (kein jQuery) Beispiel siehe "Senden von Dateien mit einem FormData-Objekt".

Fallback

Wenn HTML5 nicht unterstützt (keine Datei API -) anderen nur die Reine JavaScript-Lösung (keine Flash oder eine andere browser-plugin) ist die versteckten iframe Technik, die es erlaubt, zu emulieren, die eine asynchrone Anfrage ohne Verwendung der XMLHttpRequest Objekt.

Es besteht aus der Einstellung in einem iframe als target des Formulars mit dem Datei-Eingänge. Wenn der Benutzer sendet eine Anforderung und die Dateien werden hochgeladen, aber die Antwort ist angezeigt, die innerhalb des iframe anstelle von re-Rendern der Hauptseite. Ausblenden der iframe macht den gesamten Prozess für den Benutzer transparent und emuliert eine asynchrone Anfrage.

Wenn es richtig gemacht wird sollte es funktionieren praktisch auf jedem browser, aber es hat einige Einschränkungen, wie zum erhalten der Antwort von dem iframe.

In diesem Fall können Sie es vorziehen, verwenden Sie ein wrapper-plugin wie Bifröst verwendet die iframe-Technik sondern bietet auch eine jQuery Ajax-transport so dass zu senden von Dateien nur mit der $.ajax() Methode wie diese:

$.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 ist nur ein kleiner wrapper, der fügt fallback zu jQuery ' s ajax-Methode, aber viele der genannten plugins, wie jQuery Form Plugin oder jQuery File Upload sind die ganzen Stapel von HTML5 auf verschiedene fallbacks und einige nützliche features zu erleichtern, den Prozess. Je nach Ihren Bedürfnissen und Anforderungen, die Sie berücksichtigen sollten, eine bloße Umsetzung oder dieses plugins.

InformationsquelleAutor 404

Habe ich mit dem untenstehenden script Bilder hochladen, was passiert, zu funktionieren.

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

Erklärung

Benutze ich Antwort div zu zeigen, das hochladen von Animationen und Antwort nach dem upload fertig ist.

Beste Teil ist, können Sie senden zusätzliche Daten wie ids - & etc. mit der Datei, wenn Sie dieses Skript verwenden. Ich habe es zu erwähnen extra-data als im Skript.

Auf der PHP-Ebene wird dies als normal Datei-upload. extra-Daten abgerufen werden können als $_POST Daten.

Werden Sie hier nicht mit einem plugin und sowas. Sie können den code ändern, wie Sie wollen. Sie sind nicht blind Codierung hier. Dies ist die Kern-Funktionalität von jQuery Datei-upload. Eigentlich Javascript.

InformationsquelleAutor Techie

Können Sie laden Sie einfach mit 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) {
                //...
            }
       });
    }));
});

InformationsquelleAutor Zayn Ali

Einer Lösung, die ich gefunden haben war der <form> target einen versteckten iFrame. Der iFrame kann dann JS ausführen, um für den Benutzer angezeigt, dass es fertig ist (laden der Seite).

InformationsquelleAutor Darryl Hein

Einfachen Ajax-Uploader ist eine weitere option:

https://github.com/LPology/Simple-Ajax-Uploader

• Cross-browser-funktioniert im IE7+, Firefox, Chrome, Safari, Opera
• Unterstützt mehrere, gleichzeitige uploads -- auch in nicht-HTML5-Browser
• Keine flash-oder eine externe CSS-nur ein 5Kb Javascript-Datei
• Optional, built-in Unterstützung für cross-browser-Balken (mit PHP APC-Erweiterung)
• Flexibel und hochgradig anpassbare-verwenden Sie ein beliebiges element als upload-Schaltfläche, Stil, Ihre eigenen Fortschritte-Indikatoren
• Keine Formulare erforderlich, nur ein element dient als Schaltfläche "hochladen"
• MIT-Lizenz -- Kostenlose Nutzung in kommerziellen Projekt

Beispiel:

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

InformationsquelleAutor user1091949

Hier ist nur ein weiteres Lösung der Frage, wie der upload-Datei (ohne plugin)

Mit einfachen Javascripts und AJAX (mit Fortschrittsanzeige)

HTML-Teil

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

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

PHP-Teil

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

Hier ist der BEISPIEL-Anwendung

InformationsquelleAutor Siddhartha Chowdhury

Hochladen Datei asynchron mit Jquery verwenden Sie folgende Schritte:

Schritt 1 In Ihrem Projekt öffnen Nuget manager und fügen Sie Paket (jquery fileupload(nur Sie brauchen, schreiben Sie in das Suchfeld, es wird kommen und es installieren.))
URL: https://github.com/blueimp/jQuery-File-Upload

Schritt 2 nachfolgend Skripte in die HTML-Dateien, die bereits zum Projekt Hinzugefügt von laufen oben Paket:

jquery.ui.widget.js

jquery.iframe-transport.js

jquery.fileupload.js

Schritt 3 Schreiben, Datei-upload-Kontrolle gemäß folgenden code:

<input id="upload" name="upload" type="file" />

Schritt 4 schreiben Sie eine js-Methode uploadFile als unten:

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

        };

Schritt 5 In ready-Funktion, call-element-Datei hochladen, um den Prozess zu starten, wie unten beschrieben:

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

});

Schritt 6 Schreiben MVC-controller und die Aktion wie unten beschrieben:

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


        }

    }

InformationsquelleAutor ashish

Können Sie

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

Demo

InformationsquelleAutor Amit

Beispiel: Wenn Sie jQuery verwenden, die Sie tun können, einfach eine Datei hochladen. Dies ist eine kleine und starke jQuery-plugin, http://jquery.malsup.com/form/.

Beispiel

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

Ich hoffe, dass es hilfreich wäre,

InformationsquelleAutor MEAbid

Können Sie zusätzliche Parameter zusammen mit dem Datei-Namen auf der Herstellung von asynchronen upload mit XMLHttpRequest (ohne flash-und iframe-Abhängigkeit). Fügen Sie den zusätzlichen parameter-Wert mit FormData und senden Sie den upload-request.

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

Auch, Syncfusion JavaScript UI Datei-upload bietet die Lösung für dieses Szenario einfach mithilfe von Ereignis-argument. Sie finden die Dokumentation hier und weitere details über dieses Steuerelement, geben Sie hier einen link, Beschreibung hier

InformationsquelleAutor Karthik Ravichandran

Dies ist meine Lösung.

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

und die 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>

Controller

[HttpPost]
public ActionResult Save(string apta_Description, HttpPostedFileBase file)
{
    return Json(":)");
}

InformationsquelleAutor Erick Langford Xenes

Können Sie den folgenden code verwenden.

async: false(true)

InformationsquelleAutor WangDong

Können Sie Mehrere Asynchrone Datei-uploads mithilfe von JavaScript oder jQuery und das, ohne plugin. Sie können auch zeigen Sie die Echtzeit-Fortschritt der Datei-upload in den Fortschritt zu kontrollieren. Ich habe 2 schöne links -

1. ASP.NET Web-basierenden Formularen Mehrere Datei-Upload-Funktion mit Fortschrittsbalken
2. ASP.NET MVC-basiert, Mehrere Datei-Upload-made in jQuery

Server-side-Sprache ist C#, aber Sie können tun, einige änderungen, für die es mit anderen Sprachen wie PHP.

Datei Hochladen ASP.NET Kern MVC:

In der Ansicht erstellen Datei-upload-Steuerelement im html-Format:

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

Erstellen Sie jetzt die action-Methode im 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);
        }
    }
}

hostingEnvironment variable ist vom Typ IHostingEnvironment, die injiziert werden kann, um den controller mit dependency injection, wie:

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

InformationsquelleAutor Joe Clinton