Загрузить ошибку ввода-вывода в Chrome

Question

Я пытаюсь получить базовый пример с настройкой Uploadify, и мой код работает во всех браузерах, кроме Chrome.

В принципе, все, что я пытаюсь сделать, это позволить пользователю выбрать изображение, которое будет встроено в страницу. Пользователь выбирает файл, а при его выборе файл отправляется через Uploadify в мой обработчик C#, который преобразует изображение в кодировку с базовым кодом 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 5 эмулятор w/IE 11!), Safari, но когда в Chrome (против 31.0.1650.63 м) функция onUploadError получает удар, а переменные ошибки заключаются в следующем:

1. файл: [файл Object]
2. ERRORCODE: -220
3. ErrorMsg: Error # 2038
4. errorString: IO Error

Я использую последнюю версию Uploadify (только что загруженную с Uploadify.com прошлой ночью, v. 3.2.1).

Кто-нибудь видел это раньше или знал, что я делаю неправильно?

UPDATE:

После выполнения некоторых поисков Google, кажется, что некоторые пользователи пошли маршрут отключения вспышки в Chrome, и я могу проверить, что это работает, но я не люблю это в качестве решения. Если вы зайдете на страницу Chrome плагинов существует 2 версии установлены:

Если отключить первый в списке, мой Uploadify работает нормально, но я не ожидаю, что мои пользователи должны сделать это ,

РЕШЕНИЕ:

Поскольку вся точка мне с помощью Uploadify было отправить изображение в обработчик, и использовать ответ обработчика без обновления страницы, и этот обработчик только преобразование изображения в кодировке base64, я бы использовал HTML 5's FileReader, где это возможно. Так что для Chrome, FF, IE 10 & 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 и использовать его в атрибуте imgsrc.

$(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); 
     } 
     }); 
    } 
});