Preview Image before uploading file

Question

I have got one problem by uploading file. I created an aspx file in asp.net then I added a fileupload control and image control. I want to show preview image in image contro

Answer 1

You can't, for security reasons the full path of the file isn't made available to your script (if it were, you'd have to perform transformations on it to use it as a URL).

On some modern browsers, you could use the new File API to actually read the image data and show it on the page. I've previously written another answer here on SO shows how to do that (in that case, so we can find the image dimensions).

But other than that, you have to assume the user has a means of seeing what image they've chosen, aside from your web page.

Answer 2

You can also use Modal PopUp AJAX Control Toolkit This is an example on fileupload control. With few tweaks you can modify it to suit your need.

Answer 3

If you use MVC, you might try this approach below. It also use button for uploading image:

Model:

[Display(Name = "Photo")]
public byte[] ImageData { get; set; }

[HiddenInput(DisplayValue = false)]
public string ImageMimeType { get; set; }

View:

<div>
    @if (Model.ImageData == null)
    {
        <img id="myImage" class="photo" src="@Url.Content("~/Content/images/no_photo.png")" />
    }
    else
    {
        <img id="myImage" class="photo" src="@Url.Action("GetImage", "YourController", new { Model.ID })" />
    }
        <label for="myInput" class="custom-file-upload"></label>
        <input type='file' id="myInput" name="image" />
</div>

<script>
    //Preview & Update an image before it is uploaded
    function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#myImage').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
        }
    }
    $("#myInput").change(function () {
        readURL(this);
    });
</script>

Css:

/*For photo/image upload operations */
input[type="file"] {
    display: none;
}

.custom-file-upload {
    border: 1px solid rgb(197, 197, 197);
    border-radius: 4px 4px 4px 4px;

    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
    float: right;
    width: 5.25em;
    margin-left:200px;
}

.photo{
    width: 7em; 
    height: 9em; 
    border: 1px solid rgb(197, 197, 197); 
    border-radius: 4px 4px 4px 4px; 
    float:right;
}

   <br/>

Controller:

public FileContentResult GetImage(int id)
{
    var dataContext = repository.Participants.FirstOrDefault(p => p.ID == id);
    if (dataContext != null)
    {
        return File(dataContext.ImageData, dataContext.ImageMimeType);
    }
    else
    {
        return null;
    }
}

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit([Bind(Exclude = null)] Student student, HttpPostedFileBase image)
{
    try
    {
        if (ModelState.IsValid)
            {                    
                if (image != null)
                {
                    student.ImageMimeType = image.ContentType;
                    student.ImageData = new byte[image.ContentLength];
                    image.InputStream.Read(participant.ImageData, 0, image.ContentLength);
                }

                repository.SaveStudent(student);
………

Answer 4

    <link href="css/css.css" rel="stylesheet" type="text/css">
<SCRIPT language=javascript src="js/AutoChangePhoto.js"></SCRIPT>
<DIV class=fpic>
<A id=foclnk href="http://www.sharejs.com" target=_blank><IMG id=focpic style="FILTER: RevealTrans ( duration = 1，transition=23 ); VISIBILITY: visible; POSITION: absolute" height=300 alt="" src="images/01.jpg" width=400></A> 
<DIV id=fttltxt 
style="MARGIN-TOP: 305px; FLOAT: left; WIDTH: 400px; TEXT-ALIGN: center"><A 
href="http://www.sharejs.com" target=_blank>梦：牧场小屋</A></DIV>
<DIV style="MARGIN-LEFT: 402px; WIDTH: 65px">
<DIV class=thubpiccur id=tmb0 onmouseover=setfoc(0); onmouseout=playit();><A 
href="http://www.sharejs.com" target=_blank><IMG 
src="images/01.jpg" alt="" width=56 height=42 border="0"></A></DIV>
<DIV class=thubpic id=tmb1 onmouseover=setfoc(1); onmouseout=playit();><A 
href="http://www.sharejs.com" target=_blank><IMG height=45 alt=""
src="images/02.jpg" width=56></A></DIV>
<DIV class=thubpic id=tmb2 onmouseover=setfoc(2); onmouseout=playit();><A 
href="http://www.sharejs.com" target=_blank><IMG height=45 alt=""
src="images/03.jpg" width=56></A></DIV>
<DIV class=thubpic id=tmb3 onmouseover=setfoc(3); onmouseout=playit();><A 
href="http://www.sharejs.com" target=_blank><IMG height=45 alt=""
src="images/04.jpg" width=56></A></DIV>
<DIV class=thubpic id=tmb4 onmouseover=setfoc(4); onmouseout=playit();><A 
href="http://www.sharejs.com" target=_blank><IMG height=45 alt=""
src="images/05.jpg" width=56></A></DIV>
<DIV class=thubpic id=tmb5 onmouseover=setfoc(5); onmouseout=playit();><A 
href="http://www.sharejs.com" target=_blank><IMG height=45 alt=""
src="images/06.jpg" width=56></A></DIV>
<SCRIPT language=javascript type=text/javascript>
var picarry = {};
var lnkarry = {};
var ttlarry = {};
picarry[0] = "images/01.jpg";
lnkarry[0]  = "http://www.sharejs.com";
ttlarry[0] = "梦：牧场小屋";
picarry[1] = "images/02.jpg";
lnkarry[1]  = "http://www.sharejs.com";
ttlarry[1] = "碎玉：回眸";
picarry[2] = "images/03.jpg";
lnkarry[2]  = "http://www.sharejs.com";
ttlarry[2] = "飞狐：豆花档";
picarry[3] = "images/04.jpg";
lnkarry[3]  = "http://www.sharejs.com";
ttlarry[3] = "牛说不哭：烈日下的建筑工人";
picarry[4] = "images/05.jpg";
lnkarry[4]  = "http://www.sharejs.com";
ttlarry[4] = "新疆瓦格：哈萨克族搭建毡房";
picarry[5] = "images/06.jpg";
lnkarry[5]  = "http://www.sharejs.com";
ttlarry[5] = "松间明月：汽车文化";
</SCRIPT>
</DIV></DIV>`enter code here`