Geek Answers Handbook

Bizarre IE crashes while simulating input = file click using jQuery

I created this jQuery + html piece to do the following:
 There is a placeholder image that the user can click, which opens a file selection dialog box. After selecting the file, the corresponding multi-part form is uploaded to the server. I am trying to simulate AJAX behavior to load this file, so I also use an invisible iframe to get the server response.
Let me introduce the code first, so it would be easier to explain the problem.

jQuery("#myInput").change(function () {  // Submit form upon file selection
   // alert("myInput.val() = " + $('#myInput').val());  // alert 1
    $('#form1').submit();
   // alert("myInput.val() = " + $('#myInput').val());  // alert 2
});

<form id="form1" action="/do_upload.php" method="post" enctype="multipart/form-data" target="target_frame">
<input id="myInput" type="file" name="userfile" /><br>
</form>
<img src="/img/placeholder.png" onclick="$('#myInput').click();" >

<iframe id="target_frame" name="target_frame" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>

Chrome/FF/Safari. (, , ": hidden" "myInput". , -, ). IE 9 10 : , "alert 1", "alert 2", , , "myInput" .
, ! , IE, :)

+4
2

, IE. , .

IE .

: IE [type = "file" ] submit

0

. : https://coderwall.com/p/uer3ow. HTML CSS, :

.file_loader {
    position: relative;
    overflow: hidden;
    border: solid gray 1px;
    margin: auto;
    width: 300px;
    height: 400px;  
}

.file_loader .hidden_file {
    display: block;
    background: white;
    font-size: 80px;
    height: 100%;
    width: 100%;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
}

.placeholder {
    height: 100%;
    width: 100%;
}

<div class="file_loader">
    <img src="/img/placeholder.png" id="placeholder1" class="placeholder" >
    <form id="form1" action="/do_upload.php" method="post" enctype="multipart/form-data" target="target_frame">
    <input id="myInput" class="hidden_file" type="file" name="userfile" /><br>
    </form>
</div>

, "file_loader" - . CSS , , . . , IE, , "" , . , IE , ( ). , Chrome/Firefox/Safari , .

0

More articles:


All Articles