asp.net - 值文件上传-在Chrome中有效,但在IE中不可用,图像img = Image.FromStream(Request.InputStream)

原文 标签 asp.net jquery file-upload internet-explorer-8

我使用的是Valum上传[github link]的略微修改版本,我已经对其进行了修改以上传到数据库,但是还没有修改它用来将文件作为InputStream进入请求的javascript。

以下代码行在IE 8中失败,但已确认可在Chrome中运行。

using (Image imgInput = Image.FromStream(Request.InputStream))


收到的错误是“参数无效”。似乎使用的输入流有问题,但它存在/有数据(不确定如何验证数据是否正确)。

任何人都有任何想法或我可以提供更多细节吗?同一张图片可以在Chrome中使用,并且可以正确上传。



<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>


控制者

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

最佳答案

原来,使用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");
}

关于asp.net - 值文件上传-在Chrome中有效,但在IE中不可用,图像img = Image.FromStream(Request.InputStream),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4371015/

相关文章:

asp.net - 如何移植到 .NET 核心?

asp.net - 相当于 Sitecore 中的 Razor Section Helper

jquery - .delay() 行为不符合预期

php - 快速调试和有效修复大图像文件上传失败的最佳方法

Asp.net 网站和网络服务托管

c# - 属性指示控件及其父项

jquery - 使用 JsPlumb 用一行连接 jQuery UI 对话框

javascript - JavaScript递归函数中的错误

javascript - 在 img 标签中上传图片

php - 检测何时ajax上传意外终止