如何使用jquery文件上傳來調整圖像客戶端的大小

我在Rails 3.2應用中使用blueimp jquery-file-upload，通過jquery-fileupload-rails寶石。如何使用jquery文件上傳來調整圖像客戶端的大小

我正嘗試在上傳之前在客戶端調整圖像大小，但遇到文檔問題。我的代碼如下。目前上傳完美，但圖像不會調整大小。

什麼是通過jquery-file-upload調整圖像大小的正確語法。

（基於this和this文檔中的CoffeeScript中所示的兩種方法。無論是對我的作品。）

#Coffeescript 

jQuery -> 
    if $("#new_asset").length 
    $("#new_asset").fileupload 
     dataType: "script" 
     add: (e, data) -> 
     types = /(\.|\/)(jpe?g|png)$/i 
     file = data.files[0] 
     if types.test(file.type) || types.test(file.name) 
      data.context = $(tmpl("template-upload", file)) 
      $('#progress-container').append(data.context) 
      jqXHR = data.submit() 
      $("button.cancel").click (e) -> 
      jqXHR.abort() 
     else 
      alert("#{file.name} is not a jpeg or png image file") 
     progress: (e, data) -> 
     if data.context 
      progress = parseInt(data.loaded/data.total * 100, 10) 
      data.context.find('.bar').css('width', progress + '%') 
     stop: (e, data) -> 
     $('.upload').hide() 
     process: [ 
     action: "load" 
     fileTypes: /^image\/(gif|jp?g)$/ 
     maxFileSize: 20000000 # 20MB 
     , 
     action: "resize" 
     imageMaxWidth: 1500 
     imageMaxHeight: 1500 
     , 
     action: "save" 
     ] 
     dropZone: $(".dropzone") 
     sequentialUploads: true 
     disableImageResize: /Android(?!.*Chrome)|Opera/.test(window.navigator and navigator.userAgent) 
     imageMaxWidth: 1500 
     imageMaxHeight: 1500 
     downloadTemplateId: null 

#application.js 
//= require jquery-fileupload

編輯

根據馬坦薩的回答，add回調在我的代碼阻止任何處理函數被自動調用。所以，我想我需要做的是這樣

... 
add: (e, data) -> 
    $.each data.result, (index, file) -> 
    // processing code goes here

但我有很多的麻煩制定出正確的語法或使可用的引導意義。

如何將調整大小處理應用到添加回調中的每個文件？

來源

2013-09-30 Andy Harvey

我解決它通過調用過程中添加回調中，像這樣：

add: (e, data) -> 
    current_data = $(this) 
    data.process(-> 
    return current_data.fileupload('process', data); 
).done(-> 
    data.submit(); 
)

還記得加載你的JS文件在application.js ....（這浪費了我生命中的幾個小時）的正確順序：

//= require jquery-fileupload/vendor/jquery.ui.widget 
//= require jquery-fileupload/vendor/load-image 
//= require jquery-fileupload/vendor/canvas-to-blob 
//= require jquery-fileupload/jquery.iframe-transport 
//= require jquery-fileupload/jquery.fileupload 
//= require jquery-fileupload/jquery.fileupload-ui 
//= require jquery-fileupload/jquery.fileupload-process 
//= require jquery-fileupload/jquery.fileupload-validate 
//= require jquery-fileupload/jquery.fileupload-image

來源

2014-03-31 07:04:45 dannio

謝謝@dannio。這看起來很有希望。看看你的SO問題中的代碼也很有幫助。 http://stackoverflow.com/questions/22753646/using-jquery-fileupload-with-coffeescript-resizing-image-when-using-add-callba。但是，當我上傳文件時，出現控制檯錯誤。「Uncaught type error。Undefined is not a function」與此行有關：'return current_data.fileupload（'process'，data）;'。任何想法可能是什麼問題？ –

好吧，似乎我的應用程序中有一個與最新版本衝突的js文件的過時版本。擺脫這一點，類型錯誤消失。在檢查已上傳的文件後，它們現在都按預期調整大小！非常非常高興終於解決了這個問題。謝謝謝謝！！！ –

我不能滿足這個答案！ Thx @dannio – pangratz

如果這仍然是相關的 - 我發現，一旦你使用add回調，你有責任添加你需要的任何處理階段。所以對於這個問題，如果你刪除了添加回調，它會調整你的設置的圖像大小。你應該做的是註冊調整大小處理設置，每個文件中的附加功能

希望幫助

來源

2014-01-13 12:29:00 Matanza

感謝您的幫助！你有一個如何註冊調整大小處理設置的例子嗎？ – deakolt

嗨@matanza，我仍然遇到了處理添加回調中的文件的語法問題。你能提供一個代碼示例嗎？我假設我需要像'add：（e，data） - > $ .each data.result，（index，file） - > //處理代碼在這裏。但是過程代碼是什麼樣的？ –

我無法讓Image resize工作。最後我又開始了。我已經添加了圖像大小調整到現有的工作文件上傳代碼。對我而言，這是阻礙調整大小的自定義添加。一旦我刪除了自定義添加內容，它就會變得笨拙。只是想把它放在那裏爲其他奮鬥者的利益。

來源

2014-10-24 00:49:12 Rufyan

如何使用jquery文件上傳來調整圖像客戶端的大小

回答

相關問題