Question

I am uploading image using JQuery AjaxUpload and tried to update image control with that uploaded image but code is not working even not able to set ViewState. I want to know why it is happening. Below is code:

**Javascript:**<br>
<script type="text/javascript">    /*<![CDATA[*/<br>
        $(document).ready(function() {<br>
            /* Example 1 */<br>
            var button = $('#button1'), interval;<br>
            new AjaxUpload(button, {<br>
                action: 'fileupload.aspx',<br>
                name: 'myfile',<br>
                onSubmit: function(file, ext) {<br>
                    // change button text, when user selects file<br>
                    button.text('Uploading');<br>
                    // If you want to allow uploading only 1 file at time,<br>
                    // you can disable upload button<br>
                    // this.disable();<br>
                    // Uploding -> Uploading. -> Uploading...<br>
                    interval = window.setInterval(function() {<br>
                        var text = button.text();<br>
                        if (text.length < 13) {<br>
                            button.text(text + '.');<br>
                        } else {<br>
                            button.text('Uploading');<br>
                        }<br>
                    }, 200);<br>
                },<br>
                onComplete: function(file, response) {<br>
                    button.text('Upload');<br>
                    window.clearInterval(interval);<br>
                    // enable upload button<br>
                    this.enable();<br>
                    // add file to the list<br>
                    $('<li></li>').appendTo('#example1 .files').text(file);<br>
//                    document.getElementById('img').src = 'C:\\Documents and <br>Settings\\Kavita\\My Documents\\Visual Studio 2008\\WebSites\\WebSite2\\ajaxUpload\\' + file;<br>
//                    alert(document.getElementById('img').src);<br>
                }<br>
            });<br>
        });   /*]]>*/</script><br><br>

fileupload.aspx.cs Code

    HttpPostedFile hpfFile = Request.Files["myfile"];
    if (hpfFile != null)
    {
       hpfFile.SaveAs(Server.MapPath("~/ajaxUpload/" + hpfFile.FileName));
       img.Src = Server.MapPath("~/ajaxUpload/" + hpfFile.FileName);
    }<br>

Please let me know why “img.Src” not updating ?

Answer 1

The img.Src is updating on server side, but when you make an Ajax call, it is not sent back to the client side.

If you want to display the image, it must be done in the onComplete jQuery function, as this code will be executed on client side, when the image has been completely uploaded.

I also noted an error on the server method : you use Server.MapPath to set the image source, this is wrong because it will send you server’s path to the image (ie “C:\inetpub…”), you should only set the value as :

img.Src = "~/ajaxUpload/" + hpfFile.FileName;