14

ASP.NET Mvc 3とMicrosoft.Web.Helpers NuGet パッケージを使用して、画像のファイル アップロードを実装しました。ファイルを参照して指定したディレクトリにアップロードできるため、実装は非常に簡単です。

ASP.NET MVC 3と Microsoft.Web.Helpers NuGetプラグインを使用したイメージ アップロード ソリューションの内容を次に示します。

ここに画像の説明を入力

今ViewModelコード

 namespace MvcImageUpload.Models {
    public class ImageUploadViewModel {
        [UIHint("UploadedImage")]
        public string ImageUrl { get; set; }
        public string ImageAltText { get; set; }
    }    
}

コントローラーについては、これを Home コントローラーにドロップしただけです。これは、これを機能させるための単なるモック プロジェクトだからです。ActionResultImageUploadViewModel をパラメーターとして受け取る を追加しました。

      public ActionResult Upload(ImageUploadViewModel model) {
        var image = WebImage.GetImageFromRequest();

        if (image != null) {
            if (image.Width > 500) {
                image.Resize(500, ((500 * image.Height) / image.Width));
            }

            var filename = Path.GetFileName(image.FileName);
            image.Save(Path.Combine("../Uploads/Images", filename));
            filename = Path.Combine("~/Uploads/Images", filename);
           
                model.ImageUrl = Url.Content(filename);
                model.ImageAltText = image.FileName.Substring(0, image.FileName.Length - 4);
           
        }

        return View("Index", model);
    }

画像をアップロードするための私のビューは単純です。Html.BeginForm があり、Post フォーム メソッドを処理し、エンコーディング タイプが「multipart/form-data」に設定されています。

次に、Microsoft.Web.Helpers.FileUpload ヘルパーを使用して、HTTP ポストから画像を要求し、ImageViewer と呼ばれるカスタム DisplayFor テンプレートを使用して表示します。

 @model MvcImageUpload.Models.ImageUploadViewModel
    @using Microsoft.Web.Helpers;
    @{
        ViewBag.Title = "Index";
     }

    <h2>Image Uploader</h2>
    @using (Html.BeginForm("Upload", "Home", FormMethod.Post, 
        new { @encType = "multipart/form-data" })) {           
        @FileUpload.GetHtml(initialNumberOfFiles: 1, allowMoreFilesToBeAdded: false, 
            includeFormTag: false, addText: "Add Files", uploadText: "Upload File") <br />        
                                      
        <input type="submit" name="submit" 
               value="Upload Image" text="Upload Images" 
               style="font-size: .9em;" />
        @Html.DisplayFor(x => x, "ImageViewer")<br />
    }

カスタム DisplayTemplate は次のようになります。

    @model MvcImageUpload.Models.ImageUploadViewModel
@if (Model != null) { 
    <h4 style="color:Green;">Upload Success!</h4>           
    <p>
        Alt Text has been set to <strong>@Model.ImageAltText</strong>
    </p>
    <img  style="padding: 20px;" 
        src="@(String.IsNullOrEmpty(Model.ImageUrl) ? "" : Model.ImageUrl)" 
            id="uploadedImage"  alt="@Model.ImageAltText"/>
}

これはすべて機能し、画像はフォーム投稿の /Uploads/Images/FileName.extension に正常にアップロードされます。

私の質問

そのディレクトリ内のすべての画像を表示し、ページングして、ビューとディレクトリから画像を選択および削除できる別のビューを作成するにはどうすればよいですか?

また、Microsoft.Web.Helpers.FileUpload が複数のファイルのアップロードをサポートしていることも知っていますが、現在のソリューションでこれを実装する方法が見つかりません。どんな助けでも大歓迎です。

4

3 に答える 3

3

[画像のアップロード] ボタンをクリックすると、システムはRequest ファイルを取得するために使用するメソッドを呼び出す必要があります。

    [HttpPost]
    public ActionResult Upload()
    {
        if(Request.Files != null && Request.Files.Count > 0)
        {
                for (int i = 0; i < request.Files.Count; i++)
                {
                    var postFile = request.Files[i];
                    if (postFile != null && postFile.ContentLength > 0)
                    {
                        if (postFile.ContentLength < GetMaxRequestLength())  //10MB
                        {
                             var file = new ContractAttachment
                            {
                                Name = Path.GetFileName(postFile.FileName),
                                ContentType = postFile.ContentType,
                                FileLength = postFile.ContentLength,
                                FileData = GetStreamBuffer(postFile)
                            };
                            files.Add(file);
                        }

                    }
                }
          }

    }

この助けを願っています。

于 2011-11-02T11:23:39.500 に答える
1

あなたが求めているのは、私にとっては実装ではなく、クエリのように見えます....

表示するには：DirectoryInfoを介してUploads/Imagesディレクトリからすべての画像を取得します...拡張子に基づいてディレクトリを検索すると、反復可能な結果セットが得られます.....

すべてのレコードを画像リンクとして表示するビューを作成し、コントローラーで結果セットをそのビューにフェッチします....ビューに表示するようにそれらのレコードをバインドします...

System.IO.DirectoryInfo info = new System.IO.DirectoryInfo("your directory path");
               var filesinfo= info.GetFiles("*.jpg", System.IO.SearchOption.AllDirectories);
               var filenum= filesinfo.GetEnumerator();
               while (filenum.MoveNext())
               {
                   //populate some entity like in your case you have ImageUploadViewModel
               }

そして、Ajaxを使用して削除ロジックを実装するか、ポストバックを使用して、必要に応じて実装できます....

Asp.net MVC ビューこのチュートリアルに従うと、これを実行できます....

しかし、繰り返しますが、あなたが求めているのは、問題ではなく実装コードのようなものです....

于 2011-05-17T07:41:33.850 に答える
0

私が以前従ったアプローチは、ファイル情報をデータベース (または適切なもの) に永続化することです。パス、ファイル名、コンテンツタイプ、ファイルサイズなど。これにより、編集時の柔軟性が最も高くなります (代替テキスト、タイトル、説明、他のオブジェクトとの関係)。ファイルのダウンロード/表示は、パラメーターとしてイメージ ID を取得する ViewImage コントローラーを作成することにより、パス規則に基づいて処理できます。その後、パスからファイルへの URL を作成でき、コンテンツ タイプを設定するだけで済みます。その後、IIS が残りの処理を行います。

于 2011-10-06T19:17:16.403 に答える