Solved

jquery / Javascript - initiating file input to get around IE bug

Posted on 2014-02-04
4
546 Views
Last Modified: 2014-02-19
I have a file button (for uploading an image).
I want to use an image to fire the 'file' selection. I have crated an image in a <label> tag and used 'for' to enable the <label> (and therefor the image) to fire the 'file' dialogue.

<label for = "userfile" style = "cursor: hand;cursor: pointer;">
	<input style = "display:none;" name="userfile" id="userfile" type="file" />
	<img src="<%=v_image%>">
</label>

Open in new window


The example shows my test code (apologies for the inline styling).

However there is a bug in IE that stops this working when you put the code inside a <form> tag. So firing manually using javascript/Jquery would seem to be a solution.

From my research there seems to be limitation with some browsers stopping the programmatic firing of a 'file' input, as this is deemed a potential security risk.

Does anyone have a solution that will allow me to get round this and allow the firing of a 'file' input when an image is clicked that will be cross browser compatible?

Regards
0
Comment
Question by:splanton
4 Comments
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
Take a look at the many AJAX file uploaders.

They use an iframe to do exactly this.
0
 
LVL 2

Expert Comment

by:pierrejeanes
Comment Utility
How about something like this:
<input type="file" id="userfile" name="userfile" style="visibility: hidden; width: 1px; height: 1px" >
<a href="" onclick="document.getElementById('userfile').click(); return false"><img src="your-image"</a>
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
Something like this maybe
http://jsfiddle.net/GaryC123/tuJ27/3/

Fixed for FORM
http://jsfiddle.net/tuJ27/8/
0
 
LVL 2

Accepted Solution

by:
DualCool earned 500 total points
Comment Utility
how about something like this-

>> css

#upload_wrap {position:absolute; top:25px; left:25px; width:332px; height:30px; cursor:pointer;}
#file_input {position:absolute; top:10px; left:10px; width:0px; height:0px; overflow:hidden; z-index:0;}
#browse_btn {position:absolute; top:0px; left:0px; width:60px; height:30px; background-color:#CCC; border:thin solid #333; text-align:center; z-index:1;}
#sel_name {position:absolute; top:0px; left:62px; width:300px; height:14px; border:thin solid #333; padding:8px; z-index:1;}

>>html


<div id="upload_wrap" onClick="document.getElementById('fi').click();">
    <div id="file_input">
          <input id="fi" type="file" onChange="document.getElementById('sel_name').innerHTML = this.value;"/><input />
    </div>
    <div id="browse_btn">Browse</div>    
    <div id="sel_name"></div>
</div>


***just dump it into your upload form
** could use some work - i spent about 5 mins on it -
FYI should be 100% cross browser
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now