Valum文件上传 – 适用于Chrome但不适用于IE,Image img = Image.FromStream(Request.InputStream)
我正在使用Valum上传[ github链接 ]的略微修改版本,我已将其修改为上传到数据库,但尚未修改它用于将文件作为InputStream传入Request的javascript。
以下代码行在IE 8中失败,但已确认可在Chrome中使用。
using (Image imgInput = Image.FromStream(Request.InputStream))
收到的错误是“参数无效”。 它似乎存在使用输入流的问题,但它存在/有数据(不确定如何validation数据是否良好)。
任何人都有任何想法或者我可以包含更多细节吗? 相同的图片可以在Chrome中使用并正确上传。
页
Upload-Pictures
Please enable JavaScript to use file uploader.
function createUploader() { var uploader = new qq.FileUploader({ element: document.getElementById('file-uploader'), action: '/Admin/FileUpload/' + , debug: true }); } window.onload = createUploader;
调节器
[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: '' + 'Drop files here to upload' + ' ' + '
' + '', // template for one item in file list fileTemplate: '' + '' + '' + '' + 'Cancel' + 'Failed' + ' ', 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(); };
事实certificate,当使用IE作为浏览器时,请求中没有输入流。 最后通过将它从Files数组中拉出来修复代码,如下所示:
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"); }