Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Preview image using Fileupload asp.net mvc and Jquery

I am trying to preview an image that the user is trying to upload. This is the code i am using.This is working fine in all major browsers, but i am wondering if there is a better way to achieve this without using session(even though i am clearing the session ) ? I don't want to use Flash.

   @using (Html.BeginForm("UploadImage", "Home", FormMethod.Post, new { id = "fileuploadform", @enctype = "multipart/form-data" }))
    {
        <input id="fileupload" type="file" onchange="ChangeImage()" name="files" multiple>
        <div id="preview">
            <img src="#" id="imgThumbnail" alt="preview" />
        </div>

    }
            <script>
            $(function ChangeImage() {
                $('#fileuploadform').fileupload({
                    done: function (e, data) {
                        var d = new Date();
                        $('#imgThumbnail')[0].src = "/Home/ImageLoad?a=" + d.getTime();
                    }
                });
            });
        </script>

[HttpPost]
public ActionResult UploadImage(IEnumerable<HttpPostedFileBase> files, PostViewModel model)
{

    Session["ContentLength"] = Request.Files[0].ContentLength;
    Session["ContentType"] = Request.Files[0].ContentType;
    byte[] b = new byte[Request.Files[0].ContentLength];
    Request.Files[0].InputStream.Read(b, 0, Request.Files[0].ContentLength);
    Session["ContentStream"] = b;
    return Content(Request.Files[0].ContentType + ";" + Request.Files[0].ContentLength);
}

   public ActionResult ImageLoad(int? id)
    {
        byte[] b = (byte[])Session["ContentStream"];
        int length = (int)Session["ContentLength"];
        string type = (string)Session["ContentType"];
        Session["ContentLength"] = null;
        Session["ContentType"] = null;
        Session["ContentStream"] = null;
        return File(b, type);
    }
like image 971
user636525 Avatar asked Dec 13 '25 20:12

user636525


2 Answers

Have you tried this solution?

Preview an image before it is uploaded

This solution is purely client side, and does not needed to be uploaded to your server before preview. :)

like image 92
Victor Soto Avatar answered Dec 16 '25 13:12

Victor Soto


You could improve your action's code in this way:

HttpPostedFileBase picFile = Request.Files["fileUpload"];
if (picFile != null && picFile.ContentLength > 0)
{
     byte[] pic = new byte[picFile.ContentLength];
     picFile.InputStream.Read(pic, 0, picFile.ContentLength);
     // you can use pic ....
}
like image 33
Ayoub Avatar answered Dec 16 '25 13:12

Ayoub



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!