Pass-Datei input von AJAX, C# WebMethod
Gibt es ein paar Lösungen im Umlauf, aber keiner scheint für mich arbeiten.
Ich habe eine Datei, die Eingabe gemäß der unten: (Bootstrap-Datei, Eingabe)
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
<img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" alt=""/>
</div>
<div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;">
</div>
<div>
<span class="btn default btn-file">
<span class="fileinput-new">
Select image
</span>
<span class="fileinput-exists">
Change
</span>
<input type="file" id="image" runat="server" accept=".gif|.jpeg|.jpg|.png" />
</span>
<a href="#" class="btn default fileinput-exists" data-dismiss="fileinput">
Remove
</a>
<a onclick="uploadImage();" class="btn blue fileinput-exists">Upload Image</a>
</div>
</div>
Beim auswählen eines Bildes, und klicken auf 'Bild Hochladen', die folgende JS-Funktion ausgeführt wird:
function uploadImage() {
var file = $("#image")[0].files[0];
var name = file.name;
var size = file.size;
var type = file.type;
if (file.name.length < 1) {
return false;;
}
else if (file.size > 10000000) {
toastr.error('Error', 'Failed to upload image<span class=\"errorText\"><br/>Selected file is greater than 10MB.</span>');
return false;;
}
else if (file.type != 'image/png' && file.type != 'image/jpg' && !file.type != 'image/gif' && file.type != 'image/jpeg') {
toastr.error('Error', 'Failed to upload image<span class=\"errorText\"><br/>Selected file must be in one of the following formats: .gif, .jpeg, .jpg, .png.</span>');
return false;
}
var formData = new FormData();
formData.append("name", name);
formData.append("size", size);
formData.append("type", type);
formData.append("file", file);
$.ajax({
type: "POST",
url: 'Pages.aspx/UploadImage',
data: formData,
cache: false,
contentType: false,
processData: false,
success: function (data) {
data = data.d;
if (data == -2) {
toastr.error('Error', 'Failed to upload image<span class=\"errorText\"><br/>You do not have the required permissions to upload images.</span>');
} else if (data == -3) {
toastr.error('Error', 'Failed to upload image<span class=\"errorText\"><br/>There was a fatal error. Please contact support.</span>');
} else {
toastr.success('Success', 'Image Id <b>' + data + '</b> was saved successfully.');
}
},
error: function (err) {
toastr.error('Error', 'Failed to upload image<span class=\"errorText\"><br/>There was a fatal error. Please contact support.</span>');
}
});
}
Die dazugehörige web-Methode ist derzeit leer:
[WebMethod]
public static int UploadImage(object Data)
{
if (!(Security.checkAccess("/pages/Pages.aspx").Contains("w"))) //
{
return -2;
}
else
{
return -3;
}
}
Die web-Methode wird schließlich die Datei speichern und zurück "ImageId" oder assoziierte Fehler integer.
Derzeit, der AJAX-Aufruf der web-Methode nicht auftreten, es bietet einfach eine success-Meldung angezeigt, wenn es sollte nur eine der beiden Fehlermeldungen.
Ist es etwas auffallend, dass ich vermisst werde? Jede Hilfe wird sehr geschätzt.
InformationsquelleAutor Peter Liaros | 2014-10-03
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich denke das jquery-ajax-Methode möglicherweise noch nicht unterstützt, Lesen von Dateien von Ihrem computer, das war immer der Fall mit javascript, denn von der Sicherheit bis hin zu den letzten updates für das XMLHttpRequest-Objekt, die es möglich gemacht haben.
Die Lösung, die ich sehe Menschen über diese Arbeit zu machen ist immer zu verwenden, die low-level-Objekt, das anstelle von jquery oder resort zu den alten iframe-tricks (oder noch schlimmer, flash!)
dieser Jungs hat ein wirklich nettes tutorial darüber. sehen Sie, wenn es Ihnen hilft:
http://blog.teamtreehouse.com/uploading-files-ajax
InformationsquelleAutor Matheus Guimaraes