pushing a 'select file' button in a form in an iframe (with jquery)

I use the jquery iframe plugin to squirt HTML into my iframe. Amongst other things, it contains:

<form id="update" action="dummy" method="POST" enctype="multipart/form-data">
     <div><input type="file" name="data" id="update_data"></div>
</form>

Then I run the following function. Watching the fun in the Chrome debugger, I can see that I am successfully latching onto the frame, form, and input field. But the picker does not pop up, and the form does not submit to the (JAX-RS) service.

function update_file(file) {
    var iframe = $('开发者_StackOverflow社区#new_file_iframe');
    var delform = iframe.contents().find("#update");
    var fileinput = iframe.contents().find("#update_data");
    // URLencoding?
    delform.attr("action", "/rex-ws/service/jape/update-file/" + file);
    fileinput.click();
    delform.submit();
}

Perhaps click is not the right thing to set it off?

This is a security issue. Browsers are notoriously stingy with what may be done to a file upload programmatically.

I'm pretty sure running fileinput.click() is out of the question for this reason.

Flash-based uploaders like Uploadify and SWFUpload have more liberties here. I think it is possible to open the file picker programmatically with them. However, using one of these uploaders would require some work.

I've done this in an project, I'll tell you it's a bit tricky.

What you basically have (Well at least the why I did) to do is:

• Have a input[file] in your main page
• On your upload action (ie an click event on the main page) create and iframe with a form and duplicate your input[file] and attach it to your newly created iframe form
• Submit the form in the iframe with ajaxSubmit (jQuery plugin)

If you would like I could add the code here (but it's about 120 rows).

..fredrik

Edit:

If you are designing a HTML5 site, have a look at the new input file API. https://developer.mozilla.org/en/using_files_from_web_applications