FineUploader ломается после обновления HTML

Question

Я пытаюсь выполнить функцию FineUploader. У меня есть DIV, который содержит кнопку загрузки и элемент изображения.

Когда изображение загружено, я визуализирую новый DIV на стороне сервера, а затем замените старый DIV на новый. Новый DIV содержит новый URL-адрес изображения в элементе изображения, и, таким образом, пользователь видит изображение, обновленное на странице.

Проблема в том, что сразу после замены старого DIV на новый, FineUploader ломается. Кнопка «Загрузить» больше не открывает диалог FineUploader. Я проверял, что это на самом деле происходит, комментируя код, который заменяет старый DIV на новый, а затем просто обновляет страницу вручную. Теперь кнопки загрузки снова работают правильно, открыв диалог загрузки файлов. Поэтому кажется, что FineUploader не любит замену старой кнопки новой кнопкой при замене DIV, хотя html идентичен.

Есть ли способ «переустановить» FineUploader на новую кнопку? Как мне это сделать?

Спасибо.

Answer 1

Знаменитый загрузчик вставляется в скрытую «<input type="file">» в видимой кнопке загрузки (это, по-видимому, <div> в вашем случае). Даже если вы заменили этот контейнер/кнопку на новый, содержащий еще один скрытый <input type="file">, все обработчики данных и событий, которые Fine Uploader привязаны к исходному вводу файла, теперь исчезли, поэтому Fine Uploader не знает, когда выбран новый файл, и он не может отслеживать эту кнопку среди других входных файлов на странице, на которые она также может отвечать за управление.

Если вы хотите добавить новые кнопки, у вас есть два варианта:

1. объявить эти кнопки с помощью the extraButtons option при создании экземпляра Fine Uploader. Вы можете отображать/скрывать эти дополнительные кнопки или перемещать их по странице, как вам нравится.
2. Создайте свою собственную кнопку ввода файла, присоедините прослушиватель событий изменений, а затем добавьте все файлы, выбранные в этом обработчике событий, в Fine Uploader с помощью the addFiles API method.

В вашем конкретном случае, вместо того, чтобы заменить весь набор элементов, считает просто с помощью JavaScript, чтобы обновить атрибут src из <img> элемента с новым URL с вашего сервера. Вы можете легко получить эту информацию в Fine Uploader onComplete callback handler, если ваш сервер вернет новый URL-адрес в ответе на загрузку. Или вы можете просто сделать запрос ajax на ваш сервер в любое время и использовать URL-адрес в ответе, чтобы заменить src на <img>.