Preview Image Before Uploading File

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 control befor

Solution 1:

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.

Solution 2:

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.

Solution 3:

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

Model:

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

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

View:

<div>
    @if (Model.ImageData == null)
    {
        <imgid="myImage"class="photo"src="@Url.Content("~/Content/images/no_photo.png")" />
    }
    else
    {
        <imgid="myImage"class="photo"src="@Url.Action("GetImage", "YourController", new { Model.ID })" />
    }
        <labelfor="myInput"class="custom-file-upload"></label><inputtype='file'id="myInput"name="image" /></div><script>//Preview & Update an image before it is uploadedfunctionreadURL(input) {
    if (input.files && input.files[0]) {
        var reader = newFileReader();

        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: 4px4px4px4px;

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

.photo{
    width: 7em; 
    height: 9em; 
    border: 1px solid rgb(197, 197, 197); 
    border-radius: 4px4px4px4px; 
    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
    {
        returnnull;
    }
}

[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 = newbyte[image.ContentLength];
                    image.InputStream.Read(participant.ImageData, 0, image.ContentLength);
                }

                repository.SaveStudent(student);
………

Solution 4:

<linkhref="css/css.css"rel="stylesheet"type="text/css"><SCRIPTlanguage=javascriptsrc="js/AutoChangePhoto.js"></SCRIPT><DIVclass=fpic><Aid=foclnkhref="http://www.sharejs.com"target=_blank><IMGid=focpicstyle="FILTER: RevealTrans ( duration = 1，transition=23 ); VISIBILITY: visible; POSITION: absolute"height=300alt=""src="images/01.jpg"width=400></A><DIVid=fttltxtstyle="MARGIN-TOP: 305px; FLOAT: left; WIDTH: 400px; TEXT-ALIGN: center"><Ahref="http://www.sharejs.com"target=_blank>梦：牧场小屋</A></DIV><DIVstyle="MARGIN-LEFT: 402px; WIDTH: 65px"><DIVclass=thubpiccurid=tmb0onmouseover=setfoc(0);onmouseout=playit();><Ahref="http://www.sharejs.com"target=_blank><IMGsrc="images/01.jpg"alt=""width=56height=42border="0"></A></DIV><DIVclass=thubpicid=tmb1onmouseover=setfoc(1);onmouseout=playit();><Ahref="http://www.sharejs.com"target=_blank><IMGheight=45alt=""src="images/02.jpg"width=56></A></DIV><DIVclass=thubpicid=tmb2onmouseover=setfoc(2);onmouseout=playit();><Ahref="http://www.sharejs.com"target=_blank><IMGheight=45alt=""src="images/03.jpg"width=56></A></DIV><DIVclass=thubpicid=tmb3onmouseover=setfoc(3);onmouseout=playit();><Ahref="http://www.sharejs.com"target=_blank><IMGheight=45alt=""src="images/04.jpg"width=56></A></DIV><DIVclass=thubpicid=tmb4onmouseover=setfoc(4);onmouseout=playit();><Ahref="http://www.sharejs.com"target=_blank><IMGheight=45alt=""src="images/05.jpg"width=56></A></DIV><DIVclass=thubpicid=tmb5onmouseover=setfoc(5);onmouseout=playit();><Ahref="http://www.sharejs.com"target=_blank><IMGheight=45alt=""src="images/06.jpg"width=56></A></DIV><SCRIPTlanguage=javascripttype=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`