上传后显示多个图像 [英] Showing multiple Images after uploading

问题描述

大家好，



我可以将图片存储在文件系统中，并将图像名称存储在数据库中，如下所示：Image1.JPG。但是现在我想在上传后显示图片。



我有这个查看：

Hi everyone,

I can store pictures in the file system and store the images names in the database, like this: Image1.JPG. But now I want to display the pictures after uploading.

I have this for view:

    <div id="tabs-3">


       @using (Html.BeginForm("UploadMorePhotos", "Account", FormMethod.Post, new { enctype = "multipart/form-data" }))
       {
           @Html.AntiForgeryToken()


        <div class="form-field">
            <p>Select pictures:</p>
            <div class="upload-container">
                <div class="upload">
                    <input type="file" name="files" value="" multiple="multiple" id="file1" />

                    <img src="@Url.Content("~/images/deleteButton.png")" alt="Remove picture." />
                </div>
            </div>
        </div>

        <div class="form-field">
            <input type="submit" value="Upload" />
        </div>

<br />

  foreach (var item in Model.LolaBikePhotos )
   {

       @*@Html.DisplayFor(modelItem => item.ImagePath)*@
       Html.Image("~/App_Data/uploads", item.ImagePath, new { width = 200, height = 150 });

    <img width="200" height="150" src="@Url.Action("UploadMorePhotos", "Account", new { UserProfileID = Model.Id })">


   }



       }
    </div>

Jquery：

The Jquery:

<pre lang="Javascript">
  var currentImage = 1;
            $("body").on("change", "input[name='files']", function () {
                var pathToRemoveIcon = "@Url.Content("~/Images/deleteButton.png")";
                currentImage = currentImage + 1;
                var htmlToAppend = '<div class="upload"><input type="file" name="files" id="file' + currentImage + '" /><img src="' + pathToRemoveIcon + '" alt="Remove picture." /></div>';
                $('.upload-container').append(htmlToAppend);
            }).on("click", ".upload img", function () {
                if ($(this).parent().siblings().length > 0) {
                    $(this).parent().remove();
                }
            });

和行动方式：

and the action method:

[HttpPost]
public ActionResult UploadMorePhotos(UserProfile user, IEnumerable<HttpPostedFileBase> files)
{
    foreach (var file in files)
    {
        if (file.ContentLength > 0)
        {
            var fileName = Path.GetFileName(file.FileName);
            var path = Path.Combine(Server.MapPath("~/Images/profile" + @"\" + fileName.Replace('+', '_')));
            file.SaveAs(path);

            if (ModelState.IsValid)
            {
                string username = User.Identity.Name;
                // Get the userprofile
                user = db.userProfiles.FirstOrDefault(u => u.UserName.Equals(username));

                // Update fields
                user.Image = new byte[file.ContentLength];
                file.InputStream.Read(user.Image, 0, file.ContentLength);
                user.ImageMimeType = file.ContentType;

                db.Entry(user).State = EntityState.Modified;

                if (user != null)
                {
                    var lolaphoto = new LolaBikePhoto
                    {
                        UserProfileID = user.Id
                    };

                    db.lolabikerPhotos.Add(lolaphoto);
                    lolaphoto.ImagePath = fileName;
                }
            }

            db.SaveChanges();


        }


    }

    return Redirect(Url.Action("Edit", "Account") + "#tabs-3");
}

所以一切顺利，图像存储在图表路径中：LolabikePhoto和图像保存在文件夹中：图像/配置文件。但是，当然必须展示图像。我这样试试：

So everything goes allright, the images are stored as imagespath in the tabel: LolabikePhoto and the Images are saved in the folder: Images/Profile. But ofcourse the images have to be shown. I try it like this:

foreach (var item in Model.LolaBikePhotos )

但图像坏了。



谢谢



啊，我找到了解决方案，它必须是这样的：

But the images are broken.

Thank you

ahh, I found the solution, it has to be like this:

<img src="~/Images/profile/@item.ImagePath" alt="" height=150 width=200 />

推荐答案

（ body）。on（ change， input [name ='files']， function （）{
var pathToRemoveIcon = @ Url.Content（〜/ Images / deleteButton.png ）;
currentImage = currentImage + 1 ;
var htmlToAppend = ' < div class =upload>< input type =filename =filesid =file + currentImage + ' />< img src =' + pathToRemoveIcon + ' alt =删除图片。/>< / div>';

("body").on("change", "input[name='files']", function () { var pathToRemoveIcon = "@Url.Content("~/Images/deleteButton.png")"; currentImage = currentImage + 1; var htmlToAppend = '<div class="upload"><input type="file" name="files" id="file' + currentImage + '" /><img src="' + pathToRemoveIcon + '" alt="Remove picture." /></div>';

（' .upload-container' ）追加（htmlToAppend）。
}）。on（ 点击， 。upload img， function （）{
if （

('.upload-container').append(htmlToAppend); }).on("click", ".upload img", function () { if (

（ this ）。parent（）。siblings（）。长度> 0 ）{

(this).parent().siblings().length > 0) {

这篇关于上传后显示多个图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！