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

Question

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

Answer 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();" />

Answer 2

Вы можете проверить расширение файла на стороне клиента и затем решить, следует ли инициировать отправку для формы следующим образом (стиль 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 (), когда тип ввода "file". Например, Firefox 4 возвращает имя файла, но если я правильно помню, IE вернет полный путь к файлу (C: \ Docs \ Img \ etc), и, кроме того, он может быть отключен в некоторых браузерах по соображениям безопасности.

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

Answer 3

вы можете использовать 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";
}

еще не проверен ... пока:)