This simple method can easily be overlooked. It assumes the user can use the keyboard.
You can use a textbox input element to allow the user to load any image into your page, local or remote.
At it simplest:
Code:
<!DOCTYPE html>
<html>
<head>
<title>
Load Specified Local/Remote Image InputBox
</title>
</head>
<body>
<h1>Load Specified Image (Local or remote) via Input TextBox</h1>
<h3>Allow the user to load any image from their local machine or the web</h3>
Path To Image: <input id="userin" value="albums.png" /> <button onclick="loadimage()">load img</button>
<ul>
<li>Path can be in a local folder: imgs/somePic.gif</li>
<li>In a local subfolder: ../images/sortedImgs/somePic.png</li>
<li>Or located at a remote URL: http://stockvector.net/wp-content/uploads/2011/08/School-Icons.jpg</li>
</ul>
<h3>The Image Loads Below.</h3>
<img id="userimg" src="" />
<script type="text/javascript">
function loadimage(){
var img = document.getElementById("userimg");
img.src = document.getElementById("userin").value;
}
//add code to work with image as desired.
</script>
</body>
</html>
Extending the argument types that loadimage can accept and wrapping the function into an object.
Added simple event trapping for the image loaded and error states to show how easy it is to know if an image loads or not.
Code:
<!DOCTYPE html>
<html>
<head>
<title>
Load Specified Local/Remote Image InputBox
</title>
</head>
<body>
<h1>Load Specified Image (Local or remote) via Input TextBox</h1>
<h3>Allow the user to load any image from their local machine or the web</h3>
Path To Image: <input id="userin" value="albums.png" /> <button id="btn1">load img</button>
<ul>
<li>Path can be in a local folder: imgs/somePic.gif</li>
<li>In a local subfolder: ../images/sortedImgs/somePic.png</li>
<li>Or located at a remote URL: http://stockvector.net/wp-content/uploads/2011/08/School-Icons.jpg</li>
</ul>
<h3>The Image Loads Below.</h3>
<img id="userimg" src="" />
<script type="text/javascript">
//Rename A as desired
var A=(function(){
//accepts any combination of object/string.
function loadimage(tbox,img){
var tb=-1,im=-1;
switch(typeof(tbox)){
case("object"): tb = tbox;break;
case("string"): tb = document.getElementById(tbox);
}
switch(typeof(img)){
case("object"): im = img;break;
case("string"): im = document.getElementById(img);
}
if(im && tb)
im.src = tb.value;
}
return {load:function(tbox,img){loadimage(tbox,img)}}
})();
//One use
document.getElementById("btn1").onclick=function(){
A.load( "userin", "userimg" );
}
//image loading
document.getElementById("userimg").onload=function(){
//do something after image is succesfully loaded
alert("loading process complete");
}
document.getElementById("userimg").onerror=function(){
//do something when image does not load
alert("Img did not load");
}
</script>
</body>
</html>
Same code idea, but now image load success/fail code is also wrapped into the object
Code:
<!DOCTYPE html>
<html>
<head>
<title>
Load Specified Local/Remote Image InputBox
</title>
</head>
<body>
<h1>Load Specified Image (Local or remote) via Input TextBox</h1>
<h3>Allow the user to load any image from their local machine or the web</h3>
Path To Image: <input id="userin" value="albums.png" /> <button id="btn1">load img</button>
<ul>
<li>Path can be in a local folder: imgs/somePic.gif</li>
<li>In a local subfolder: ../images/sortedImgs/somePic.png</li>
<li>Or located at a remote URL: http://stockvector.net/wp-content/uploads/2011/08/School-Icons.jpg</li>
</ul>
<h3>The Image Loads Below.</h3>
<img id="userimg" src="" />
<script type="text/javascript">
//Rename A as desired
var A=(function(){
//accepts any combination of object/string.
function loadimage(tbox,img, fncgood, fncbad){
var tb=-1,im=-1;
switch(typeof(tbox)){
case("object"): tb = tbox;break;
case("string"): tb = document.getElementById(tbox);
}
switch(typeof(img)){
case("object"): im = img;break;
case("string"): im = document.getElementById(img);
}
if(im && tb){
if(typeof(fncgood)=="function") //fncgood executes on succesful load
im.onload=fncgood;
if(typeof(fncbad)=="function") //fncbad executes on failed load
im.onerror=fncbad;
im.src = tb.value;
}
}
return {load:function(tbox,img,fncgood,fncbad){loadimage(tbox,img, fncgood, fncbad)}}
})();
//One use
document.getElementById("btn1").onclick=function(){
A.load(
"userin",
document.getElementById("userimg"),
function(){
//do something after image is succesfully loaded
alert("loading process complete");
},
function(){
//do something when image does not load
alert("Img did not load");
}
)
}
</script>
</body>
</html>
Note: The style of event trapping used is cross browser, but destructive. It will destroy any previous load events the button and load/error events the image elements may have contained.
This code works in all major browsers.
Before you post, read our: 
