javascript upload - Wie kann ich Dateien asynchron hochladen?




file example (25)

Ich möchte eine Datei asynchron mit jQuery hochladen. Das ist mein HTML:

<span>File</span>
<input type="file" id="file" name="file" size="10"/>
<input id="uploadbutton" type="button" value="Upload"/>

Und hier mein Jquery Code:

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

Anstelle der hochgeladenen Datei bekomme ich nur den Dateinamen. Was kann ich tun, um dieses Problem zu beheben?

Aktuelle Lösung

Ich benutze das jQuery Form Plugin zum Hochladen von Dateien.


Answers

Sie können einfach mit jQuery .ajax() hochladen.

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) {
                // ...
            }
       });
    }));
});

Dieses jQuery-Plugin für AJAX-Dateien lädt die Datei irgendwie hoch und leitet die Antwort an einen Rückruf weiter.

  • Es ist nicht von einem bestimmten HTML-Code abhängig, es wird lediglich ein <input type="file">
  • Es ist nicht erforderlich, dass Ihr Server auf eine bestimmte Weise reagiert
  • Es spielt keine Rolle, wie viele Dateien Sie verwenden oder wo sie sich auf der Seite befinden

- Verwenden Sie so wenig wie -

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

- oder so viel wie -

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


Mit HTML5 Sie Dateien mit Ajax und jQuery hochladen. Darüber hinaus können Sie Dateivalidierungen (Name, Größe und MIME-Typ) durchführen oder das Fortschrittsereignis mit dem HTML5-Progress-Tag (oder einem Div) behandeln. Vor kurzem musste ich einen Dateiuploader erstellen, wollte aber weder Flash noch Iframes oder Plugins verwenden, und nach einigen Nachforschungen habe ich die Lösung gefunden.

Das HTML:

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

Erstens können Sie einige Überprüfungen durchführen, wenn Sie möchten. Beispielsweise im onChange-Ereignis 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 den Ajax mit dem Klick der Schaltfläche absenden:

$(':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, ist das Hochladen von Dateien mit HTML5 (und einigen Recherchen) nicht nur möglich, sondern auch sehr einfach. Versuchen Sie es mit Google Chrome, da einige der HTML5-Komponenten der Beispiele nicht in jedem Browser verfügbar sind.


Sie können zusätzliche Parameter zusammen mit dem Dateinamen übergeben, wenn Sie mit XMLHttpRequest (ohne Flash- und Iframe-Abhängigkeit) einen asynchronen Upload durchführen. Hängen Sie den zusätzlichen Parameterwert mit FormData an und senden Sie die Upload-Anforderung.

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

Das Hochladen der Datei mit der Syncfusion-JavaScript-Benutzeroberfläche bietet eine Lösung für dieses Szenario, indem einfach ein Ereignisargument verwendet wird. Sie können die Dokumentation finden hier und weitere Informationen zu dieser Steuerung hier eingeben Linkbeschreibung hier


Suchen Sie nach Hiermit behandeln Sie den Upload-Prozess für eine Datei asynchron : https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

Probe aus dem Link

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

Ein moderner Ansatz ohne Jquery besteht darin, das FileList Objekt zu verwenden, aus dem Sie zurückkehren, <input type="file">wenn der Benutzer eine oder FileList Dateien auswählt, und dann mithilfe von Fetch die um ein FormData Objekt gewickelte 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
    })
});

Ich habe dies in einer Rails-Umgebung geschrieben . Wenn Sie das leichte jQuery-Formular-Plug-In verwenden, müssen Sie nur fünf Zeilen JavaScript verwenden.

Die Herausforderung besteht darin, den AJAX-Upload zum remote_form_for da der Standard " remote_form_for die mehrteilige Formularübergabe nicht versteht. Es wird nicht die Datei senden, die Rails mit der AJAX-Anfrage zurücksucht.

Hier kommt das jQuery-form Plugin ins Spiel.

Hier ist der Rails-Code dafür:

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

Hier ist das zugehörige JavaScript:

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

Und hier ist die Rails-Controller-Aktion, hübsche Vanille:

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

Ich benutze das schon seit ein paar Wochen mit Bloggity und es hat wie ein Champion funktioniert.


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

Sie können Formulardaten verwenden, um alle Ihre Werte, einschließlich Bilder, zu veröffentlichen.


2017 Update: Es hängt immer noch von den Browsern ab, die Ihre demografische Nutzung verwendet.

Bei der "neuen" HTML5- file API ist es wichtig zu wissen, dass sie bis zum IE 10 nicht unterstützt wird . Wenn der spezifische Markt, auf den Sie abzielen, eine überdurchschnittliche Präferenz gegenüber älteren Windows-Versionen hat, haben Sie möglicherweise keinen Zugriff darauf.

Für 2017 sind etwa 5% der Browser einer von IE 6, 7, 8 oder 9. Wenn Sie in ein großes Unternehmen gehen (z. B. ein B2B-Tool oder etwas, das Sie für das Training zur Verfügung stellen), kann diese Zahl in die Höhe schnellen. Vor wenigen Monaten - 2016 - habe ich mich mit einem Unternehmen beschäftigt, das IE8 auf über 60% seiner Maschinen verwendet.

Bevor Sie also etwas tun, prüfen Sie, welchen Browser Ihre Benutzer verwenden . Wenn Sie dies nicht tun, werden Sie eine schnelle und schmerzliche Lektion lernen, warum "Arbeit für mich" nicht gut genug ist, wenn Sie einen Kunden liefern.

Meine Antwort von 2008 folgt.

Es gibt jedoch praktikable Nicht-JS-Methoden zum Hochladen von Dateien. Sie können auf der Seite einen Iframe erstellen (den Sie mit CSS ausblenden), und dann Ihr Formular darauf ausrichten, in diesem Iframe zu posten. Die Hauptseite muss sich nicht bewegen.

Es ist ein "echter" Post, also ist es nicht vollständig interaktiv. Wenn Sie Status benötigen, benötigen Sie etwas serverseitiges, um dies zu verarbeiten. Dies hängt stark von Ihrem Server ab. ASP.NET hat schönere Mechanismen. PHP plain schlägt fehl, aber Sie können Perl oder Apache-Modifikationen verwenden, um dieses Problem zu umgehen.

Wenn Sie mehrere Dateiuploads benötigen, ist es am besten, jede Datei einzeln auszuführen (um die maximalen Dateiuploadlimits zu überwinden). Veröffentlichen Sie das erste Formular im iframe, überwachen Sie den Fortschritt anhand der obigen Angaben. Wenn das Formular fertig ist, buchen Sie das zweite Formular im iframe und so weiter.

Oder verwenden Sie eine Java / Flash-Lösung. Sie sind viel flexibler, was sie mit ihren Beiträgen machen können ...


Sie können das Hochladen von asynchronen mehreren Dateien mithilfe von JavaScript oder jQuery durchführen, ohne dass dazu ein Plugin verwendet werden muss. Sie können den Fortschritt der Datei in Echtzeit auch in der Fortschrittskontrolle anzeigen. Ich habe 2 nette Links gefunden -

  1. ASP.NET Web Forms-basierte Multi-File-Upload-Funktion mit Fortschrittsbalken
  2. ASP.NET MVC-basierter Upload mehrerer Dateien in jQuery

Die serverseitige Sprache ist C #, aber Sie können einige Modifikationen vornehmen, damit sie mit anderen Sprachen wie PHP funktioniert.

Datei-Upload von ASP.NET Core MVC:

In der Ansicht erstellen Sie das Datei-Upload-Steuerelement in 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);
        }
    }
}

Erstellen Sie nun eine Aktionsmethode in Ihrem Controller:

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

Die Variable hostingEnvironment ist vom Typ IHostingEnvironment, die mithilfe von Abhängigkeitseinspritzung in den Controller injiziert werden kann, z.

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

Mit HTML5 und JavaScript wird das Hochladen async ganz einfach, ich die Hochladen Logik zusammen mit Ihrem HTML erstellen, wird dies nicht vollständig funktioniert , wie es die api braucht, sondern zeigt , wie es funktioniert, wenn Sie den Endpunkt genannt haben /uploadvon der Wurzel Ihrer Website, Dieser Code sollte für Sie funktionieren:

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>

Weitere Informationen zu XMLHttpReques:

Das XMLHttpRequest-Objekt

Alle modernen Browser unterstützen das XMLHttpRequest-Objekt. Mit dem Objekt XMLHttpRequest können Sie hinter den Kulissen Daten mit einem Webserver austauschen. Dies bedeutet, dass es möglich ist, Teile einer Webseite zu aktualisieren, ohne die gesamte Seite neu laden zu müssen.


Erstellen Sie ein XMLHttpRequest-Objekt

Alle modernen Browser (Chrome, Firefox, IE7 +, Edge, Safari, Opera) verfügen über ein integriertes XMLHttpRequest-Objekt.

Syntax zum Erstellen eines XMLHttpRequest-Objekts:

Variable = new XMLHttpRequest ();


Zugriff auf Domains

Aus Sicherheitsgründen erlauben moderne Browser keinen Zugriff über Domänen hinweg.

Dies bedeutet, dass sowohl die Webseite als auch die zu ladende XML-Datei sich auf demselben Server befinden müssen.

Die Beispiele in W3Schools umfassen alle offenen XML-Dateien in der W3Schools-Domäne.

Wenn Sie das obige Beispiel auf einer Ihrer eigenen Webseiten verwenden möchten, müssen sich die geladenen XML-Dateien auf Ihrem eigenen Server befinden.

Für weitere Details können Sie here weiterlesen ...


Hinweis: Diese Antwort ist veraltet. Es ist jetzt möglich, Dateien mit XHR hochzuladen.

Sie können keine Dateien mit XMLHttpRequest (Ajax) hochladen. Sie können den Effekt mit einem iframe oder Flash simulieren. Das hervorragende jQuery Form Plugin , das Ihre Dateien über einen iframe bereitstellt, um den Effekt zu erzielen.



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

Regler

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

Sie können verwenden

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

Demo


Ich empfehle zu diesem Zweck das Fine Uploader- Plugin. Ihr JavaScript Code wäre:

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

Sie können es in Vanille-JavaScript ziemlich leicht tun. Hier ist ein Ausschnitt aus meinem aktuellen Projekt:

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

Konvertieren Sie die Datei in base64 mit readAsDataURL() HTML5 oder einem Base64-Encoder . Geige hier

var reader = new FileReader();

        reader.onload = function(readerEvt) {
            var binaryString = readerEvt.target.result;
            document.getElementById("base64textarea").value = btoa(binaryString);
        };

        reader.readAsBinaryString(file);

Dann abrufen:

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

jQuery Uploadify ist ein weiteres gutes Plugin, mit dem ich Dateien hochgeladen habe. Der JavaScript-Code ist so einfach wie der folgende: Code. Die neue Version funktioniert jedoch nicht in 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) {
        // ...
    }
});

Ich habe viel gesucht und bin zu einer anderen Lösung für das Hochladen von Dateien ohne Plugin und nur mit Ajax gekommen. Die Lösung ist wie folgt:

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

Die einfachste und robusteste Methode, die ich in der Vergangenheit gemacht habe, besteht darin, einfach ein verstecktes iFrame-Tag mit Ihrem Formular anzuvisieren. Dann wird es innerhalb des iframe gesendet, ohne die Seite neu zu laden.

Das heißt, wenn Sie kein Plugin, JavaScript oder andere Formen von "Magie" außer HTML verwenden möchten. Natürlich kannst du dies mit JavaScript kombinieren oder was hast du ...

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

Sie können den Inhalt des iframe onLoad auf onLoad oder Erfolgsantworten lesen und diesen dann an den Benutzer ausgeben.

Chrome, iFrames und onLoad

-note- Sie müssen nur weiterlesen, wenn Sie beim Hochladen / Herunterladen eines UI-Blockers interessiert sind

Derzeit löst Chrome das onLoad-Ereignis für den Iframe nicht aus, wenn er zum Übertragen von Dateien verwendet wird. Firefox, IE und Edge lösen das Onload-Ereignis für die Dateiübertragung aus.

Die einzige Lösung, die ich für Chrome als nützlich befand, war die Verwendung eines Cookies.

Um dies grundsätzlich zu tun, wenn der Upload / Download gestartet wird:

  • [Clientseite] Starten Sie ein Intervall, um nach dem Vorhandensein eines Cookies zu suchen
  • [Serverseite] Machen Sie mit den Dateidaten, was Sie benötigen
  • [Serverseite] Cookie für das clientseitige Intervall einstellen
  • [Clientseitig] Interval sieht das Cookie und verwendet es wie das Ereignis onLoad. Sie können beispielsweise einen UI-Blocker starten und dann bei Laden (oder wenn ein Cookie erstellt wird) den UI-Blocker entfernen.

Ein Cookie dafür zu verwenden ist hässlich, aber es funktioniert.

Ich habe ein jQuery-Plugin erstellt, um dieses Problem beim Herunterladen von Chrome zu beheben. Sie finden es hier

https://github.com/ArtisticPhoenix/jQuery-Plugins/blob/master/iDownloader.js

Dasselbe Grundprinzip gilt auch für das Hochladen.

So verwenden Sie den Downloader (natürlich auch die JS)

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

Erstellen Sie auf der Serverseite kurz vor dem Übertragen der Dateidaten das Cookie

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

Das Plugin onComplete das Cookie und löst dann den onComplete Callback aus.


Ich habe das folgende Skript zum Hochladen von Bildern verwendet, was gut funktioniert.

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

Erläuterung

Ich benutze Response div , um die Upload-Animation und die Antwort anzuzeigen, nachdem der Upload abgeschlossen ist.

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

Auf der PHP-Ebene funktioniert dies als normaler Dateiupload. Zusatzdaten können als $_POST Daten abgerufen werden.

Hier benutzt du kein Plugin und so. Sie können den Code beliebig ändern. Sie codieren hier nicht blind. Dies ist die Kernfunktion für das Hochladen von jQuery-Dateien. Eigentlich Javascript.


Eine Lösung, die ich gefunden habe, bestand darin, das <form> -Ziel auf einen versteckten iFrame auszurichten. Der iFrame kann dann JS ausführen, um dem Benutzer anzuzeigen, dass er vollständig ist (beim Laden der Seite).


Simple Ajax Uploader ist eine weitere Option:

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

  • Browserübergreifend - funktioniert in IE7 +, Firefox, Chrome, Safari, Opera
  • Unterstützt mehrere gleichzeitige Uploads - auch in Nicht-HTML5-Browsern
  • Kein Flash oder externes CSS - nur eine 5-KB-Javascript-Datei
  • Optionale, integrierte Unterstützung für Browser-Statusleisten (mit der APC-Erweiterung von PHP)
  • Flexibel und in hohem Maße anpassbar - Verwenden Sie ein beliebiges Element als Upload-Button und gestalten Sie Ihre eigenen Fortschrittsanzeigen
  • Keine Formulare erforderlich, geben Sie einfach ein Element an, das als Schaltfläche zum Hochladen dienen soll
  • MIT-Lizenz - kostenlos für kommerzielle Projekte

Verwendungsbeispiel:

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

Viele Möglichkeiten funktionieren, denke ich:

  • window.location.reload();
  • history.go(0);
  • window.location.href=window.location.href;






javascript jquery ajax asynchronous upload