2013-04-16 116 views
3

我遇到了特定表單上的問題。ASP.NET MVC圖像表單驗證

如果表單被提交,並且表單有錯誤(也許我忘記填寫必填字段),那麼表單會按照它應有的錯誤重新加載。但是,您之前選擇的任何圖像都會消失並需要重新選擇。

之前錯誤提交形式:

enter image description here

有錯誤提交表格後:

enter image description here

這是HTML標籤中使用:

<input type="file" accept="image/*" id="Image" name="Image"/>

我需要的是圖像選擇器在提交之間仍然保持所選圖像。有沒有一個好的方法來做到這一點?有沒有辦法將文件路徑保存到會話中,並將其重新填充到元素中?

回答

2

瀏覽器將不允許文件上傳字段作爲安全措施自動恢復。爲了防止丟失文件驗證,可以在客戶端執行所有驗證(儘管您應該始終在服務器上再次驗證),因此表單從未提交,直到所有內容都正確或您必須獲取提交的文件第一次並堅持直到表單最終通過所有驗證完成。

在第二種情況下,你有兩個選擇:

  1. 保存的內容的地方,並返回一個唯一的ID指針在一個隱藏字段將舉行當您返回的形式。您還應該考慮放置一個可見標籤,顯示已上傳的文件。您將不得不定期清理放棄並稍後回來的用戶上傳的內容(因此不會提交帶有相關ID的表單以供您匹配上傳)。

  2. Base64對上傳文件的內容進行編碼並將其返回到隱藏字段中的視圖。這是更加帶寬密集型的,但它並不要求你在你的服務器上存儲一個文件,這個文件可能永遠不會與正確的表單相關聯。您可能也可以在返回的視圖中顯示相同的圖像,因爲我相信您可以指定Base64編碼的圖像作爲圖像標記的源(或者可能是CSS屬性)。這可能是瀏覽器特定的。

只要你的文件上傳的大小有限制(例如100kb)選項2是我最喜歡的方法。它並不比包含在頁面中的所有現代JavaScript庫大得多,對於用戶而言是更好的體驗,同時讓服務器保持會話,清理或過度處理的愚蠢。

編輯:允許上傳圖片的許多網站也提供了文件大小的驗證,如果文件大小過大,則會將其退回。在這種情況下,用戶反饋他們的資產沒有被存儲,並且您不必編碼並返回它。

編輯2:

這裏有一個關於瀏覽器標誌着file upload control值字段爲只讀,防止這種由JavaScript被修改(只能通過直接用戶操作進行修改)後。

這裏是關於直接在HTML中使用Base64 encoded image的SO評論。問題提供者正在尋找一種將數據放入單獨文件的方式,但這不是您想要的。 '這個作品'部分就是我在上面的選項2中提到的。

1

您可以做到這一點的唯一方法是在客戶端提供驗證。這是因爲提交給服務器「發送」了一個表單,並重新發回錯誤。正如它在評論中指出的那樣,該文件因安全而被清除(感謝Eric)

要在MVC 3中進行客戶端驗證,您可以使用非嗅覺的jquery驗證。要做到這一點,只需在web.config中添加:

<appSettings> 
    <add key="ClientValidationEnabled" value="true" /> 
    <add key="UnobtrusiveJavaScriptEnabled" value="true" /> 
</appSettings> 
+0

這不是爲了避免上傳和下載,而是防止頁面惡意猜測上傳路徑並強制瀏覽器在提交時上傳文件的安全措施。 –

1

我想你可以使用隱藏字段並顯示標籤中選定的文件。驗證後,獲取文件的內容並將其保存在Session或某個臨時位置。然後,在標籤上顯示頁面時,文件路徑是用戶之前選擇的,並在隱藏字段中更新相同。如果用戶再次提交表單,請首先檢查文件是否爲NULL,但是隱藏字段值是否存在,這意味着您之前已保存文件,如果路徑與隱藏字段不同,則可能需要重新獲取文件內容。

只保存路徑不會幫助您保存第一次上傳的文件流。我認爲如果你的用戶會很高興沒有再次加載文件,你必須從你的服務器資源支付一些東西:)