使用通用处理程序在服务器端上传Asp.net图像

Question

我正在尝试使用以下代码在服务器端上传图片：

<asp:Repeater ID="Repeater1" runat="server">
  <ItemTemplate>
    <tr role="row">
      <td>
        <label runat="server"><%# Eval("Name") %></label>
        <input type="text" runat="server" style="display: none;" />
      </td>
      <td>
        <label runat="server"><%# Eval("Email") %></label>
        <input type="text" runat="server" style="display: none;" />
      </td>
      <td>
        <label runat="server"><%# Eval("Phone") %></label>
        <input type="text" runat="server" style="display: none;" />
      </td>
      <td>
        <img runat="server" id="ShowImage" src='<%# "~/MediaUploader/"+ Eval("Image")+".jpg" %>' alt="Image not found" />
      </td>
      <td class="text-center">
        <button id="optional_upload" type="button"></button>
        <input id="f_UploadImage" style="display:none;" type="file" />
      </td>
      <td id="optional" class="text-center;">
        <asp:Button runat="server" CssClass="optional_btn1" UseSubmitBehavior="False" OnClientClick="EditRow(); return false;" />
        <asp:LinkButton runat="server" CssClass="optional_lbtn1" Text="Update"></asp:LinkButton>
        <asp:Button CssClass="optional_btn2" runat="server" UseSubmitBehavior="False" />
      </td>
    </tr>
  </ItemTemplate>
</asp:Repeater>

以下是客户端javascript：

function sendFile(file) {
var formData = new FormData();
formData.append('file', $('#f_UploadImage')[0].files[0]);
$.ajax({
    type: 'post',
    url: 'fileUploader.ashx',
    data: formData,
    success: function (status) {
        if (status != 'error') {
            var my_path = "MediaUploader/" + status;
            //$("#myUploadedImg").attr("src", my_path);
        }
    },
    processData: false,
    contentType: false,
    error: function () {
        alert("Whoops something went wrong!");
    }
});
}
var _URL = window.URL || window.webkitURL;
$(document).ready(function () {
$('#optional_upload').click(function (e) {
    e.preventDefault();
    $('#f_UploadImage').trigger('click');
});
$('#f_UploadImage').change(function () {
    alert(1);
    var file, img;
    if ((file = this.files[0])) {
        img = new Image();
        img.onload = function () {
            sendFile(file);
        };
        img.onerror = function () {
            alert("Not a valid file:" + file.type);
        };
        img.src = _URL.createObjectURL(file);
    }
});
});

下面是我的通用处理程序类代码：

public void ProcessRequest(HttpContext context)
{
  context.Response.ContentType = "text/plain";
  try
  {
    string dirFullPath = HttpContext.Current.Server.MapPath("~/MediaUploader/");
    string[] files;
    int numFiles;
    files = System.IO.Directory.GetFiles(dirFullPath);
    numFiles = files.Length;
    numFiles = numFiles + 1;
    string str_image = "";

    foreach (string s in context.Request.Files)
    {
      HttpPostedFile file = context.Request.Files[s];
      string fileName = file.FileName;
      string fileExtension = file.ContentType;

      if (!string.IsNullOrEmpty(fileName))
      {
        fileExtension = Path.GetExtension(fileName);
        str_image = "MyPHOTO_" + numFiles.ToString() + fileExtension;
        string pathToSave_100 = HttpContext.Current.Server.MapPath("~/MediaUploader/") + str_image;
        file.SaveAs(pathToSave_100);
      }
    }
    context.Response.Write(str_image);
}

问题：当我选择成功选择图片但是当sendFile函数运行时，它会显示以下错误：

error: function () {
        alert("Whoops something went wrong!");
    }

问题：如何成功上传图片？我如何解决上述错误？