上传后的 AJAX 显示图像

Question

我使用 ajax 上传文件将近 3 个小时，并成功地使它工作，请检查代码：

查看

<div class="form-horizontal">
    <div class="form-group">
        @Html.Label("Choose Image(s)", new { @class = "control-label col-sm-3" })
        <div class="col-sm-5">
            <input type="file" name="UploadFile" id="UploadFile" accept=".png, .jpg, .gif" multiple />
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-5 col-sm-offset-3">
            <input type="button" value="Save" id="save" class="add btn btn-primary" />
            <div style="color:red">
                @ViewBag.error
            </div>
        </div>
    </div>
</div>
<div style="margin-top: 17px;">

    @foreach (var item in Model.Content)
    {
        <div class="gallery">
            <a href="@item.ImagePath" title="@item.Description" data-gallery>
                <img src="@item.ThumbPath" alt="@item.Description" class="img-rounded" style="margin-bottom:7px;" />
            </a>
            <input type="button" class="delete btn btn-danger" value="Delete" data-picid="@item.PhotoId" />

        </div>
    }
    </div>

控制器

[HttpPost]
public ActionResult Create(Photo photo)
{
    var model = new Photo();
    foreach (string file in Request.Files)
    {
        var fileContent = Request.Files[file];
        if (fileContent.ContentLength == 0) continue;
        model.Description = photo.Description;
        var fileName = Guid.NewGuid().ToString();
        var extension = System.IO.Path.GetExtension(fileContent.FileName).ToLower();

        using (var img = System.Drawing.Image.FromStream(fileContent.InputStream))
        {
            model.ThumbPath = String.Format(@"/GalleryImages/thumbs/{0}{1}", fileName, extension);
            model.ImagePath = String.Format(@"/GalleryImages/{0}{1}", fileName, extension);

            // Save thumbnail size image, 100 x 100
            SaveToFolder(img, fileName, extension, new Size(200, 200), model.ThumbPath);

            // Save large size image, 800 x 800
            SaveToFolder(img, fileName, extension, new Size(600, 600), model.ImagePath);
        }

        // Save record to database
        model.CreatedOn = DateTime.Now;
        db.Photos.Add(model);
        db.SaveChanges();
    }

     return Json("File Uploaded Successfully");
}

JQuery/AJAX

<script type="text/javascript">
    $('#UploadFile').on('change', function (e) {
        var $this = $(this);
        var files = e.target.files;
        if (files.length > 0) {
            if (window.FormData !== undefined) {
                var data = new FormData();
                for (var x = 0; x < files.length; x++) {
                    data.append("file" + x, files[x]);
                }
                $.ajax({
                    type: "POST",
                    url: '/Home/Create',
                    contentType: false,
                    processData: false,
                    data: data,
                    success: function (result) {
                        console.log(result);
                        //add code to refresh the gallery with the new uploaded image
                    },
                    error: function (xhr, status, p3, p4) {
                        var err = "Error " + " " + status + " " + p3 + " p4;
                        if (xhr.responseText && xhr.responseText[0] == "{")
                            err = JSON.parse(xhr.responseText).Message;
                        console.log(err);
                    }
                });
            } else {
                alert("Error! This browser does not support file upload, please change your browser");
            }
        }
    });
</script>

保存到文件夹

private void SaveToFolder(Image img, string fileName, string extension, Size newSize, string pathToSave)
{
    // Get new image resolution
    Size imgSize = NewImageSize(img.Size, newSize);
    using (System.Drawing.Image newImg = new Bitmap(img, imgSize.Width, imgSize.Height))
    {
        newImg.Save(Server.MapPath(pathToSave), img.RawFormat);
    }
}

新图像尺寸

public Size NewImageSize(Size imageSize, Size newSize)
{
    Size finalSize;
    double tempval;
    if (imageSize.Height > newSize.Height || imageSize.Width > newSize.Width)
    {
        if (imageSize.Height > imageSize.Width)
            tempval = newSize.Height / (imageSize.Height * 1.0);
        else
            tempval = newSize.Width / (imageSize.Width * 1.0);

        finalSize = new Size((int)(tempval * imageSize.Width), (int)(tempval * imageSize.Height));
    }
    else
        finalSize = imageSize; // image is already small size

    return finalSize;
}

但问题是我必须刷新浏览器才能看到添加的图像，我应该在成功上传的 ajax 中放入什么来动态添加图像而不刷新浏览器？

Answer 1

由于您可以选择上传多张图片，我建议您采用以下方法：

您的控制器现在看起来像：

[HttpPost]
public ActionResult Create(Photo photo)
{
    List<Photo> model = new List<Photo>();
    //create list of photo model
    foreach (string file in Request.Files)
    {
        var fileContent = Request.Files[file];
        if (fileContent.ContentLength == 0) continue;
        var fileName = Guid.NewGuid().ToString();
        var extension = System.IO.Path.GetExtension(fileContent.FileName).ToLower();
        string thumpath,imagepath = "";
        using (var img = System.Drawing.Image.FromStream(fileContent.InputStream))
        {
              model.Add(new Photo(){
                  Description=photo.Description,
                  ThumbPath = String.Format(@"/GalleryImages/thumbs/{0}{1}", fileName, extension),
                  ImagePath = String.Format(@"/GalleryImages/{0}{1}", fileName, extension),
                  CreatedOn=DateTime.Now
              });
              //fill each detail of model here
              thumpath = String.Format(@"/GalleryImages/thumbs/{0}{1}", fileName, extension);
              //separate variables to send it to SaveToFolder Method
              imagepath = String.Format(@"/GalleryImages/{0}{1}", fileName, extension);
              SaveToFolder(img, fileName, extension, new Size(200, 200), thumpath);

              SaveToFolder(img, fileName, extension, new Size(600, 600), imagepath);
         }
    }
    foreach(var md in model)
    {
        //loop again for each content in model
        db.Photos.Add(md);
        db.SaveChanges();
    }
    return Json(new {model=model },JsonRequestBehavior.AllowGet);
    //return the model here
}

在ajax success中，您可以使用模型返回值创建图像，如下所示：

success: function (result) {
     var model = result.model;
     $(model).each(function (key,value) {
           $('<img />').attr({
                 src: value.ThumbPath
           }).appendTo("body");
           //note you can append it to anywhere, like inside container or something
     })
}

Answer 2

我会在你的成功函数中设置 img 标签 usign jQuery 的 src 属性：

  success: function (result) {
       $("img").attr('src' , '/path/to/your/img');
  },

如果您不知道客户端图像的公共路径，您可以使用响应对象：

 return Json("{ path : "+model.ImagePath+"."+fileName+"."+extension+"}");

Answer 3

有几种可能性，使用哪种取决于图片大小等。 我个人（如果图像不是太大）会在服务器端将图像转换为 base64 并使用 ajax 返回并显示从服务器返回的数据，当然它也需要转换。

看看这篇文章，我想我会帮助你:)

Base64 encoded image