Ok, here the sample.It may not work on all browsers, I just checked on chrome 22, it will not work with different domain (same origin policy)
HTML:
<div id="hello">You will be asked to submit a file</div>
<div id="temp">
<iframe>
</iframe>
</div>
<button id="SelectFile">Select File</button>
<div id="filedialog">
<form method="POST" action="/test.php" >
<input type="file">
</form>
</div>
CSS
#temp ,#filedialog{
display:none;
}
js:
var frame = $('#temp iframe');
var frameinit = function() {
frame.contents().find('body').children().remove();
frame.contents().find('body').append($('#filedialog').html());
frame.contents().find('input').change(function() {
frame.contents().find('form').submit();
});
};
frameinit();
$('#SelectFile').click(
function() {
frame.contents().find('input').click();
frame.load(function() {
//JSfiddle's error message from iframe
var data = frame.contents().find('.pageHeader');
$('body').append($('<div>').html(data));
frameinit();
});
});
please note that you can't trigger click on file dialog without real browser click.