Як автоматично надіслати форму для завантаження, коли вибрано файл?

154

У мене проста форма для завантаження файлів. Як змусити його автоматично надсилатись, коли файл вибрано? Я не хочу, щоб користувач повинен був натискати кнопку "Надіслати".

javascript html

— таран1
джерело

9

Що робити, якщо користувач вибере неправильний файл? IMO, ви повинні залишити його користувачеві, щоб вибрати, коли надсилати.

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

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, здається, не працює. Дивно?

— henrywright

2

@henrywright: Так. У 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змушує елемент введення виконувати наступний скрипт, коли valueзмінити
form посилається на форму, до складу якої входить цей вхідний елемент
submit() змушує форму надсилати всі дані до URL, як зазначено в action

Переваги цього рішення:

Працює без idс. Це полегшує життя, якщо у вас є кілька форм на одній html-сторінці.
Рідний javascript, не потрібен jQuery чи подібне.
Код знаходиться всередині html-тегів. Якщо ви оглянете html, ви побачите, що це поведінка відразу.

— шлартидан
джерело

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>

Розгорніть фрагмент

— Самич
джерело

Крім того , той же самий питання на StackOverflow: stackoverflow.com/questions/4704154 / ...

— Samich

Чи працює такий підхід у Safari? Я не впевнений. Я протестував Chrome, IE та FF, які працюють у всіх.

— henrywright

@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()"

— vikkee

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

— Сойтін
джерело

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. Інші методи, здається, обходять подію подання, тому я не можу робити перевірки форми або надсилати з Ajax при їх використанні. Дякую

— користувач1404617

1

Для тих, хто використовує .NET WebForms повну сторінку, можливо, не потрібно. Натомість використовуйте ту саму onchangeідею, щоб javascript натиснув на приховану кнопку (наприклад, <asp: Button ...), а прихована кнопка може зайняти решту. Переконайтеся, що ви робите display: none;на кнопці, а ні Visible="false".

— пероїя
джерело

1

HTML

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

JAVASCRIPT ЧИСТО

<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()">

Це завантажить файл на сервер, не натискаючи на кнопку подання

— Аміт Кумар
джерело