Блог

Главная - Вопросы по программированию - Показывать изображение при отправке формы?

Показывать изображение при отправке формы?

#javascript

#javascript

Вопрос:

Используя Javascript, я хотел бы показать рабочее / загружаемое изображение, как только пользователь нажимает «Отправить» в моей форме. Форма используется для загрузки видео, поэтому загрузка файла может занять некоторое время. После завершения загрузки файла страница перезагружается, поэтому загружаемое изображение больше не должно быть видно.

Кто-нибудь может мне помочь с этим, пожалуйста?

 <form method="POST" enctype="multipart/form-data" action=""> 
<input type="hidden" name="MAX_FILE_SIZE" value="5120000" /> 
<input type="hidden" name="upload" value="yes"> 

First Name: <input type="text" name="firstname"><br> 

Email: <input type="text" name="email"><br> 

Email Confirmation: <input type="text" name="email2"><br> 

Video Title: <input type="text" name="title"><br> 

Video Description: <input type="text" name="description"><br> 

Video to upload: <input type="file" name="uploadedfile"><br> 

Terms: <input type="checkbox" name="terms"> Must be checked to accept our terms of service.<br><br> 

<input type="submit" value="Upload Video"> 

</form>

Ответ №1:

Использование jquery: вы можете использовать как следовать в document.ready

 $("form").submit(function() { //you can assign id to your form and used that id instead of form
$("#iamgeid").show();
return true;
});

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

1. Я изменил его на $(document).ready(function() { $("form").submit(function() { //you can assign id to your form and used that id instead of form $("#imageid").show(); return true; }); }); , и теперь оно работает

Ответ №2:

Обычно мы не можем отобразить загружаемое изображение после отправки формы, потому что, когда мы отправляем форму изначально, она отправляет запрос на сервер, и загрузка происходит только из-за ответа сервера после загрузки. загружаемое изображение не будет анимироваться во время загрузки сервера.

Чтобы показать загружаемое изображение, нам нужно проделать несколько трюков.
1. Мы не должны отправлять форму в том же окне, вместо этого мы должны опубликовать форму в iframe. это можно сделать, добавив атрибут target в тег формы.

<идентификатор div=»форма-контейнер»>
<форма … действие =»uploadfilepath» цель=»iframe_name»>
………………….
………………….
</form>
</div>
<имя iframe=»iframe-name» onsubmit=»showimage()» style=»ширина: 1px; высота: 1px; видимость: скрытая;»></iframe>

2. Мы должны добавить скрипт для отображения изображения при загрузке сервера внутри iframe.

<img src=»путь загрузки изображения» id=»image-container»>
<скрипт>
функция showimage() {
document.getElementById(‘form-container’).style.display=’none’;
document.getElementById(‘image-container’).style.display=’block’;
}
</script>

3. Также добавьте скрипт после загрузки файла.

…………………………………
………………………………… код для
загрузки вашего файла
находится здесь
…………………………………
…………………………………
в конце выведите скрипт для перезагрузки родительского окна или вызовите функцию в родительском окне.

Ответ №3:

Лучшим подходом был бы вызов AJAX для выполнения всего этого.

Поместите изображение с помощью display: none в нужное место, а затем выполните эту небольшую операцию:

 var d = document;
var demoInterval;
$("form").submit(function() {
    $("img").show();
    demoInterval = setInterval(intervalFunc, 1000);
});
function intervalFunc()
{
    if(d.ready) // finished uploading video
    {
        window.clearInterval(demoInterval);
        $("img").hide();
    }
}