分享程序员开发的那些事...
更新时间：2023-11-29 19:38:46
Older browsers used to allow unrestricted access to the full path, so it's not impossible, but due to security concerns, your best answer will be a workaround.
If you're working locally, one option is that you can run your page as an HTML Application. Sadly this uses Internet Explorer as the engine. But if you can get away with an HTA, this does what you want:
<!--test.hta-->
<HTML>
<HEAD>
<HTA:APPLICATION ID="testFile" BORDER="thick" BORDERSTYLE="complex"/>
<TITLE>HTA - Test file</TITLE>
</HEAD>
<BODY>
<input type="file" onchange="alert(this.value)">
</BODY>
</HTML>
Trusted Site
A much better option, is simply to use Internet Explorer and then add your page to Internet Explorer's trusted sites. Then your solution is as simply as:
<input type="file" id="fileUpload" onchange="alert(this.value)">
Here's how to add a site to your trusted sites:
Custom Security Level
You can also enable this behavior globally for Internet Explorer:
I tried it in my browser and it seems to be a non-existent property. I cannot find any documentation anywhere regarding how to take advantage of this property. But it's a property to keep an eye out for in case it ever becomes useful.
this.files[0] to refer to the File object. Properties include "name" and "lastModifiedDate", "size", and "type" as mentioned here:
https://developer.mozilla.org/en-US/docs/Web/API/File
In HTML5 you can actually work with blobs and create an object url from the selected file and show a preview. This can be done with URL.createObjectURL(...) then creating an image and settings its src to the resulting temporary url. See this fiddle.(credit goes to this post)
Finally, you might greatly enjoy: