Question

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

基本上，我要做的就是让用户选择要嵌入页面的图像。用户选择一个文件，在选择文件时，文件通过Uploadify发送到我的C＃处理程序，该处理程序将图像转换为base-64编码的字符串，并将其发送回src的{{1}}目标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 5模拟器，IE 11！），Safari，但是在Chrome中（ v.31.0.1650.63 m ）onUploadError函数被命中，错误变量如下：

file：[file Object]

errorCode：-220

errorMsg：错误＃2038

errorString：IO错误

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

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

更新

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

Chrome plugins page

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

SOLUTION：

由于我使用Uploadify的整个过程是将图像发送到处理程序，并且在没有页面刷新的情况下使用处理程序的响应，并且该处理程序仅将图像转换为base64编码的字符串，我将使用HTML 5 FileReader可用。因此对于Chrome，FF，IE 10＆amp; up，甚至不会使用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 File API是否可用（特别是FileReader）。如果可用，我将使用FileReader将图片转换为基本64位编码字符串，并在img的{{1}}属性中使用该字符串。

src

在Chrome中上传IO错误

1 个答案: