Блог

Главная - Вопросы по программированию - удалить ввод, выбрать предварительный просмотр изображения с помощью jQuery

удалить ввод, выбрать предварительный просмотр изображения с помощью jQuery

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

Я добавляю предварительный просмотр / удаление изображения перед загрузкой с помощью jquery следующим образом :

HTML здесь:

 <input type='file' id='input1'>
<img id='imagepreview1' src="http://placehold.it/100x100" />

JS здесь:

 function readURL(input) {
    if (input.files amp;amp; input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#imagepreview1').prop('src', e.target.result).show().addClass('selected');
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$("#input1").change(function () {
    readURL(this);
    $('#imagepreview1').show();
});

var orig_src = $('#imagepreview1').prop('src');

$('#imagepreview1').click(function () {
    $('#input1').replaceWith($('#input1').clone(true));
    $('#imagepreview1').not('.selected').hide();
    $('#imagepreview1.selected').prop('src', orig_src).removeClass('selected');
});

Теперь, когда я удаляю изображение щелчком мыши, это изображение, выбранное для ввода, не удаляет и не публикует данные из моей формы. кто может удалить выбор ввода, когда я удаляю изображение?

Проблемный рисунок (когда я удаляю изображение и показываю предварительный просмотр):

введите описание изображения здесь

ПРИМЕЧАНИЕ: (У меня проверка в FF не сработала)

ДЕМО ЗДЕСЬ: http://jsfiddle.net/mkGSY /

Ответ №1:

Просто удалите значение из input поля.

 $('#input1').val('');

Здесь обновлена ДЕМОНСТРАЦИЯ.

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

1. @WoIIe Я очень хочу узнать ваше решение

2. @Hiral: Вот так 🙂

3. @WoIIe: 1- кто твои люди -1 for using jquery ? 2- пожалуйста, добавьте демо здесь

4. @Hiral Стиль кодирования OP оооочень плох. Это сделано типичным любителем jquery-скриптов, который понятия не имеет, как кодировать хорошие веб-приложения с использованием javascript. Чрезвычайно медленный и не структурированный. (Мое мнение)

5. @user3142680 Почему я должен добавлять демо? Просто попробуйте сами?! Это всего лишь 1 строка кода, и ее не очень сложно реализовать.

Ответ №2:

Используйте собственный javascript

Если все будут просто использовать jQuery для таких простых задач, никто не узнает, как на самом деле работает браузерная реализация ECMAScript.

Вы можете легко использовать что-то вроде этого:

 document.getElementById('input1').reset(); // My favourite

или, если вы предпочитаете идею сброса значения входного элемента:

 document.getElementById('input1').value = ""; // Will work just in major browsers
document.getElementById('input1').value = null; // Much more cross-browser compatible

Если вы хотите придерживаться jQuery

… сделайте себе одолжение и используйте этот подход, который является чрезвычайно пуленепробиваемым (вместо использования .val('') :

 var input = $("#input1");

function clearFileUpload() {
  input.replaceWith(input.val('').clone(true));
};