Geek Answers Handbook

Open Browser Dialog View Dialog Box

I was looking for this holy grail - good file dialogs in HTML. I came up with a solution that uses jQuery to click() (hidden) element of a file when a button is clicked. This works fine in FireFox 4, but Chrome and Opera fail. Changing click() to focus() worked in Chrome, but nothing works in Opera. I have not tested IE, but I do not want to punish life.

Here is the current code:

HTML

 <div class="formFile" id="profileImgContainer"> <input type="file" name="profileImg" id="profileImg"> <label>Profile Picture</label> <div> <input type="text" id="profileImgText"><input type="button" id="profileImgButton" value="Choose File"> </div> </div>

JQuery

 $(".formFile input[type='file']").live('change', function() { $(this).parents(".formFile").find("input[type='text']").val($(this).val()); }); $(".formFile input[type='button']").live('click', function() { $(this).parents(".formFile").find("input[type='file']").click(); }); $(".formFile input[type='text']").live('click', function() { $(this).parents(".formFile").find("input[type='file']").click(); });

Can anyone suggest a cross-browser way to open a file dialog using jQuery / JavaScript? I don't want to use a transparent elementary trick due to the need to have input interactions (CSS :hover ), etc.

+4
source share
2 answers

Try using trigger() :

 $(this).parents(".formFile").find("input[type='file']").trigger('click');
+3
source

It may be a few years later, but here is a way to do it without Javascript, as well as a cross browser.

 <label> Open file dialog <input type="file" style="display: none"> </label>

If you find problems, you may need to use the for attribute in the label indicating the input identifier.

+4
source

More articles:


All Articles