通过Javascript进行Html文件上传预览

Question

I want to show a PREVIEW kind of thing for an post , so took details by JS

but problem comes when it comes to <input type="file" , it's not giving full path to the file

Ex: if I do

$("#image").val();

it only give "Sunset.jpg" not C:\\Documents and Settings\\All Users....\\Sunset.jpg

any idea how to get that detail value?

Answer 1

Although, as others have already pointed out, you cannot learn the full path to the file in JavaScript, perhaps a completely different approach to the problem might still work for you.

You could upload the photo automatically as soon as the visitor has picked it (the behavior you see in GMail, among other applications), so it's residing on your server even as the visitor continues interacting with your page. At that point, showing a preview is as simple as serving one yourself from your own (now server-side) copy of the image.

Answer 2

This if for security reasons, so you cannot read files from the users system using JavaScript.

If you happen find a workaround, there will probably be security patches released by browser vendors sooner rather than later. I know because in earlier versions if IE, it was possible to read the full path and hence display a preview, at least if the file was an image. I used that in a CMS UI, but of course that nifty feature was ruined by an IE service release :-/

In general the file upload control is somewhat of a "black box" for security reasons. You have only very limited access to scripting and styling it. This is so you can't snoop or upload files without the user knowing, or so you cannot trick the user into uploading files with a deceptive interface.

Answer 3

This is now possible as of Firefox 3.6 https://developer.mozilla.org/en/DOM/FileList

Though the code they show does not seem to work in Chrome, so I'm guessing even the HTML5 JavaScript API for things like this has yet to be standardized.

Answer 4

This is a security feature. You cannot change or get the entire path in secure browsers, so what you want to do, cannot be done. If you use something like Flash, Silverlight or Java, then it should be relatively easy.

Answer 5

As far as I know, there is no way to do what you want to do in javascript. Its a pretty big security issue - having filesystem access in a browser.

There are a few browser plugins (java/flash/gears) that may allow you to do this sort of thing. I know with gears you can get the user to select a file - and open it to read the content using JS.