jquery не стреляет для события кнопки?

Question

У меня есть ситуация, когда я хочу отобразить графическую кнопку, чтобы пользователь мог щелкнуть, чтобы начать загрузку файла.

Я создал нормальный вход загрузки файла, как это:

<input style="display:none;" id="file" type="file" name="file">

Обратите внимание, что он настроен на дисплей: нет, так что я могу кнопка «наложение» графическая.

Затем я создал вход типа = "изображение" для кнопки реального изображения, на которую люди будут нажимать. По-видимому, он накладывается там, где будет скрытая кнопка загрузки файла.

<input id="uploadButton" type="image" src="images/choosefile-button.png" style="width:256px;height:57px;" />

Теперь я использую скрипт JQuery задокументированный в this video для обработки события щелчка и передать его на кнопку реальной, скрытый файл загрузки для выполнения диалога выбора файлов.

<script> 
    $(document).ready(function() { 
     var intervalFunc = function() {            
     $('#file').html($('#file').val()); 
     ); 
     $('#uploadButton').on('click', function() { 
     $('#file').click(); 
     setInterval(intervalFunc, 1); 
     return false; 
     }); 
    }); 
</script> 

Проблема заключается в том, что при нажатии на графическую кнопку диалог загрузки файлов не отображается. Все, что происходит, это то, что URL-адрес изменяется, добавляя параметры координат x/y, где был нажат клик на кнопке изображения. Я проверил, что jQuery связан в файле, и это так. Любая идея, будет ли то, что я пытаюсь сделать, даже сработает? Нужно ли мне адаптировать сценарий для определения правильного диапазона значений х/у для этой кнопки, а затем вызвать щелчок по основной, скрытой реальной кнопке?

Answer 1

Появляются для возврата ожидаемых результатов в stacksnippets, при удалении синтаксической ошибки на );, следующих за $('#file').html($('#file').val()) Примечание. Не знаете о цели включения setInterval? Также input элемент не имеет .innerHTML

$(document).ready(function() { 
 
     $("#uploadButton").on("click", function() { 
 
     $("#file").click(); 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<input id="uploadButton" type="image" src="http://lorempixel.com/50/50/technics" style="width:256px;height:57px;" /> 
 
<input style="display:none;" id="file" type="file" name="file">