Valum 파일 업로드 - Chrome에서는 작동하지만 IE에서는 작동하지 않습니다. img = Image.FromStream (Request.InputStream)

Question

약간 수정 된 버전의 발럼 업로드 [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();   
}; 

Answer 1

IE를 브라우저로 사용할 때 요청에 입력 스트림이 없음을 알 수 있습니다. 파일 배열을 다음과 같이 파일 배열에서 꺼내 코드를 수정하는 작업을 마쳤습니다.

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"); 
}