Wie kann ich Dateien asynchron hochladen?
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: ");
}
});
});
});
Anstatt die Datei hochzuladen, erhalte ich nur den Dateinamen. Was kann ich tun, um dieses Problem zu beheben?
Aktuelle Lösung
Ich benutze das jQuery Form Plugin um Dateien hochzuladen.
Mit HTML5 können Sie Dateien mit Ajax und jQuery hochladen. Darüber hinaus können Sie Dateiüberprüfungen (Name, Größe und MIME-Typ) durchführen oder das Fortschrittsereignis mit dem HTML5-Fortschritts-Tag (oder einem Div) behandeln. Vor kurzem musste ich einen Datei-Uploader erstellen, wollte aber weder Flash noch Iframes oder Plugins verwenden, und nach einiger Recherche kam ich auf die Lösung.
Der HTML:
<form enctype="multipart/form-data">
<input name="file" type="file" />
<input type="button" value="Upload" />
</form>
<progress></progress>
Zuerst können Sie eine Validierung durchführen, wenn Sie möchten. Zum Beispiel im Ereignis .on('change') 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 wird die $.ajax() mit dem Klick des Buttons übermittelt:
$(':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, wird das Hochladen von Dateien mit HTML5 (und einigen Nachforschungen) nicht nur möglich, sondern auch ganz einfach. Probieren Sie es mit Google Chrome aus, da einige der HTML5-Komponenten der Beispiele nicht in jedem Browser verfügbar sind.
2019 Update: Es hängt immer noch von den Browsern ab , die Ihre Bevölkerungsgruppe verwendet.
Eine wichtige Sache, die mit der "neuen" HTML5 file-API zu verstehen ist, ist, dass es wurde erst in IE 10 unterstützt . Wenn der spezifische Markt, den Sie anstreben, eine überdurchschnittliche Neigung zu älteren Windows-Versionen aufweist, haben Sie möglicherweise keinen Zugriff darauf.
Ab 2017 sind ungefähr 5% der Browser IE 6, 7, 8 oder 9. Wenn Sie in ein großes Unternehmen eintreten (z. B. ein B2B-Tool oder etwas, für das Sie liefern) Training) kann diese Zahl explodieren. Im Jahr 2016 habe ich mit einem Unternehmen zusammengearbeitet, das IE8 auf über 60% seiner Maschinen einsetzte.
Es ist 2019, fast 11 Jahre nach meiner ersten Antwort. IE9 und niedriger liegen global um die 1% -Marke, aber es gibt immer noch Cluster mit höherer Auslastung.
Das wichtigste Problem dabei ist - unabhängig von der Funktion -, zu überprüfen, welchen Browser Ihre Benutzer verwenden . . Wenn Sie dies nicht tun, lernen Sie schnell und schmerzhaft, warum "für mich arbeitet" nicht gut genug ist, um einem Kunden etwas zu liefern. caniuse ist ein nützliches Werkzeug, aber beachten Sie, woher sie ihre demografischen Daten beziehen. Sie sind möglicherweise nicht auf Ihre ausgerichtet. Dies ist niemals wahrer als in Unternehmensumgebungen.
Meine Antwort von 2008 folgt.
Es gibt jedoch praktikable Nicht-JS-Methoden zum Hochladen von Dateien. Sie können einen Iframe auf der Seite erstellen (den Sie mit CSS verbergen) und dann Ihr Formular so ausrichten, dass es in diesem Iframe veröffentlicht wird. Die Hauptseite muss sich nicht bewegen.
Es ist ein "echter" Beitrag, also nicht vollständig interaktiv. Wenn Sie den Status benötigen, benötigen Sie etwas Server-seitiges, um dies zu verarbeiten. Dies ist je nach Server sehr unterschiedlich. ASP.NET hat bessere Mechanismen. PHP plain schlägt fehl, aber Sie können Perl oder Apache-Modifikationen verwenden, um es zu umgehen.
Wenn Sie mehrere Datei-Uploads benötigen, ist es am besten, jede Datei einzeln hochzuladen (um die maximale Anzahl von Datei-Uploads zu überschreiten). Veröffentlichen Sie das erste Formular im iframe, überwachen Sie den Fortschritt mithilfe der oben genannten Informationen und senden Sie das zweite Formular nach Abschluss des Vorgangs an den iframe.
Oder verwenden Sie eine Java/Flash-Lösung. Sie sind viel flexibler darin, was sie mit ihren Beiträgen anfangen können ...
Ich empfehle dazu das Fine Uploader Plugin. Ihr JavaScript Code wäre:
$(document).ready(function() {
$("#uploadbutton").jsupload({
action: "addFile.do",
onComplete: function(response){
alert( "server response: " + response);
}
});
});
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 ausgezeichnete jQuery Form Plugin , das Ihre Dateien über einen iframe veröffentlicht, um den Effekt zu erzielen.
Einpacken für zukünftige Leser.
Asynchroner Datei-Upload
Mit HTML5
Sie können Dateien mit jQuery mithilfe der $.ajax() -Methode hochladen, wenn FormData und der File API werden unterstützt (beide HTML5-Funktionen).
Sie können auch Dateien senden ohne FormData , aber in beiden Fällen muss die Datei-API vorhanden sein, um Dateien so zu verarbeiten, dass sie mit XMLHttpRequest gesendet werden können. ( 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!");
});
Ein schnelles, reines JavaScript ( no jQuery ) - Beispiel finden Sie unter " Senden von Dateien mit einem FormData-Objekt ".
Zurückfallen
Wenn HTML5 nicht unterstützt wird (no File API ) die einzige andere reine JavaScript-Lösung (no Flash oder ein anderes Browser-Plugin) ist die versteckte iframe Technik, mit der eine asynchrone Anfrage ohne Verwendung des XMLHttpRequest Objekts emuliert werden kann.
Es besteht darin, einen Iframe als Ziel des Formulars mit den Dateieingaben festzulegen. Wenn der Benutzer eine Anforderung sendet und die Dateien hochgeladen werden, wird die Antwort jedoch im iframe angezeigt, anstatt die Hauptseite erneut zu rendern. Das Ausblenden des Iframes macht den gesamten Prozess für den Benutzer transparent und emuliert eine asynchrone Anforderung.
Wenn es richtig gemacht wird, sollte es auf jedem Browser funktionieren, aber es gibt einige Einschränkungen, wie man die Antwort vom iframe erhält.
In diesem Fall bevorzugen Sie möglicherweise ein Wrapper-Plugin wie Bifröst , das die iframe-Technik verwendet, aber auch einen jQuery Ajax-Transport liefert = Erlauben , Dateien nur mit der $.ajax() -Methode wie folgt zu senden:
$.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 die Fallback-Unterstützung für die Ajax-Methode von jQuery hinzufügt, aber viele der oben genannten Plugins mögen jQuery Form Plugin oder jQuery File Upload Enthalten Sie den gesamten Stapel von HTML5 bis zu verschiedenen Fallbacks und einige nützliche Funktionen, um den Prozess zu vereinfachen. Abhängig von Ihren Bedürfnissen und Anforderungen möchten Sie möglicherweise eine reine Implementierung oder eines dieser Plugins in Betracht ziehen.
Dieses AJAX-Datei-Upload-jQuery-Plugin lädt die Datei irgendwie hoch und übergibt die Antwort an einen Rückruf, sonst nichts.
- Es hängt nicht von spezifischem HTML ab, geben Sie ihm einfach einen
<input type="file"> - Es ist nicht erforderlich, dass Ihr Server auf eine bestimmte Weise antwortet
- 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');
}
});
Ich habe das folgende Skript zum Hochladen von Bildern verwendet, was zufällig 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 verwende die Antwort div, um die Upload-Animation und die Antwort nach dem Upload anzuzeigen.
Das Beste daran ist, dass Sie zusätzliche Daten wie z. B. IDs und andere mit der Datei senden können, wenn Sie dieses Skript verwenden. Ich habe es extra-data wie im Skript erwähnt.
Auf der Ebene PHP funktioniert dies wie ein normaler Dateiupload. Extra-Daten können als $_POST -Daten abgerufen werden.
Hier benutzt du kein Plugin und so. Sie können den Code nach Belieben ändern. Sie codieren hier nicht blind. Dies ist die Kernfunktionalität jedes Uploads von jQuery-Dateien. Eigentlich Javascript.
Sie können es in Vanilla JavaScript ziemlich einfach 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);
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) {
// ...
}
});
}));
});
Die einfachste und robusteste Methode, mit der ich dies in der Vergangenheit getan habe, besteht darin, einfach ein verstecktes iFrame-Tag mit Ihrem Formular auszurichten. Es wird dann im iframe gesendet, ohne die Seite neu zu laden.
Dies ist der Fall, wenn Sie kein Plugin, JavaScript oder eine andere Form von "Magie" als HTML verwenden möchten. Natürlich können Sie dies mit JavaScript kombinieren oder was haben Sie ...
<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 auch den Inhalt des iframe onLoad auf Serverfehler oder Erfolgsantworten lesen und diesen dann an den Benutzer ausgeben.
Chrome, iFrames und onLoad
- Hinweis - Sie müssen nur weiterlesen, wenn Sie interessiert sind, wie Sie einen UI-Blocker beim Hochladen/Herunterladen einrichten
Derzeit löst Chrome das Ereignis onLoad für den Iframe nicht aus, wenn er zum Übertragen von Dateien verwendet wird. Firefox, IE und Edge lösen alle das Onload-Ereignis für Dateiübertragungen aus.
Die einzige Lösung, die ich für Chrome gefunden habe, war die Verwendung eines Cookies.
Um dies im Grunde zu tun, wenn der Upload/Download gestartet wird:
- [Client-Seite] Starten Sie ein Intervall, um festzustellen, ob ein Cookie vorhanden ist
- [Serverseite] Tun Sie alles, was Sie mit den Dateidaten tun müssen
- [Serverseitig] Cookie für clientseitiges Intervall festlegen
- [Client Side] Interval erkennt das Cookie und verwendet es wie das Ereignis onLoad. Zum Beispiel können Sie einen UI-Blocker starten und dann beim 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 für Chrome beim Herunterladen zu beheben. Sie finden es hier
https://github.com/ArtisticPhoenix/jQuery-Plugins/blob/master/iDownloader.js
Das gleiche Prinzip gilt auch für das Hochladen.
So verwenden Sie den Downloader (natürlich mit 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');
});
Und auf der Serverseite erstellen Sie kurz vor dem Übertragen der Dateidaten das Cookie
setcookie('iDownloader', true, time() + 30, "/");
Das Plugin sieht das Cookie und löst dann den Rückruf onComplete aus.
Ich habe dies in einer Rails Umgebung geschrieben . Wenn Sie das einfache jQuery-Form-Plugin verwenden, sind es nur fünf Zeilen JavaScript.
Die Herausforderung besteht darin, dass das Hochladen von AJAX als Standard funktioniert. remote_form_for versteht das Übermitteln mehrteiliger Formulare nicht. Die Dateidaten, die Rails mit der Anforderung AJAX zurücksucht, werden nicht gesendet.
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 Controller-Aktion Rails, hübsche Vanille:
@image = Image.new(params[:image_form])
@image.save
render :text => @image.public_filename
Ich habe dies in den letzten Wochen mit Bloggity verwendet und es hat wie ein Champion funktioniert.
Eine Lösung, die ich gefunden habe, war, dass <form> auf einen versteckten iFrame abzielt. Der iFrame kann dann JS ausführen, um dem Benutzer anzuzeigen, dass der Vorgang abgeschlossen ist (beim Laden der Seite).
Simple Ajax Uploader ist eine weitere Option:
https://github.com/LPology/Simple-Ajax-Uploader
- Cross-Browser - 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 vollständig browserübergreifende Fortschrittsbalken (unter Verwendung der APC-Erweiterung von PHP)
- Flexibel und in hohem Maße anpassbar - verwenden Sie ein beliebiges Element als Upload-Schaltfläche und gestalten Sie Ihre eigenen Fortschrittsanzeigen
- Es sind keine Formulare erforderlich. Geben Sie lediglich ein Element an, das als Upload-Schaltfläche dient
- MIT Lizenz - frei zur Verwendung in kommerziellen Projekten
Anwendungsbeispiel:
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 ploadify ist ein weiteres gutes Plugin, das ich zuvor zum Hochladen von Dateien verwendet 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 zum Hochladen von Dateien gekommen, die kein Plugin und nur Ajax enthält. 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);
}
Hier ist nur eine andere Lösung zum Hochladen von Dateien ( ohne Plugin )
Mit einfachen Javascripten und AJAX (mit Fortschrittsbalken)
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";
}
?>
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.
Gehen Sie wie folgt vor, um eine Datei asynchron mit Jquery hochzuladen:
Schritt 1 Öffnen Sie in Ihrem Projekt den Nuget-Manager und fügen Sie ein Paket hinzu (jquery fileupload (nur Sie müssen es in das Suchfeld schreiben, es wird gestartet und installiert). )) URL: https://github.com/blueimp/jQuery-File-Upload
Schritt 2 Fügen Sie die folgenden Skripte in die HTML-Dateien ein, die dem Projekt bereits hinzugefügt wurden, indem Sie das obige Paket ausführen:
jquery.ui.widget.js
jquery.iframe-transport.js
jquery.fileupload.js
Schritt 3 Schreibe die Steuerung für das Hochladen von Dateien wie folgt:
<input id="upload" name="upload" type="file" />
Schritt 4 Schreiben Sie eine js-Methode als uploadFile wie folgt:
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 Rufen Sie im Bereitschaftsmodus das Elementdatei-Upload auf, um den Prozess wie folgt zu starten:
$(document).ready(function()
{
uploadFile($('#upload'));
});
Schritt 6 Schreiben Sie den MVC-Controller und die Aktion wie folgt:
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
};
}
}
Ein moderner Ansatz ohne Jquery besteht darin, das FileList -Objekt zu verwenden, das Sie von <input type="file"> zurückerhalten, wenn der Benutzer eine Datei auswählt (s) und verwenden Sie dann Fetch , um die um ein FormData -Objekt gewickelte FileList zu veröffentlichen.
// The input DOM element // <input type="file">
const inputElement = document.querySelector('input[type=file]');
// Listen for a file submit from user
inputElement.addEventListener('change', () => {
const data = new FormData();
data.append('file', inputElement.files[0]);
data.append('imageName', 'flower');
// You can then post it to your server.
// Fetch can accept an object of type FormData on its body
fetch('/uploadImage', {
method: 'POST',
body: data
});
});
Konvertieren Sie die Datei in base64 mit | HTML5 readAsDataURL () oder einige 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);
Sie können verwenden
$(function() {
$("#file_upload_1").uploadify({
height : 30,
swf : '/uploadify/uploadify.swf',
uploader : '/uploadify/uploadify.php',
width : 120
});
});
Beispiel: Wenn Sie jQuery verwenden, können Sie auf einfache Weise eine Upload-Datei erstellen. Dies ist ein kleines und starkes 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 es wäre hilfreich
Sie können eine gelöste Lösung mit einer funktionierenden Demo sehen hier , mit der Sie eine Vorschau anzeigen und Formulardateien an den Server senden können. Für Ihren Fall müssen Sie Ajax verwenden, um das Hochladen der Datei auf den Server zu erleichtern:
<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>
Die übermittelten Daten sind Formdaten. Verwenden Sie in Ihrer jQuery eine Formularsendefunktion anstelle eines Schaltflächenklicks, um die Formulardatei wie unten gezeigt zu senden.
$(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");
});
});
});
Sie können beim asynchronen Upload mit XMLHttpRequest (ohne Flash- und Iframe-Abhängigkeit) zusätzliche Parameter zusammen mit dem Dateinamen übergeben. Hängen Sie den zusätzlichen Parameterwert an FormData an und senden Sie die Upload-Anfrage.
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
});
Das Hochladen der Syncfusion-JavaScript-UI-Datei bietet auch eine Lösung für dieses Szenario, indem einfach ein Ereignisargument verwendet wird. Dokumentation hier und weitere Details zu diesem Steuerelement finden Sie hier. Linkbeschreibung hier
Suchen Sie nach Abwicklung des Upload-Vorgangs für eine Datei, asynchron hier: https://developer.mozilla.org/en-US/ docs/Using_files_from_web_applications
Beispiel 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>
Sie können den folgenden Code verwenden.
async: false(true)
Mit HTML5 und JavaScript ist das asynchrone Hochladen recht einfach, ich erstelle das Das Hochladen der Logik zusammen mit Ihrem HTML-Code funktioniert nicht vollständig, da es die API benötigt. Zeigen Sie jedoch, wie dies funktioniert. Wenn Sie den Endpunkt /upload vom Stammverzeichnis Ihrer Website aus haben, sollte dieser Code 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>Einige weitere Informationen zu XMLHttpReques:
Das XMLHttpRequest-Objekt
Alle modernen Browser unterstützen das XMLHttpRequest-Objekt. Das XMLHttpRequest-Objekt kann verwendet werden, um im Hintergrund Daten mit einem Webserver auszutauschen. Dies bedeutet, dass es möglich ist, Teile einer Webseite zu aktualisieren, ohne die gesamte Seite neu zu laden.
Ein XMLHttpRequest-Objekt erstellen
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 ();
Domänenübergreifender Zugriff
Aus Sicherheitsgründen erlauben moderne Browser keinen domänenübergreifenden Zugriff.
Dies bedeutet, dass sich sowohl die Webseite als auch die XML-Datei, die geladen werden soll, auf demselben Server befinden müssen.
In den Beispielen zu W3Schools werden alle offenen XML-Dateien angezeigt, die sich in der W3Schools-Domäne befinden.
Wenn Sie das obige Beispiel auf einer Ihrer eigenen Webseiten verwenden möchten, müssen sich die von Ihnen geladenen XML-Dateien auf Ihrem eigenen Server befinden.
Für weitere Informationen lesen Sie bitte weiter hier ...
Sie können die asynchronen Uploads mehrerer Dateien mit JavaScript oder jQuery durchführen, ohne ein Plug-in zu verwenden. Sie können den Echtzeit-Fortschritt des Datei-Uploads auch in der Fortschrittskontrolle anzeigen. Ich bin auf 2 nette Links gestoßen -
- ASP.NET Web Forms-basierte Funktion zum Hochladen mehrerer Dateien mit Fortschrittsanzeige
- ASP.NET MVC-basiertes Hochladen mehrerer Dateien in jQuery
Die serverseitige Sprache ist C #, aber Sie können einige Änderungen vornehmen, damit es mit anderen Sprachen wie PHP funktioniert.
Hochladen von ASP.NET Core MVC-Dateien:
In der Ansicht Datei erstellen Upload-Steuerelement in HTML:
<form method="post" asp-action="Add" enctype="multipart/form-data">
<input type="file" multiple name="mediaUpload" />
<button type="submit">Submit</button>
</form>
Erstellen Sie nun eine Aktionsmethode in Ihrem 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);
}
}
}
die Variable hostingEnvironment ist vom Typ IHostingEnvironment, die mithilfe der Abhängigkeitsinjektion in den Controller injiziert werden kann, z.
private IHostingEnvironment hostingEnvironment;
public MediaController(IHostingEnvironment environment)
{
hostingEnvironment = environment;
}
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 neuere Fetch API per JavaScript verwenden. So was:
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));
}
Vorteil: Fetch API wird von allen modernen Browsern nativ unterstützt , so dass Sie Sie müssen nichts importieren. Beachten Sie außerdem, dass fetch () ein Promise zurückgibt, das dann mithilfe von .then(..code to handle response..) asynchron verarbeitet wird.
Suchen Sie für PHP nach https://developer.hyvor.com/php/image-upload-ajax-php-mysql
HTML
<html>
<head>
<title>Image Upload with AJAX, PHP and MYSQL</title>
</head>
<body>
<form onsubmit="submitForm(event);">
<input type="file" name="image" id="image-selecter" accept="image/*">
<input type="submit" name="submit" value="Upload Image">
</form>
<div id="uploading-text" style="display:none;">Uploading...</div>
<img id="preview">
</body>
</html>
JAVASCRIPT
var previewImage = document.getElementById("preview"),
uploadingText = document.getElementById("uploading-text");
function submitForm(event) {
// prevent default form submission
event.preventDefault();
uploadImage();
}
function uploadImage() {
var imageSelecter = document.getElementById("image-selecter"),
file = imageSelecter.files[0];
if (!file)
return alert("Please select a file");
// clear the previous image
previewImage.removeAttribute("src");
// show uploading text
uploadingText.style.display = "block";
// create form data and append the file
var formData = new FormData();
formData.append("image", file);
// do the ajax part
var ajax = new XMLHttpRequest();
ajax.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
var json = JSON.parse(this.responseText);
if (!json || json.status !== true)
return uploadError(json.error);
showImage(json.url);
}
}
ajax.open("POST", "upload.php", true);
ajax.send(formData); // send the form data
}
PHP
<?php
$Host = 'localhost';
$user = 'user';
$password = 'password';
$database = 'database';
$mysqli = new mysqli($Host, $user, $password, $database);
try {
if (empty($_FILES['image'])) {
throw new Exception('Image file is missing');
}
$image = $_FILES['image'];
// check INI error
if ($image['error'] !== 0) {
if ($image['error'] === 1)
throw new Exception('Max upload size exceeded');
throw new Exception('Image uploading error: INI Error');
}
// check if the file exists
if (!file_exists($image['tmp_name']))
throw new Exception('Image file is missing in the server');
$maxFileSize = 2 * 10e6; // in bytes
if ($image['size'] > $maxFileSize)
throw new Exception('Max size limit exceeded');
// check if uploaded file is an image
$imageData = getimagesize($image['tmp_name']);
if (!$imageData)
throw new Exception('Invalid image');
$mimeType = $imageData['mime'];
// validate mime type
$allowedMimeTypes = ['image/jpeg', 'image/png', 'image/gif'];
if (!in_array($mimeType, $allowedMimeTypes))
throw new Exception('Only JPEG, PNG and GIFs are allowed');
// Nice! it's a valid image
// get file extension (ex: jpg, png) not (.jpg)
$fileExtention = strtolower(pathinfo($image['name'] ,PATHINFO_EXTENSION));
// create random name for your image
$fileName = round(microtime(true)) . mt_Rand() . '.' . $fileExtention; // anyfilename.jpg
// Create the path starting from DOCUMENT ROOT of your website
$path = '/examples/image-upload/images/' . $fileName;
// file path in the computer - where to save it
$destination = $_SERVER['DOCUMENT_ROOT'] . $path;
if (!move_uploaded_file($image['tmp_name'], $destination))
throw new Exception('Error in moving the uploaded file');
// create the url
$protocol = stripos($_SERVER['SERVER_PROTOCOL'],'https') === true ? 'https://' : 'http://';
$domain = $protocol . $_SERVER['SERVER_NAME'];
$url = $domain . $path;
$stmt = $mysqli -> prepare('INSERT INTO image_uploads (url) VALUES (?)');
if (
$stmt &&
$stmt -> bind_param('s', $url) &&
$stmt -> execute()
) {
exit(
json_encode(
array(
'status' => true,
'url' => $url
)
)
);
} else
throw new Exception('Error in saving into the database');
} catch (Exception $e) {
exit(json_encode(
array (
'status' => false,
'error' => $e -> getMessage()
)
));
}
Sie können auch die Verwendung von https://uppy.io in Betracht ziehen.
Es führt das Hochladen von Dateien durch, ohne von der Seite weg zu navigieren, und bietet einige Vorteile wie Drag & Drop, Fortsetzen des Uploads bei Abstürzen des Browsers/unzuverlässigen Netzwerken und Importieren von z. Instagram. Es ist Open Source und basiert nicht auf jQuery/React/Angular/Vue, sondern kann damit verwendet werden. Haftungsausschluss: Als Urheber bin ich voreingenommen;)
Es ist eine alte Frage, hat aber immer noch keine richtige Antwort. Also:
Haben Sie versucht jQuery-File-Upload ?
Hier ist ein Beispiel aus dem obigen Link, das Ihr Problem lösen könnte:
$('#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);
});
}
});
Versuchen
async function saveFile()
{
let formData = new FormData();
formData.append("file", file.files[0]);
await fetch('addFile.do', {method: "POST", body: formData});
alert("Data Uploaded: ");
}<span>File</span>
<input type="file" id="file" name="file" size="10"/>
<input type="button" value="Upload" onclick="saveFile()"/>Der content-type='multipart/form-data' wird vom Browser automatisch eingestellt, der Dateiname wird ebenfalls hinzugefügt. Hier ist ein ausführlicheres Beispiel mit Fehlerbehandlung und Hinzufügen von JSON
async function saveFile(inp)
{
let user = { name:'john', age:34 };
let formData = new FormData();
let photo = inp.files[0];
formData.append("photo", photo);
formData.append("user", JSON.stringify(user));
try {
let r = await fetch('/upload/image', {method: "POST", body: formData});
console.log('HTTP response code:',r.status);
alert('success');
} catch(e) {
console.log('Huston we have problem...:', e);
}
}<input type="file" onchange="saveFile(this)" >
<br><br>
Before selecting the file Open chrome console > network tab to see the request details.
<br><br>
<small>Because in this example we send request to https://stacksnippets.net/upload/image the response code will be 404 ofcourse...</small>