2012-05-30 37 views
4

我一直在尋找一個適合我正在使用的網站的圖片上傳組件,它將啓用多個圖片上傳功能,一旦上傳,就可以逐個刪除這些單獨的上傳內容並且與.NET MVC很好地搭配。BlueImp jQuery上傳使用ASP.NET MVC

,我到目前爲止看到的BlueImp's jQuery Upload,並從這裏下載示例MVC項目中的最好的組件:

https://github.com/maxpavlov/jQuery-File-Upload.MVC3

不過,我有2個問題,我試圖讓我的頭在附近。

1期
在我的web應用程序,用戶可以創建一個職位,因爲他們進入後期細節在同一頁上,事先提交這個帖子留言板到,他們需要能夠上傳1個或更多圖像(使用jQuery文件上傳)。

上面的BlueImp項目中的示例代碼處理圖片上傳,因爲這些文件存儲在服務器上的適當位置,並且在成功上傳後更新UI,以反映用戶上傳的圖片。但是,當用戶真正提交他們的帖子時,在我的Controller的ActionMethod中,除了存儲普通帖子的詳細信息之外,我還需要存儲用戶上傳的任何圖片的詳細信息(更具體的文件名)對於他們的帖子,所以我可以將帖子的詳細信息與相關的x上傳的圖片相關聯。

在ActionMethod中獲取此上傳圖片信息以提交帖子的最佳方式是什麼?我正在考慮將信息存儲在Session對象中,然後我可以在「SubmitPost'ActionMethod」中嗅探信息,但是如果我可以提供幫助並滿足過期問題,我不喜歡依賴會話。我也想過在DB中有一個'UploadLog'表,它保存着那個用戶上傳的圖片,但尚未提交(與帖子),但除非我有一些定期運行的內務處理過程,否則這可能會變得凌亂?我希望jQuery Upload提供的Request集合中可能有一些簡單的東西,它列出了上傳圖片的文件名,或者類似的東西?

第2期
一旦我身邊有上述問題的話,我想允許用戶編輯自己的現有職位,其中一些將已上載與它們相關的照片。

當他們到達我的編輯帖子頁面時,除了預先填寫頁面上的所有控件以及他們最初提供的帖子詳細信息之外,我還想顯示他們爲此帖子上傳的圖像列表以及能力要麼刪除它們中的任何一個,要麼上傳其他圖像。

我可以在BlueImp示例MVC項目中看到,有一個jQuery模板,用於等待上傳的圖像和已成功上傳的圖像,但在示例應用程序中看不到任何示例在我剛剛描述的'編輯帖子'場景中填充成功上傳圖片的列表。

下面是我的視圖中的模板,它呈現成功上傳的圖像,這是理想情況下我想在此「EditPost」場景中重新填充的內容。

<script id="template-download" type="text/x-tmpl"> 
{% for (var i=0, file; file=o.files[i]; i++) { %} 
    <tr class="template-download fade"> 
     {% if (file.error) { %} 
      <td></td> 
      <td class="name"><span>{%=file.name%}</span></td> 
      <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td> 
      <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td> 
     {% } else { %} 
      <td class="preview">{% if (file.thumbnail_url) { %} 
       <a href="{%=file.url%}" title="{%=file.name%}" rel="gallery" download="{%=file.name%}"><img src="{%=file.thumbnail_url%}"></a> 
      {% } %}</td> 
      <td class="name"> 
       <a href="{%=file.url%}" title="{%=file.name%}" rel="{%=file.thumbnail_url&&'gallery'%}" download="{%=file.name%}">{%=file.name%}</a> 
      </td> 
      <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td> 
      <td colspan="2"></td> 
     {% } %} 
     <td class="delete"> 
      <button class="btn btn-danger" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}"> 
       <i class="icon-trash icon-white"></i> 
       <span>{%=locale.fileupload.destroy%}</span> 
      </button> 
      <input type="checkbox" name="delete" value="1"> 
     </td> 
    </tr> 
{% } %} 
</script> 

對以上兩個問題的任何幫助將不勝感激。

UPDATE
第1期現在正在使用創建一個GUID,傳遞到視圖的達林的建議解決了,退了出去到時就是所謂的上傳功能。

問題2我已經設法解決了問題,並且很快就會發布我的解決方案。

回答

2

1期

渲染創建表格時,你可以創建一個新的GUID。然後當文件上傳時,您將它們存儲在Server.MapPath("~/Files/{xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx}")文件夾中。然後,當表單提交的唯一GUID將被作爲一個隱藏字段,你就可以繼續前進,尋找相應的文件夾內的所有用戶已上傳的文件:

public ActionResult Create() 
{ 
    var id = Guid.NewGuid(); 
    // pass this to the view 
} 

[HttpPost] 
public ActionResult Upload(Guid id) 
{ 
    // store the uploaded file at the specified by the GUID sub-folder 
} 

問題2

相同的技術,只是使用的,而不是創建一個新的關聯GUID:

public ActionResult Edit(Guid guid) 
{ 
    // go and fetch all the files that are inside the corresponding folder 
} 
+0

第1期現在排序謝謝你的建議。我明白,問題2可以應用相同的方法,從該帖子上傳文件夾獲取上傳的文件,但我的問題是,如何在'EditPost'頁面首次加載時填充'上傳文件'jQuery模板(示例項目I'指的是第一次曝光我不得不jQuery模板,所以我很抱歉,如果我忽略了明顯的)。我可以填充最初上傳圖像時使用的相同JSON對象(包含網址,文件名等),但不知道如何在頁面第一次加載時將其發送到jQ temp。 – marcusstarnes

相關問題