Valum文件上传 - 适用于Chrome，但不是IE，图片IMG = Image.FromStream（Request.InputStream） [英] Valum file upload - Works in Chrome but not IE, Image img = Image.FromStream(Request.InputStream)
本文介绍了Valum文件上传 - 适用于Chrome，但不是IE，图片IMG = Image.FromStream（Request.InputStream）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用Valum的上传[ GitHub的链接]略加修改的版本，我已经修改了它上传到数据库，但没有修改它使用来获取文件到Request作为一个InputStream的JavaScript。
code的下面一行未能在IE 8，但证实在Chrome工作。
使用（图像imgInput = Image.FromStream（Request.InputStream））
收到的错误是参数无效。它似乎有与输入流的问题被使用，但它的存在/有数据（不知道如何验证，如果数据是好还是不好）。
任何人有任何的想法，还是有更多的细节，我可以包括哪些内容？同样的图像可以在Chrome浏览器中使用，并进行正确上传。
页
＆LT; ASP：内容ID =内容2ContentPlaceHolderID =日程地址搜索Maincontent=服务器＆GT;
＆LT; H2＆GT;上传，图片和LT; / H＆GT;
＆LT; DIV ID =文件上传＆GT;
＆LT; NOSCRIPT＆GT;
＆LT; P＆gt;请启用JavaScript才能使用文件上传＆LT; / P＆GT;
＆LT; / NOSCRIPT＆GT;
＆LT; / DIV＆GT;
＆LT;脚本的src =/脚本/ fileuploader.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
功能createUploader（）{
VAR上传=新qq.FileUploader（{
元素：的document.getElementById（'文件上传'），
动作：'/管理/文件上传/'+＆LT;％= Model.PropertyId％＆gt;中
调试：真
}）;
}
在window.onload = createUploader;
＆LT; / SCRIPT＆GT;
＆LT; / ASP：内容＆GT;
控制器
的[AcceptVerbs（HttpVerbs.Post）
公共JsonResult文件上传（INT ID）
{
尝试
{
字节[] = newImageByteArray GetByteArrayForResizedImage（350，Request.InputStream）;
字节[] = thumbnailByteArray GetByteArrayForResizedImage（150，Request.InputStream）; //添加到DB
}
赶上（异常前）
{
//这是其中异常被捕获
返回JSON（新{成功= FALSE，消息= ex.Message}，应用/ JSON）;
} 返回JSON（新{成功= TRUE}，应用/ JSON）;
} 私人静态的byte [] GetByteArrayForResizedImage（INT IMAGESIZE，流的InputStream）
{
字节[] imageByteArray; //出于某种原因，在IE这里的InputStream为使其崩溃
使用（图像imgInput = Image.FromStream（InputStream的））
{
//图像处理
} 返回imageByteArray;
}
fileuploader.js - qq.FileUploader
/ **
*与拖和拖放和文件列表创建上传Widget类
* @inherits qq.FileUploaderBasic
* /
qq.FileUploader =功能（O）{
//调用父类的构造
qq.FileUploaderBasic.apply（这一点，参数）; //附加选项
qq.extend（this._options，{
元素：空，
//如果设置，将被用来代替的qq上传列表中模板
listElement：空， 模板：'＆LT; DIV CLASS =QQ-上传＆GT;' +
'＆LT; DIV CLASS =QQ上传拖放区＆GT;＆LT;跨度＆GT;文件拖放此处上传＆LT; / SPAN＆GT;＆LT; / DIV＆GT;' +
'＆LT; DIV CLASS =QQ上传按钮＆GT;上传一个文件＆LT; / DIV＆GT;' +
'＆LT; UL类=QQ上传列表＆GT;＆LT; / UL＆GT;' +
'＆LT; / DIV＆GT;， //模板文件列表中的一个项目
fileTemplate：'＆LT;立GT;' +
'＆LT;跨度类=QQ上传文件＆GT;＆LT; / SPAN＆GT;' +
'＆LT;跨度类=QQ上传微调＆GT;＆LT; / SPAN＆GT;' +
'＆LT;跨度类=QQ上传尺寸＆GT;＆LT; / SPAN＆GT;' +
'＆LT;一类=QQ上传-取消的href =＃＆GT;取消＆LT; / A＆GT;' +
'＆LT;跨度类=QQ上传-失败文本＆GT;＆失败LT; / SPAN＆GT;' +
'＆LT; /李＆GT;， 类：{
//用于从模板元素
键：QQ上传按钮'，
掉落：QQ上传-落区，
dropActive：QQ上传-落区域有源，
清单：QQ上传列表'， 文件：'QQ上传文件'，
微调：QQ上传微调，
大小：QQ上传大小'，
取消：QQ上传-取消'， //添加上传完成后，列出项目
//在CSS用来隐藏进度微调
成功：QQ上传-成功'，
失败：QQ上传失败」
}
}）;
提供与用户//覆盖选项
qq.extend（this._options，O）; this._element = this._options.element;
this._element.innerHTML = this._options.template;
this._listElement = this._options.listElement || this._find（this._element，'名单'）; this._classes = this._options.classes; this._button = this._createUploadButton（this._find（this._element，'按钮'））; this._bindCancelEvent（）;
this._setupDragDrop（）;
};
fileuploader.js - qq.FileUploaderBasic
/ **
*创建上传按钮，验证上传，但不建立文件列表或DD。
* /
qq.FileUploaderBasic =功能（O）{
this._options = {
//设置为true，看到服务器响应
调试：假的，
动作：'/服务器/上传'，
PARAMS：{}，
按钮：空，
多：真，
MAXCONNECTIONS：3，
//验证
allowedExtensions：[]，
的sizeLimit：0，
minSizeLimit：0，
//事件
//返回false取消提交
的onSubmit：功能（ID，文件名）{}，
onProgress：功能（ID，文件名，加载，总）{}，
的onComplete：功能（ID，文件名，responseJSON）{}，
onCancel：功能（ID，文件名）{}，
//消息
消息：{
类型错误：{}文件具有无效的扩展仅{}扩展允许。
sizeError：{}文件过大，最大文件尺寸为{}的sizeLimit。
minSizeError：{文件}太小，最小文件大小为{minSizeLimit}，
emptyError：{}文件是空的，请选择文件又离不开它。
onLeave道：文件被上传，如果你离开现在的上传将被取消。
}，
showMessage：功能（消息）{
警报（消息）;
}
};
qq.extend（this._options，O）; //文件数量正在上传
this._filesInProgress = 0;
this._handler = this._createUploadHandler（）; 如果（this._options.button）{
this._button = this._createUploadButton（this._options.button）;
} 这._ preventLeaveInProgress（）;
};
解决方案
原来有使用IE作为浏览器的时候是不是在请求的输入流。最终通过拉出来的文件阵这样的固定code：
如果（String.IsNullOrEmpty（请求[qqfile]））
{
//这适用于IE浏览器
HttpPostedFileBase httpPostedFileBase = Request.Files [0]作为HttpPostedFileBase;
字节[] = newImageByteArray GetByteArrayForResizedImage（350，httpPostedFileBase.InputStream）;
字节[] = thumbnailByteArray GetByteArrayForResizedImage（150，httpPostedFileBase.InputStream）; //这里做的东西 返回JSON（新{成功= TRUE}，text / html的）;
}
其他
{
字节[] = newImageByteArray GetByteArrayForResizedImage（350，Request.InputStream）;
字节[] = thumbnailByteArray GetByteArrayForResizedImage（150，Request.InputStream）; //这里做的东西 返回JSON（新{成功= TRUE}，应用/ JSON）;
}
I'm using a slightly modified version of Valum's upload [github link], I've modified it to upload to a database but haven't modified the javascript that it is using to get the file into the Request as an InputStream.
The following line of code is failing in IE 8 but is confirmed to work in Chrome.
using (Image imgInput = Image.FromStream(Request.InputStream))
The error received is "Parameter not valid". It appears to be having an issue with the Input Stream being used but it exists/has data (not sure how to validate if the data is good or not).
Anyone have any ideas or are there more details I can include? The same image is able to be used in Chrome and is uploaded appropriately.
Page
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2>Upload-Pictures</h2>
<div id="file-uploader">
<noscript>
<p>Please enable JavaScript to use file uploader.</p>
</noscript>
</div>
<script src="/Scripts/fileuploader.js" type="text/javascript"></script>
<script type="text/javascript">
function createUploader() {
var uploader = new qq.FileUploader({
element: document.getElementById('file-uploader'),
action: '/Admin/FileUpload/' + <%= Model.PropertyId %>,
debug: true
});
}
window.onload = createUploader;
</script>
</asp:Content>
Controller
[AcceptVerbs(HttpVerbs.Post)]
public JsonResult FileUpload(int id)
{
try
{
byte[] newImageByteArray = GetByteArrayForResizedImage(350, Request.InputStream);
byte[] thumbnailByteArray = GetByteArrayForResizedImage(150, Request.InputStream);
//Add to DB
}
catch (Exception ex)
{
// This is where the exception is caught
return Json(new { success = false, message = ex.Message }, "application/json");
}
return Json(new { success = true }, "application/json");
}
private static byte[] GetByteArrayForResizedImage(int imageSize, Stream inputStream)
{
byte[] imageByteArray;
// For some reason in IE the inputStream here is causing it to crash
using (Image imgInput = Image.FromStream(inputStream))
{
//Image processing
}
return imageByteArray;
}
fileuploader.js - qq.FileUploader
/**
* Class that creates upload widget with drag-and-drop and file list
* @inherits qq.FileUploaderBasic
*/
qq.FileUploader = function(o){
// call parent constructor
qq.FileUploaderBasic.apply(this, arguments);
// additional options
qq.extend(this._options, {
element: null,
// if set, will be used instead of qq-upload-list in template
listElement: null,
template: '<div class="qq-uploader">' +
'<div class="qq-upload-drop-area"><span>Drop files here to upload</span></div>' +
'<div class="qq-upload-button">Upload a file</div>' +
'<ul class="qq-upload-list"></ul>' +
'</div>',
// template for one item in file list
fileTemplate: '<li>' +
'<span class="qq-upload-file"></span>' +
'<span class="qq-upload-spinner"></span>' +
'<span class="qq-upload-size"></span>' +
'<a class="qq-upload-cancel" href="#">Cancel</a>' +
'<span class="qq-upload-failed-text">Failed</span>' +
'</li>',
classes: {
// used to get elements from templates
button: 'qq-upload-button',
drop: 'qq-upload-drop-area',
dropActive: 'qq-upload-drop-area-active',
list: 'qq-upload-list',
file: 'qq-upload-file',
spinner: 'qq-upload-spinner',
size: 'qq-upload-size',
cancel: 'qq-upload-cancel',
// added to list item when upload completes
// used in css to hide progress spinner
success: 'qq-upload-success',
fail: 'qq-upload-fail'
}
});
// overwrite options with user supplied
qq.extend(this._options, o);
this._element = this._options.element;
this._element.innerHTML = this._options.template;
this._listElement = this._options.listElement || this._find(this._element, 'list');
this._classes = this._options.classes;
this._button = this._createUploadButton(this._find(this._element, 'button'));
this._bindCancelEvent();
this._setupDragDrop();
};
fileuploader.js - qq.FileUploaderBasic
/**
* Creates upload button, validates upload, but doesn't create file list or dd.
*/
qq.FileUploaderBasic = function(o){
this._options = {
// set to true to see the server response
debug: false,
action: '/server/upload',
params: {},
button: null,
multiple: true,
maxConnections: 3,
// validation
allowedExtensions: [],
sizeLimit: 0,
minSizeLimit: 0,
// events
// return false to cancel submit
onSubmit: function(id, fileName){},
onProgress: function(id, fileName, loaded, total){},
onComplete: function(id, fileName, responseJSON){},
onCancel: function(id, fileName){},
// messages
messages: {
typeError: "{file} has invalid extension. Only {extensions} are allowed.",
sizeError: "{file} is too large, maximum file size is {sizeLimit}.",
minSizeError: "{file} is too small, minimum file size is {minSizeLimit}.",
emptyError: "{file} is empty, please select files again without it.",
onLeave: "The files are being uploaded, if you leave now the upload will be cancelled."
},
showMessage: function(message){
alert(message);
}
};
qq.extend(this._options, o);
// number of files being uploaded
this._filesInProgress = 0;
this._handler = this._createUploadHandler();
if (this._options.button){
this._button = this._createUploadButton(this._options.button);
}
this._preventLeaveInProgress();
};
解决方案
Turns out that there is not an input stream in the Request when using IE as your browser. Ended up fixing the code by pulling it out of the Files array like this:
if (String.IsNullOrEmpty(Request["qqfile"]))
{
//This works with IE
HttpPostedFileBase httpPostedFileBase = Request.Files[0] as HttpPostedFileBase;
byte[] newImageByteArray = GetByteArrayForResizedImage(350, httpPostedFileBase.InputStream);
byte[] thumbnailByteArray = GetByteArrayForResizedImage(150, httpPostedFileBase.InputStream);
//Do stuff here
return Json(new { success = true }, "text/html");
}
else
{
byte[] newImageByteArray = GetByteArrayForResizedImage(350, Request.InputStream);
byte[] thumbnailByteArray = GetByteArrayForResizedImage(150, Request.InputStream);
//Do stuff here
return Json(new { success = true }, "application/json");
}
这篇关于Valum文件上传 - 适用于Chrome，但不是IE，图片IMG = Image.FromStream（Request.InputStream）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
