jQuery插件断开只是因为我删除了'.css（{display：'none'}）'

Question

I'm using a jquery plugin which replaces the file input of a form with a div, so when you click the div the file browser pops up. When you select a file the form gets submitted automatically and the results go into a hidden iframe. The idea behind all this is that you can just have an image saying 'click to upload' and with one click a file browser appears and when you select the file it uploads behind the scenes.

Anyway, I know that there's problems happening in my php when the file submits, but because the results get loaded into a hidden iframe I can't see what the errors are!

So obviously remove the hidden style from the iframe, but the problem is the plugin adds the display:hidden in the javascript of the plugin. It does:

var iframe = $(
        '<iframe '+
            'id="iframe'+id+'" '+
            'name="iframe'+id+'"'+
        '></iframe>'
    ).css({
        display: 'none'
    });

However, if I remove the:

.css({
        display: 'none'
    });

bit, then the whole thing seems to break in that clicking on the image with 'click to upload' no longer brings the file browser up.

The plugin javascript isn't long but probably too long to post in here but you can look at it here: http://liquidlizard.net/jquery.ocupload.js if anyone can help me out it'd be great!

How come removing just that css() function stops the whole thing from working? Is there another way to see the contents of the hidden iframe?

EDIT Here's a jsfiddle as suggested in the comments. http://jsfiddle.net/VF6Qb/ In the javascript starting at line 35 if you remove the .css({display:'none'}); then clicking the div will no longer open the file browser dialog box

Answer 1

When you're removing the display:none; , the <iframe> is somehow overlapping the file input and the clicked div so it won't trigger the file browser. You can test this fiddle where I've swapped the iframe's and submit-form's DOM positions, and voila - it works.

However, for just inspecting the error document in the iframe you would not make the iframe visible, but just inspect its source code (and HTTP headers) in FireBug's net panel .