Currently, I am utilizing a jquery plugin that replaces the file input of a form with a div. This allows for the file browser to pop up when the div is clicked. Upon selecting a file, the form is automatically submitted and the results are loaded into a hidden iframe. The concept is to have a simple image with the text 'click to upload' that, with one click, activates the file browser and uploads the file without any visible interface changes.
However, I am encountering issues in my PHP code when the file is submitted. Due to the results being displayed in a hidden iframe, I am unable to identify the errors.
To resolve this, I attempted to remove the hidden style from the iframe. The only obstacle is that the plugin itself adds the display: 'hidden' property in its JavaScript code as follows:
var iframe = $(
'<iframe '+
'id="iframe'+id+'" '+
'name="iframe'+id+'"'+
'></iframe>'
).css({
display: 'none'
});
When I tried removing the .css({ display: 'none' }); part, the functionality of clicking on the image to open the file browser ceased to work.
The JavaScript code of the plugin is available at: . Any assistance in resolving this issue would be greatly appreciated!
Why does removing the css() function disrupt the entire process? Is there an alternative method to view the contents of the hidden iframe?
UPDATE: As suggested in the comments, here is a jsfiddle link: http://jsfiddle.net/VF6Qb/. In the JavaScript code starting at line 35, removing the .css({ display: 'none' }); causes the file browser dialog box not to open when clicking on the div.