Проблема с браузером и обработкой событий при загрузке изображений

#jquery #google-chrome #browser

#jquery #google-chrome #браузер

Вопрос:

Этот скрипт загрузки изображений не работает в Google Chrome, но хорошо работает в Firefox и Internet Explorer. Пожалуйста, кто-нибудь может помочь?

 $("a#picUpload").bind('click', function() {
    $(":input[type=file]").click();
});
  

Во-вторых, после выбора изображения и нажатия кнопки «Открыть» в диалоговом окне «Открыть» я хочу, чтобы загрузка изображения начиналась автоматически после выгрузки открытого диалогового окна, но я не могу понять, как это сделать. Загрузка выполняется ajax. Есть предложения? Спасибо.

Ответ №1:

Я думаю, что первую проблему можно решить, введя пробел после ‘a’ перед ‘#’. Я предполагаю, что ‘picUpload’ — это идентификатор элемента привязки. В этом случае вам вообще не нужно использовать «a». Просто используйте ‘#picUpload’ для привязки события щелчка к элементу. Я предпочитаю второй метод, при котором вы используете только #id для получения объекта jQuery этого элемента.

 $("#picUpload").bind('click', function() {
    $(":input[type=file]").click();
});
  

Я также предлагаю вам проверить вашу форму на наличие любого другого элемента, имеющего тот же идентификатор, что и элемент ‘picUpload’. В этом случае все может пойти не так.

Чтобы начать автоматическую загрузку файла после выбора файла, используйте событие ‘change’ элемента input:file.

 $('#fileUpload').change(function() {
    alert('changed');
    //call your ajax function for uploading file
});
  

Чтобы приведенный выше сценарий работал, форма должна быть такой, как указано ниже

 <form>
   <a id='picUpload' href='#'>Upload picture</a>
    <input id='fileUpload' type="file"/>
</form>
  

Скрипка здесь: http://jsfiddle.net/deepumohanp/vvVWt /

Комментарии:

1. Спасибо за ваше время, вторая часть работает хорошо, но часть открытого диалога непоследовательна, иногда она работает в Chrome с двоеточием перед вводом [type=file] .

2. Я проверил оба в ссылке jsfiddle, указанной в ответе, используя chrome, и у обоих не было проблем. Не могли бы вы указать свои элементы формы? Могу я спросить, какую версию Chrome вы используете? Я проверю это один раз для вас.