Chrome中的Uploadify IO错误
我正在尝试用Uploadify建立一个基本的示例，我的代码可以在所有浏览器中工作，但Chrome除外。
基本上，我要做的就是让用户选择一个图像嵌入到页面中。用户选择一个文件，在选择一个文件时，该文件通过Uploadify发送到我的C#处理程序，该处理程序将图像转换为基-64编码的字符串，并将其发送回目标img的src中。
，这是我的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 (甚至IE5仿真器w/ IE11！)、Safari中工作，但是在Chrome (v. 31.0.1650.63 m)中，onUploadError函数被击中，错误变量如下：
- 文件:文件对象
- errorCode：-220
- errorMsg:错误#2038
- errorString: IO错误
我正在使用最新版本的Uploadify (昨晚刚刚从Uploadify.com下载，v. 3.2.1)。
有没有人见过这个，或者知道我做错了什么？
更新：
在做了一些谷歌搜索后，似乎有些用户已经走上了禁用Chrome Flash的道路，我可以验证这一点，但我不喜欢这样作为解决方案。如果您转到Chrome Plugins页面，就会安装两个版本：
如果我禁用列表中的第一个，我的Uploadify可以正常工作，但我不希望我的用户不得不这样做。
解决方案：
由于我使用Uploadify的全部目的是将图像发送到处理程序，并使用处理程序的响应，而不需要刷新页面，而且该处理程序只是将图像转换为base64编码的字符串，因此我将在可用的情况下使用HTML5的FileReader。因此，对于Chrome，FF，IE10& 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);
}
});
}
});回答 1
Stack Overflow用户
发布于 2013-12-09 15:47:08
现在的解决方案是使用现代图来检测HTML5FileAPI是否可用(特别是FileReader)。如果可用，我将使用FileReader将图像转换为基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);
}
});
}
});https://stackoverflow.com/questions/20473279
复制相似问题
腾讯云开发者
