PDA

View Full Version : how to preview image before upload?



dolittle
18 May 2007, 4:13 AM
Hi,

Is it possible to preview an image before upload with javascript?
I`m asking if it`s possible to access local files using javascript.
I think it could be done with previous versions of IE.
http://javascript.internet.com/forms/image-upload-preview.html
This link doesn`t work with IE7.

I know that you could do it with java applet, can you do it with FLASH?

Thanks

Darklight
18 May 2007, 4:24 AM
i'm guessing you just need to set src of an img element to the supplied local file location. unless browser security doesn't allow this *shrug*

rad_nq
18 May 2007, 5:09 AM
Nope.. Browser security does not seem to allow it.

Neither FF, or IE 7 would render a file:///.... reference.
Just like you cannot pre-populate a <input type="file"> field with a value, or drag and drop a file into a file input field without ActiveX/FF plugin.

It *really* is quite vexing. We have ended up just performing the upload and you can see what it looks like afterwards.

18 May 2007, 6:13 AM
Nope.. Browser security does not seem to allow it.

Neither FF, or IE 7 would render a file:///.... reference.
Just like you cannot pre-populate a <input type="file"> field with a value, or drag and drop a file into a file input field without ActiveX/FF plugin.

It *really* is quite vexing. We have ended up just performing the upload and you can see what it looks like afterwards.

Correct: Here is some js that tests it:
http://weblogs.macromedia.com/cantrell/archives/2004/06/how_to_implemen.cfm


Also, gotta say that i tested an ecommerce app that shows a 'preview' but it actually uploads the file then shows it to you. :-\

dolittle
18 May 2007, 10:12 AM
Thank you all.

I guess it can`t be done.

GalaxySong
20 May 2007, 6:46 PM
you can use a CSS filter "AlphaImageLoader" to access local image file, but I don't know if you can get the original size of an image by this.


<STYLE type=text/css>#newPreview {
FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)
}
</STYLE> If you are interested, see
http://blog.csdn.net/jinning13/archive/2007/05/17/1613641.aspx
Its a Chinese web page but I bet you can understand it.

As to Firefox, I tried many ways, including using iframe (modifying not its src but its html content) and even form (submitting to and thus opening the local image as though it is a page), to work around, but only to find how high the security of Firefox is. If you can ask your users to modify the config of their Firefox, you can make preview work. However, I don't think this is acceptable in most cases. So, I gave up.

dolittle
21 May 2007, 8:06 AM
Works like a charm.

I will be more then happy to have a way to preview a picture in FF as well.

Thanks.

fabiojpoli
14 Apr 2011, 6:51 AM
Pré-visualizar imagem antes do upload (http://www.extjs.com.br/forum/index.php?topic=4861.0)