jQuery загрузка изображений с динамической загрузкой

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

Вот текущий макет страницы, без фактической кнопки загрузки. При нажатии на изображение, мы покажем окна загрузки на ПК пользователей:
Введите описание изображения здесь

Это код выделенной области в поле HTML

<div class="uploader">
    <form method="POST" id="upload_image">
        <img src="/img/upload.png" id="imageUpload" alt="upload" />
    </form>
</div>

Поэтому, как только форма отправляет, используя Ajax-запрос, когда он возвращается и успешен, я планирую сохранить имя изображения (обычно текущее time()как имя файла) в качестве переменной сеанса, теперь мне нужно показать Loading...изображение, пока происходит процесс загрузки, а затем заменить imageUploadего новым изображением, расположенным в /img/thumbs/NEWIMAGENAMEHERE.png.

Время Вопроса
Существует ли функция jQuery, которую можно использовать для замены изображения на изображение загрузки, а затем загруженного изображения после завершения загрузки? Есть ли библиотека jquery уже для загрузки одного изображения? все библиотеки I have found work for multiple images and since we only support one image on this store layout, we don’t want multiple image upload.

Спасибо

1 ответ

  1. Благодаря предложению от @aron9forever я решил, вместо того, чтобы загрузить изображение сразу на него, я бы просто отобразить изображение, а затем загрузить на форму отправить. Это создает раздражающую проблему, что, когда они отправляют форму, если есть проблема, что им нужно повторно нажать загрузить изображение, но у меня может быть способ обойти это, используя переменные $_POST.

    <div class="uploader">
        <img id="imagetoUpload" src="/com/img/upload.png" alt="upload">
    </div>
    <input type="file" id="productImage" style="display:none;" name="img" value="">
    

    Использование этого jQuery

    $(function() {
        function readURL(input) {
            if(input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $('#imagetoUpload').attr('src', e.target.result);
                }
                reader.readAsDataURL(input.files[0]);
            }
        };
        $("#productImage").change(function(){
            readURL(this);
        });
        $("#imagetoUpload").click(function() {
            $("input[id='productImage']").click();
        });
    });