将文件输入从AJAX传递到C#WebMethod

虽然有一些解决方案，但似乎都不适合我

我有一个文件输入，如下所示：（引导文件输入）

web方法最终将保存文件并返回ImageId或相关的错误整数

目前，对web方法的AJAX调用没有发生，它只是在只返回两条错误消息中的一条时提供一条成功消息

---

是不是有什么东西我错过了？任何帮助都将不胜感激。

我认为jquery ajax方法可能仍然不支持从计算机读取文件，这在javascript中一直是如此，因为安全性问题，直到最近对XMLHttpRequest对象的更新使其成为可能

我看到人们用来实现这一点的解决方案总是使用低级对象，而不是jquery，或者使用旧的iframe技巧（或者更糟糕的是，flash！）

这家伙有一个很好的教程。看看它是否对你有帮助：

<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&amp;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>

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

 [WebMethod]
 public static int UploadImage(object Data)
 {
    if (!(Security.checkAccess("/pages/Pages.aspx").Contains("w"))) // 
    {
       return -2;
    }
    else
    {
       return -3;
    }
 }