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

154

У меня есть простая форма загрузки файла. Как сделать так, чтобы он автоматически отправлялся после выбора файла? Я не хочу, чтобы пользователь нажимал кнопку «Отправить».

javascript html

— ram1
источник

9

Что если пользователь выберет не тот файл? ИМО, вы должны оставить это пользователю, чтобы выбрать, когда отправлять.

— Тайлер Кромптон

2

@ Tyler Большинство людей выберут правильный файл, и я пытаюсь уменьшить трения UX. Для тех людей, которые выбрали неправильный файл, после его загрузки они могут удалить его.

— ram1

3

«большинство людей» принимают умные решения, но большинство людей нет.

— Фикс

2

Я согласен с @TylerCrompton, пользователи будут совершать самые глупые ошибки и обвинять вас в этом, вы можете добавить отмену после отправки.

— Росс Кедди

3

лучший ответ - самый простой ответ stackoverflow.com/a/25893747/1536309

— Блэр Андерсон

194

Вы можете просто вызвать submitметод вашей формы в onchangeслучае ввода файла.

document.getElementById("file").onchange = function() {
    document.getElementById("form").submit();
};

http://jsfiddle.net/cwvc4/73/

— Алекс Турпин
источник

4

Это работает в Safari, где решение jQuery, похоже, не работает. Странный?

— Генрирайт

2

@ Генрирайт: Да. В jQuery Submit()вызов вызывает submitсобытие jQuery , но не запускает базовую форму submit(). Конечно, вы можете использовать, $('form')[0].submit()чтобы поразить элемент DOM с помощью jQuery

— Gone Coding

68

Просто укажите file-input для автоматической отправки формы при любом изменении:

<form action="http://example.com">
    <input type="file" onchange="form.submit()" />
</form>

Развернуть фрагмент

Это решение работает так:

onchangeзаставляет элемент input выполнять следующий скрипт всякий раз, когда valueизменяется
form ссылается на форму, что этот элемент ввода является частью
submit() заставляет форму отправлять все данные на URL, как указано в action

Преимущества этого решения:

Работает без idс. Это облегчает жизнь, если у вас есть несколько форм на одной HTML-странице.
Собственный javascript, не требуется jQuery или аналогичный.
Код находится внутри html-тегов. Если вы проверите HTML, вы сразу увидите его поведение.

— slartidan
источник

48

Используя jQuery:

$('#file').change(function() {
  $('#target').submit();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="target" action="destination.html">
  <input type="file" id="file" value="Go" />
</form>

Развернуть фрагмент

— Samich
источник

также, тот же вопрос был о stackoverflow: stackoverflow.com/questions/4704154/…

— Самич

Этот подход работает в Safari? Я не уверен. Я тестировал Chrome, IE и FF, которые все работают.

— Генрирайт

@ErdalG: рабочая версия jQuery добавлена ниже. Это позволяет избежать этой проблемы.

— Ушел кодирование

31

JavaScript с onchangeсобытием:

<form action="upload.php" method="post" enctype="multipart/form-data">
     <input type="file" name="filename" onchange="javascript:this.form.submit();">
</form>

Развернуть фрагмент

JQuery .change()и .submit():

$('#fileInput').change(function() {
  $('#myForm').submit();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<form action="upload.php" id="myForm">
     <input type="file" id="fileInput">
</form>

Развернуть фрагмент

— Alex.K.
источник

добавьте комментарий, если вы проголосуете, чтобы уточнить, что не так или что следует улучшить.

— Алекс.К.

9

Самое короткое решение

<input type="file" name="file" onchange="javascript:document.getElementById('form').submit();" />

— xboz
источник

2

Как насчетonchange="this.form.submit()"

— Викки

1

Как насчет onchange="form.submit()"? :)

— slartidan

5

<form id="thisForm" enctype='multipart/form-data'>    
  <input type="file" name="file" id="file">
</form>

<script>
$(document).on('ready', function(){
  $('#file').on('change', function(){
    $('#thisForm').submit();
  });
});
</script>

— Дурба Барал
источник

4

Если вы уже используете JQuery просто:

<input type="file" onChange="$(this).closest('form').submit()"/>

— Sojtin
источник

4

Это мое решение для загрузки изображений, когда пользователь выбрал файл.

HTML часть:

<form enctype="multipart/form-data" id="img_form" method="post">
    <input id="img_input" type="file" name="image" accept="image/*">
</form>

JavaScript:

document.getElementById('img_input').onchange = function () {
upload();
};
function upload() {
    var upload = document.getElementById('img_input');
    var image = upload.files[0];
    $.ajax({
      url:"/foo/bar/uploadPic",
      type: "POST",
      data: new FormData($('#img_form')[0]),
      contentType:false,
      cache: false,
      processData:false,
      success:function (msg) {}
      });
};

— сиги
источник

2

Попробуйте приведенный ниже код с помощью jquery:

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>

<script>
$(document).ready(function(){
    $('#myForm').on('change', "input#MyFile", function (e) {
        e.preventDefault();
        $("#myForm").submit();
    });
});
</script>
<body>
    <div id="content">
        <form id="myForm" action="action.php" method="POST" enctype="multipart/form-data">
            <input type="file" id="MyFile" value="Upload" />
        </form>
    </div>
</body>
</html>

— Разиб Аль Мамун
источник

+1, потому что это единственный метод, который я обнаружил, который позволил мне перехватить событие отправки с помощью jquery. Кажется, что другие методы обходят событие submit, поэтому я не могу проверять форму или отправлять с Ajax при их использовании. Спасибо

— user1404617

1

Для тех, кто использует .NET WebForms, отправка полной страницы может быть нежелательной. Вместо этого используйте ту же onchangeидею, чтобы javascript нажимал на скрытую кнопку (например, <asp: Button ...), и скрытая кнопка может взять на себя все остальное. Убедитесь, что вы делаете display: none;на кнопке, а не Visible="false".

— peroija
источник

1

HTML

<form id="xtarget" action="upload.php">
<input type="file" id="xfilename">
</form>

JAVASCRIPT PURE

<script type="text/javascript">
window.onload = function() {
    document.getElementById("xfilename").onchange = function() {
        document.getElementById("xtarget").submit();
    }
};
</script>

— KingRider
источник

1

<form action="http://example.com">
    <input type="file" onchange="Submit()" />
</form>

 <script>
     // it will submit form 0 or you have to select particular form
     document.getElementsByTagName("form")[0].submit();       
 </script>

— Анант Дабхи
источник

0

Вы можете поместить этот код, чтобы ваш код работал с одной строкой кода

<input type="file" onchange="javascript:this.form.submit()">

Это позволит загрузить файл на сервер без нажатия кнопки «Отправить».

— Амит Кумар
источник