Question

I am using Uploadify/asp.net mvc 3 to upload images. Is it possible to display the image before uploading it? if yes how?

my uploadcontrol:

<script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/swfobject.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.uploadify.v2.1.0.min.js")"></script>
<input type="file" name="fileInput1" id="fileInput1" />
<span id="result"></span><a href="javascript:$('#fileInput1').uploadifyUpload();">Upload
    File</a> <span id="showimage"></span>
<script type="text/javascript">
    $(document).ready(function () {

        $("#fileInput1").uploadify({
            uploader: '@Url.Content("~/Scripts/uploadify.swf")',
            script: '@Url.Action("Upload", "Home")',
            fileDataName: 'file',
            buttonText: 'File Input 1...',
            multi: false,
            sizeLimit: 1000000,
            simUploadLimit: 1,
            cancelImg: '@Url.Content("~/Scripts/cancel.png")',
            auto: false,
            onError: function (a, b, c, d) {
                if (d.status == 404)
                    alert("Could not find upload script. Use a path relative to: " + "<?= getcwd() ?>");
                else if (d.type === "HTTP") {
                    console.log("error " + d.type + ": " + d.status);
                    alert("error " + d.type + ": " + d.status);
                }
                else if (d.type === "File Size")
                    $("#result").html("file too big");
                //alert(c.name + " " + d.type + " Limit: " + Math.round(d.info / (1024 * 1024)) + "MB");
                else
                    alert("error " + d.type + ": " + d.text);
            },
            onComplete: function (event, queueID, fileObj, response, data) {
                $("#showimage").html("<img src=" + fileObj.filePath + "height='500' width='500'/><br />");
            }
        });


    });

</script>

controller:

   [HttpPost]
        public ActionResult Upload(HttpPostedFileBase file)
        {
            if (file != null && file.ContentLength > 0)
            {
                var appData = Server.MapPath("~/app_data");
                var filename = Path.Combine(appData, Path.GetFileName(file.FileName));
                file.SaveAs(filename);
            }



           // return Json(file);
           //return name;
           return Json(true);
        }

Answer 1

In addition to @rouen’s answer about client side limitations, you could use the HTML 5 File API to achieve this. This obviously restricts it only to modern browsers but it could be a compromise. It’s progressive enhancement: clients using modern browsers get immediate preview and feedback whereas clients using legacy browsers will have to upload the file first and see the preview afterwards (in addition to the message about upgrading their browsers of course which should be shown to all of them).