Блог

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

Как я могу отправить форму сразу после того, как пользователь выберет картинку?

#php #jquery #forms #cgi

#php #jquery #формы #cgi

Вопрос:

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

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

1. Как пользователь загружает картинку? Обычно они должны отправить форму, чтобы загрузить картинку в первую очередь…

2. Не могли бы вы быть немного более подробными, пожалуйста. Вы будете использовать JavaScript для проверки картинки или PHP?

3. используя <input type="file" name="uploadfile" id="file" />

4. С php вы не можете проверить файл, пока он не будет загружен. Вы можете загрузить ее асинхронно в <iframe> , а затем отправить обратно javascript, чтобы делать все, что пожелаете

5. как я могу «отправить обратно javascript»? (С точки зрения кода)

Ответ №1:

Попробуйте это:

 <script>
    function submitFormAfterImageCheck()
    {
        if(/(.jpeg|.jpg|.gif|.png|.tiff)$/.test(document.getElementById("myFile").value))
        {
            document.getElementById("myForm").submit();
        }
        else
        {
            alert("you can only upload an image");
        }
    }
</script>

И HTML:

 <input id="myFile" type="file" onchange="submitFormAfterImageCheck();" />

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

1. Я добавил код javascript в головную часть документа и добавил следующий код: <form id="uploadpic" method=post name=upform action="/cgi-bin/upload.cgi" enctype="multipart/form-data"> <input type="file" onchange="submitFormAfterImageCheck();" /> </form> но он не будет отправлен

2. Какой URL-адрес? Я мог бы написать это именно так, как нужно для вас 🙂

3. упс! Мне не хватало ) в конце if()

4. потрясающе, что сработало, за исключением того, что теперь, независимо от того, что я загружаю, я получаю предупреждение «вы можете загрузить только изображение». Я пробовал .png, .tif и т.д.

5. вы можете проверить, работает ли эта функция function submitFormAfterImageCheck() {alert(this.value==''?"not working":"working");}

Ответ №2:

вы можете использовать Iframe для обработки загрузки

 <iframe src="upload.php" id="uploadHandler"></iframe>

и javascript для обработки статуса загрузки / получения

 var form = document.getElementById("avatar_form");
var inpUpload = document.getElementById("upload_button");
var fileSelector = document.getElementById("file_browser");
var uploadHandler = document.getElementById('uploadHandler');

inpUpload.onclick = function() {

    form.target = uploadHandler;
    uploadHandler.onload = function() {
        alert(uploadHandler.document.body.innerHTML);
    }
}

и в файле php upload.php : проверьте массив $ _FILES, все ли в порядке с загруженным файлом, и повторите некоторый ответ, например:

 $allowed_extensions = array("jpg", "png", "gif");
if (in_array(end(explode(".", $_FILES['file_browser']['filename'])), $allowed_extensions)) {
    echo "upload OK";
}
else {
    echo "invalid file";
}

не тестировалось… пока 🙂

Ответ №3:

Вы могли бы проверить расширение файла на стороне клиента, а затем решить, запускать ли отправку для формы следующим образом (стиль jQuery):

 <script>
    $(function(){
        $('#fileDivId').change(function(){
            $this = $(this);
                if ($.inArray($this.val().split('.').pop().toLowerCase(), ['jpg', 'jpeg', 'png', 'gif']) != -1) {
                    $this.parent().trigger('submit');
                }
        });
    });
</script>
    <form action="post.php" method="POST">
        <input type="file" id="fileDivId">
    </form>

Но здесь есть несколько слабых мест:

1) Вам все равно придется очистить ваши изображения на стороне сервера

2) Не совсем уверен, как работает $ (‘inputId’).val(), когда тип ввода — «файл». Например, firefox 4 возвращает имя файла, но, если я правильно помню, IE вернет полный путь к файлу (C:DocsImgetc ), и, кроме того, это может быть отключено в некоторых браузерах по соображениям безопасности.

3) Получение части расширения в моем коде не идеально — ситуация с концом: пользователь выбирает файл C:Doc.imgfile_no_ext возвращает «img file_no_ext»