Web browsers are great for rapid application development.  Using PHP, HMTL5, and any number of new technologies widely used and documented online you are able to quickly prototype applications.  However one area of development where it gets tricky is when you are trying to load local files into your HTML pages.  Maybe you are creating a web application that needs to load locally stored images, videos, or sound files because of bandwidth constraints or file storage restrictions.

I recently faced this issue where my application needed to load images into a simple Javascript/CSS image viewer.  The image were stored locally on the user computer (via a USB drive or other local storage) because of the shear number and size of the files.  However new security restrictions in web browsers block local file access by default.  To get around this I used a new version of Firefox portable with HTML5 enabled so I could configure the browser and then distribute it to my users with custom settings and plugins.  The next step was to install the NoScript plugin and checked the ‘Options/Advanced/Trusted/Allow local links’ option which gets around the issue of allowing locally stored files to load into the web browser pages.  NOTE: if you are doing this for a web application you might want to configure NoScript to disallow access to other sites other than your web application for security reasons.

I was then able to view locally stored images in my web browser application referencing the files like so:

<img class="someClass" src="file:///H:/localImageStorageDir/image_342.jpg"/>