Làm cách nào để tự động gửi biểu mẫu tải lên khi tệp được chọn?

154

Tôi có một hình thức tải lên tập tin đơn giản. Làm cách nào để tôi tự động gửi nó khi tệp đã được chọn? Tôi không muốn người dùng phải nhấp vào nút Gửi.

javascript html

— ram1
nguồn

9

Nếu người dùng chọn tập tin sai thì sao? IMO, bạn nên để nó cho người dùng chọn khi nào nên gửi.

— Tyler Crompton

2

@Tyler Hầu hết mọi người sẽ chọn đúng tệp và tôi đang cố gắng giảm ma sát UX. Đối với những người chọn tệp sai, sau khi tệp được tải lên, họ có thể chọn xóa tệp.

— ram1

3

"Hầu hết mọi người" đưa ra quyết định thông minh, nhưng hầu hết mọi người thì không.

— Phix

2

Tôi đồng ý với @TylerCrompton, người dùng sẽ phạm phải những sai lầm ngớ ngẩn nhất và đổ lỗi cho bạn vì điều đó, bạn có thể thêm hoàn tác sau khi gửi.

— Ross Keddy

3

câu trả lời tốt nhất là câu trả lời đơn giản nhất stackoverflow.com/a/25893747/1536309

— Blair Anderson

194

Bạn chỉ có thể gọi submitphương thức của biểu mẫu trong trường onchangehợp nhập tệp của bạn.

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

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

— Alex Turpin
nguồn

4

Điều này hoạt động trong Safari khi giải pháp jQuery dường như không hoạt động. Lạ nhỉ?

— henrywright

2

@henrywright: Vâng. Trong jQuery, Submit()lệnh gọi kích hoạt submitsự kiện jQuery , nhưng không kích hoạt biểu mẫu bên dưới submit(). Tất nhiên, bạn có thể sử dụng $('form')[0].submit()để nhấn phần tử DOM bằng jQuery

— Mã hóa

68

Chỉ cần nói với file-input để tự động gửi biểu mẫu về bất kỳ thay đổi nào:

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

Mở rộng đoạn trích

Giải pháp này hoạt động như thế này:

onchangelàm cho phần tử đầu vào thực thi đoạn script sau, bất cứ khi nào valueđược sửa đổi
form tham chiếu biểu mẫu, rằng phần tử đầu vào này là một phần của
submit() khiến biểu mẫu gửi tất cả dữ liệu tới URL, như được chỉ định trong action

Ưu điểm của giải pháp này:

Hoạt động mà không có ids. Nó làm cho cuộc sống dễ dàng hơn, nếu bạn có một vài hình thức trong một trang html.
Javascript gốc , không cần jQuery hoặc tương tự.
Mã nằm trong các thẻ html. Nếu bạn kiểm tra html, bạn sẽ thấy hành vi của nó ngay lập tức.

— slartidan
nguồn

48

Sử dụng 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>

Mở rộng đoạn trích

— Samich
nguồn

Ngoài ra, câu hỏi tương tự cũng xảy ra với stackoverflow: stackoverflow.com/questions/4704154/iêu

— Samich

Cách tiếp cận này có hoạt động trong Safari không? Tôi không chắc. Tôi đã thử nghiệm Chrome, IE và FF đều hoạt động.

— henrywright

@ErdalG: Phiên bản jQuery hoạt động được thêm vào bên dưới. Nó tránh được vấn đề này.

— Mã hóa đã qua

31

JavaScript với onchangesự kiện:

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

Mở rộng đoạn trích

jQuery .change()và .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>

Mở rộng đoạn trích

— Alex.K.
nguồn

thêm một bình luận nếu bạn bỏ phiếu để làm rõ những gì sai hoặc những gì cần được cải thiện.

— Alex.K.

9

Giải pháp ngắn nhất là

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

— xboz
nguồn

2

Làm thế nào vềonchange="this.form.submit()"

— vikkee

1

Thế còn 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>

— Pháp sư
nguồn

4

Nếu bạn đã sử dụng jQuery đơn giản:

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

— Sojtin
nguồn

4

Đây là giải pháp tải lên hình ảnh của tôi, khi người dùng chọn tệp.

Phần 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) {}
      });
};

— sigi
nguồn

2

Hãy thử mã dưới đây với 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>

— Razib Al Mamun
nguồn

+1 vì đây là phương pháp duy nhất tôi tìm thấy cho phép tôi bắt sự kiện gửi bằng jquery. Các phương thức khác dường như bỏ qua sự kiện gửi để tôi không thể kiểm tra biểu mẫu hoặc gửi với Ajax khi sử dụng chúng. Cảm ơn

— user1404617

1

Đối với những người đang sử dụng .NET WebForms, việc gửi toàn bộ trang có thể không được mong muốn. Thay vào đó, hãy sử dụng cùng một onchangeý tưởng để có javascript nhấp vào nút ẩn (ví dụ: <asp: Nút ...) và nút ẩn có thể mất phần còn lại. Hãy chắc chắn rằng bạn đang làm một display: none;nút trên và không Visible="false".

— peroija
nguồn

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
nguồn

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>

— Anant Dabhi
nguồn

0

Bạn có thể đặt mã này để làm cho mã của bạn hoạt động chỉ với một dòng mã

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

Điều này sẽ tải tệp lên máy chủ mà không cần nhấp vào nút gửi

— Amit Kumar
nguồn