jQuery文件上傳不再調整圖像

Question

我使用jQuery文件上傳在我的項目，因爲三個月上傳和調整圖像文件的大小。直到上週，一切都很順利。該插件不再調整圖像大小（最新的谷歌瀏覽器和最新的Firefox）。

我使用這個頁面上的相同的基本配置https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin

是否有人有同樣的問題，也許一個解決方案嗎？

感謝

Answer 1

最好的辦法是我在做什麼現在是：

$('#fileupload').fileupload({ 
     dataType: 'json', 
     url: 'Upload.ashx, 
     done: function (e, data) { 
     $("#page_navigation").show(); 
      $.each(data.result, function (index, file) { 
      $('#placeholderforimages').append("<img style='height:48px;width:65px;' src='yourimagepath'>"); 
      } 
}); 

UPDATE：

下面是你需要做一個數組，需要聲明維基options在

[ 
    { 
        action: 'load', 
        fileTypes: /^image\/(gif|jpeg|png)$/, 
        maxFileSize: 20000000 // 20MB 
    }, 
    { 
        action: 'resize', 
        maxWidth: 1920, 
        maxHeight: 1200, 
        minWidth: 800, 
        minHeight: 600 
    }, 
    { 
        action: 'save' 
    } 
], 

Answer 2

我無法獲得客戶端圖像調整大小的工作，我發現這是因爲我重寫了add方法，並沒有包含代碼來執行原始方法中的圖像大小調整。我會發布我的解決方案，希望能幫助別人解決一些挫折。

<form action="/path/to/uploadHandler" id="multiple-image-upload" enctype="multipart/form-data" method="post" accept-charset="utf-8"> 
    <input name="files" multiple="multiple" id="files" type="file"> 
</form> 

<div id="file-upload-progress"> 
    <div id="upload-progress"> 
     <div class="bar" style="width: 0%;"></div> 
    </div> 
</div> 

<script type="text/javascript"> 
$(function() { 
    $('#multiple-image-upload').fileupload({ 
     dataType: 'json', 
     // Enable image resizing, except for Android and Opera, 
     // which actually support image resizing, but fail to 
     // send Blob objects via XHR requests: 
     disableImageResize: /Android(?!.*Chrome)|Opera/ 
      .test(window.navigator.userAgent), 
     process:[ 
      { 
       action: 'load', 
       fileTypes: /^image\/(gif|jpeg|png)$/, 
       maxFileSize: 20000000 // 20MB 
      }, 
      { 
       action: 'resize', 
       maxWidth: 1920, 
       maxHeight: 1200, 
       minWidth: 800, 
       minHeight: 600 
      }, 
      { 
       action: 'save' 
      } 
     ], 
     add: function (e, data) { 
      data.context = $('<p/>').text('Uploading '+data.files[0].name+'...').appendTo("#file-upload-progress"); 
      var $this = $(this); 
      data.process(function() { 
       return $this.fileupload('process', data); 
      }).done(function() { 
       data.submit(); 
      }); 
     }, 
     done: function (e, data) { 
      data.context.html('<img src="'+data.result.files[0].thumbnailUrl+'" alt="'+data.result.files[0].name+'" />'); 
     }, 
     progressall: function (e, data) { 
      var progress = parseInt(data.loaded/data.total * 100, 10); 
      $('#upload-progress .bar').css(
       'width', 
       progress + '%' 
      ).text(
       progress + '%' 
      ); 
     } 
    }); 
})(); 

Answer 3

我有太多的問題與jQuery文件上傳和管理由以下部分更改選項文件中的「jquery.fileupload-image.js」來解決這個問題：

// The File Upload Resize plugin extends the fileupload widget 
// with image resize functionality: 
$.widget('blueimp.fileupload', $.blueimp.fileupload, { 

    options: { 
     ... 
     // The maximum file size of images to load: 
     loadImageMaxFileSize: 20000000, // 10MB 
     // The maximum width of resized images: 
     imageMaxWidth: 250, 
     // The maximum height of resized images: 
     imageMaxHeight: 250, 
     ... 
     // Disable the resize image functionality by default: 
     disableImageResize: false, 
     ... 
    }, 

不知何故做將選項放在「其他地方」（在我的情況下，從官方頁面的官方教程中複製的所有代碼）不會覆蓋此處所陳述/顯示的默認選項。

• 這可能是我的錯，所以沒有進攻。無論如何，如果這個建議可以幫助別人，那就是這樣。試試看，如果你喜歡或離開它。