allow image preview before upload

Ginkgo · 28-09-2010 01:33PM #1

Has anyone tried this? It's a requirement for a web app. (asp.net 3.5). Is javascript my best/only option? I won't be happy with an IE specific solution. Any ideas?

plenderj · 28-09-2010 03:00PM

I think you'll need to use an ActiveX control (or a Java applet? or silverlight?), and the user would probably get a security warning, to be allowed to load a file directly off the drive

Ginkgo · 30-09-2010 08:07AM

I found this solution that works in Internet explorer (tested in IE 8). I haven't found a solution that works for all browsers which is what I would obviously prefer. I had to add site to trusted sites list for this to work.

http://forums.asp.net/p/1437099/3249950.aspx

Any other ideas are welcome.

Tillotson · 03-10-2010 01:17AM

HTML5 has a ondrop event.

   function urlDropped(url) {
        var img = document.createElement('img');
        img.onload = function(e) {
                document.body.appendChild(this);
        }
        img.src = url;
    }

    function drop(tgt, e) {
        var dt = e.dataTransfer;
        var file = dt.files[0];
        var reader = new FileReader();
        reader.onload = function(e) {
            urlDropped(e.target.result);
        };
    }
...
<body ondrop="drop(this, event)" ondragover="return false">

Cross browser? All I can say is that it works for me in Chrome

allow image preview before upload

Comments