在 Chrome 中上传 IO 错误

Question

我正在尝试使用 Uploadify 设置一个基本示例，并且我的代码适用于除 Chrome 之外的所有浏览器。

基本上，我要做的就是让用户选择要嵌入页面的图像。用户选择一个文件，然后选择一个文件，通过 Uploadify 将文件发送到我的 C# 处理程序，该处理程序将图像转换为 base-64 编码字符串，并将其发送回目标的src img.

这是我的 JS：

<link rel="stylesheet" href="Content/Uploadify/uploadify.css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="Content/Uploadify/jquery.uploadify.js"></script>
<script type="text/javascript">

   $(function () {
      $("#fileUpload").uploadify({
         'swf': 'Content/Uploadify/uploadify.swf',
         'uploader': 'ImageHandler.ashx',
         'onUploadSuccess': function (file, data, response) {
            $("#theImage").attr("src", data);
          },
          'onUploadError': function (file, errorCode, errorMsg, errorString) {
             alert('The file ' + file.name + ' could not be uploaded: ' + errorString);
          }
       });
    });
</script>

HTML：

<input type="file" id="fileUpload" />
<img id="theImage" height="300" width="300"/>

这是我的处理程序代码：

public void ProcessRequest(HttpContext context)
{
   if (context.Request.Files.Count > 0)
   {
      byte[] bytes = null;
      using (var binaryReader = new BinaryReader(context.Request.Files[0].InputStream))
      {
         bytes = binaryReader.ReadBytes(context.Request.Files[0].ContentLength);
         var base64 = Convert.ToBase64String(bytes);

         var imgSource = "data: " + context.Request.ContentType + ";base64," + base64;

         context.Response.ContentType = "text/plain";
         context.Response.Write(imgSource);
      }
   }

   context.Response.ContentType = "text/plain";
   context.Response.Write("");

}

如您所见，它非常简单，适用于 FF、IE（甚至是带有 IE 11 的 IE 5 模拟器！）、Safari，但在 Chrome 中（v. 31.0.1650.63 m) onUploadError 函数被命中，错误变量如下：

1. 文件：[文件对象]
2. 错误代码：-220
3. errorMsg：错误 #2038
4. errorString：IO 错误

我使用的是最新版本的 Uploadify（昨晚刚从 Uploadify.com 下载，v. 3.2.1）。

有没有人见过这个或者知道我做错了什么？

更新：

在进行了一些 Google 搜索后，似乎有些用户已经在 Chrome 中禁用了 Flash，我可以验证这是否可行，但我不喜欢将其作为解决方案。如果您转到 Chrome 插件页面，则安装了 2 个版本：

如果我禁用列表中的第一个，我的 Uploadify 工作正常，但我不希望我的用户必须这样做。

解决方案：

由于我使用 Uploadify 的全部目的是将图像发送到处理程序，并使用处理程序的响应而不刷新页面，并且该处理程序仅将图像转换为 base64 编码字符串，所以我会使用 HTML 5 的 FileReader 可用。因此，对于 Chrome、FF、IE 10 及更高版本，甚至不会使用 Uploadify。这是我的跨浏览器的新代码：

$(function () {
   if (Modernizr.filereader) {
      var $fileUpload = $("#fileUpload");
      $fileUpload.on("change", function (e) {
         var files = e.target.files;
         if (files.length) {
            var reader = new FileReader();
            reader.onload = function (e) {
               $("#theImage").attr("src", reader.result);
            }
            reader.readAsDataURL(files[0]);
         }
      });
   } else {
      // browser doesn't support the HTML 5 file reader api, so fall back to Uploadify:
      $("#fileUpload").uploadify({
         'swf': 'Content/Uploadify/uploadify.swf',
         'uploader': 'ImageHandler.ashx',
         'onUploadSuccess': function (file, data, response) {
            $("#theImage").attr("src", data);
         },
         'onUploadError': function (file, errorCode, errorMsg, errorString) {
            alert('The file ' + file.name + ' could not be uploaded: ' + errorString);
         }
      });
   }
});

Answer 1

目前的解决方案是使用 Modernizr 来检测 HTML 5 文件 API 是否可用（特别是 FileReader）。如果可用，我将使用FileReader 将图像转换为base 64 编码字符串，并在img 的src 属性中使用它。

$(function () {
   if (Modernizr.filereader) {
      var $fileUpload = $("#fileUpload");
      $fileUpload.on("change", function (e) {
         var files = e.target.files;
         if (files.length) {
            var reader = new FileReader();
            reader.onload = function (e) {
               $("#theImage").attr("src", reader.result);
            }
            reader.readAsDataURL(files[0]);
         }
      });
   } else {
      // browser doesn't support the HTML 5 file reader api, so fall back to Uploadify:
      $("#fileUpload").uploadify({
         'swf': 'Content/Uploadify/uploadify.swf',
         'uploader': 'ImageHandler.ashx',
         'onUploadSuccess': function (file, data, response) {
            $("#theImage").attr("src", data);
         },
         'onUploadError': function (file, errorCode, errorMsg, errorString) {
            alert('The file ' + file.name + ' could not be uploaded: ' + errorString);
         }
      });
   }
});