将文件输入从AJAX传递到C#WebMethod
本文关键字:C#WebMethod AJAX 文件 输入 | 更新日期: 2023-09-27 18:25:28
有一些解决方案,但似乎都不适合我。
我有一个文件输入如下:(引导文件输入)
<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>
选择图像并单击"上传图像"后,将运行以下JS功能:
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>');
}
});
}
关联的web方法当前为空:
[WebMethod]
public static int UploadImage(object Data)
{
if (!(Security.checkAccess("/pages/Pages.aspx").Contains("w"))) //
{
return -2;
}
else
{
return -3;
}
}
web方法最终将保存文件并返回ImageId或相关的错误整数。
目前,对web方法的AJAX调用没有发生,它只是在只返回两条错误消息中的一条时提供了一条成功消息。
是不是我缺少了什么耀眼的东西?任何帮助都将不胜感激。
我认为jquery ajax方法可能仍然不支持从您的计算机上读取文件,因为安全性,javascript一直都是这样,直到最近对XMLHttpRequest对象的更新使其成为可能。
我看到人们用来实现这一点的解决方案总是使用低级对象,而不是jquery,或者使用旧的iframe技巧(或者更糟的是,flash!)
这家伙有一个非常好的教程。看看它是否对你有帮助:
http://blog.teamtreehouse.com/uploading-files-ajax