Отправка формы без кнопки submit

239

05 марта 2018, 01:58

Добрый день, возникла такая проблема. Я хочу при выборе файла (input type="file") Чтобы форма сабмитилась. Я хочу сделать закачку файла на сервер без перезагрузки, поэтому юзаю Аякс. Скажите пожалуйста, уже все перепробовал, много методов и ничего не выходит. Если я пользуюсь кнопкой - все гуд, а мне надо чтобы все работало без самой кнопки submit.

P.S. код еще сырой

Спасибо за помощь.

<!DOCTYPE html>
<html>
<head>
    <link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="/css/style.css" />
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css" />
    <meta charset="utf-8"/>
    <title>Upload your file!</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script>
        $(document).ready(
            function(){
                var form = $('#myForm');

                form.on('submit',function(){
                    var formData = new FormData();
                    if(($('#file')[0].files).length != 0){
                        console.log(1);
                    }
                    $.ajax({
                        type:"POST",
                        url:"ajax.php",
                        data:formData,
                        cache:false,
                        contentType:false,
                        processData:false,
                        success:function(data){
                            console.log(data);
                        }
                    });
                    return false;
                });
            });


    </script>
</head>
<body>
<div id="wrapper">
    <div class="row header bg">
        <div class="col-md-12">
            <p class="text-center">Добро пожаловать</p>
        </div>
    </div>
    <div class="row uploader">
        <div class="col-md-12">
            <div class="uploader_form">
                <form method="POST" id ="myForm" enctype="multipart/form-data">
                    <input type="file" name="file" id="file" multiple="multiple">
                </form>
            </div>
            <div class="upload_text">
                Перетащите файл сюда ;)<br>
                или нажмите на кнопку
            </div>
            <div id="status"></div>
        </div>
    </div>
    <div class="row footer bg">
        <div class="col-md-12">
            <p class="text-center">(c) Copyrights 2018</p>
        </div>
    </div>
</div>
</body>
</html>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

Подробнее о сайте site-vizitka-kiev.org.ua

ТОП-10

Все популярные вопросы

Спарсить данные с сайта js, vuejs

Здравствуйте друзья, только начал изучение js, не могу понять как извлечь данные отсюда https://swapico/api/people/ Это нужно сделать с помощью обычного...

183

javascript