4

私が取り組んでいる Web サイトに適した画像アップロード コンポーネントを探していました。これにより、複数の画像のアップロードが可能になり、アップロード後にこれらの個々のアップロードを 1 つずつ削除でき、.NET MVC とうまく連携します。

これまでに見た中で最も優れたコンポーネントはBlueImp の jQuery Uploadで、サンプル MVC プロジェクトを次の場所からダウンロードしました。

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

ただし、頭を悩ませようとしている2つの問題があります。

問題 1
私の Web アプリケーションでは、ユーザーは投稿を作成でき、投稿の詳細を入力するのと同じページで、この投稿をメッセージボードに送信する前に、1 つ以上の画像をアップロードできる必要があります (jQuery ファイルを使用)アップロード）。

上記の BlueImp プロジェクトのサンプル コードは、画像のアップロードを処理します。ファイルはサーバー上の適切な場所に保存され、アップロードが成功すると UI が更新され、ユーザーがアップロードした画像が反映されます。

ただし、ユーザーが実際に投稿を送信するときは、コントローラーの ActionMethod で、通常の投稿の詳細を保存するだけでなく、ユーザーが投稿用にアップロードした画像の詳細 (具体的にはファイル名) も保存する必要があります。そのため、投稿の詳細を関連する x アップロードされた画像に関連付けることができます。

投稿を送信するための ActionMethod 内でこのアップロードされた画像情報を取得する最良の方法は何でしょうか? 「SubmitPost」ActionMethod内で盗聴できるSessionオブジェクトに情報を保存することを考えていましたが、有効期限の問題があるため、できる限りセッションに依存するのは好きではありません。また、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>

上記の 2 つの問題のいずれかに関するヘルプをいただければ幸いです。

UPDATE
問題 1 は、Guid を作成し、ビューに渡し、それが呼び出されたときにアップロード機能に戻るという Darin の提案を使用して解決されました。

問題 2 私は今うまくいくことができたので、すぐに解決策を投稿します。

4

1 に答える 1

2

問題1

Createフォームをレンダリングするときに、新しい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を作成する代わりに、関連するGUIDを使用します。

public ActionResult Edit(Guid guid)
{
    // go and fetch all the files that are inside the corresponding folder
}
于 2012-05-30T08:09:18.430 に答える