客戶端調整大小圖像，然後回到表單提交（無Ajax）

Question

我一直拉我的頭髮試圖找到一種方式來選擇一個圖像（輸入類型=文件），運行一個方法（on change = function blah（這個））來調整圖像的大小，然後把文件放回窗體（我知道我們不能因爲安全原因把它放回到輸入元素）！我在沒有使用Ajax的情況下解決了它。爲什麼？我想我會花更多的時間來改變應用程序，而不是爲此找到解決方案。我需要上傳帶有所有表單數據的圖像，因爲我需要通過幾個錶鏈接ID。因此，首先上傳文件（通過ajax）然後再關聯Ids（我不想沿着這條路走，因此我在這裏解決我的問題）會是一個大問題。我正在使用asp.net mvc5。我可以在不調整大小的情況下上傳圖像，但圖像大約需要3到5 MB。這對服務器來說太多了（每個用戶有多個鏡像），但是上傳時間太長（否則我會在服務器上重新調整大小）。 我已經閱讀了大約20個不同的主題，我可以得到好的想法，比如調整圖像大小的數學calc，使用canvas，FileReader，readAsUrl等等。但是所有場景都提出了異步上傳。 所以我的問題是：是否真的有可能通過輸入文件元素加載圖像，調整大小，並以某種方式將它帶回表單，以便在完整的回傳上進行上傳？

線程我已經檢查： HTML input type=file, get the image before submitting the form How to upload preview image before upload through JavaScript Preview an image before it is uploaded Resize image before submit the form html5 HTML5 Pre-resize images before uploading 在許多其他之中！這些只是幾個例子。

任何幫助將是偉大的！

Answer 1

如果我瞭解你，你應該調整圖像的大小，然後再將它保存到服務器中。如果你必須保存一些其他相關數據，那麼將圖像保存爲最後一個過程。如果給出控制器代碼和描述你想要保存圖像的時間。