ฉันจะส่งแบบฟอร์มการอัปโหลดอัตโนมัติเมื่อไฟล์ถูกเลือกได้อย่างไร

154

ฉันมีรูปแบบการอัปโหลดไฟล์ที่เรียบง่าย ฉันจะทำให้มันส่งโดยอัตโนมัติได้อย่างไรเมื่อเลือกไฟล์แล้ว? ฉันไม่ต้องการให้ผู้ใช้คลิกปุ่มส่ง

javascript html

— ram1
แหล่งที่มา

9

ถ้าผู้ใช้เลือกไฟล์ผิด IMO คุณควรปล่อยให้ผู้ใช้เลือกว่าจะส่งเมื่อใด

— Tyler Crompton

2

@Tyler คนส่วนใหญ่จะเลือกไฟล์ที่ถูกต้องและฉันพยายามลดแรงเสียดทาน UX สำหรับคนที่เลือกไฟล์ผิดหลังจากอัปโหลดแล้วพวกเขาอาจเลือกที่จะลบมัน

— ram1

3

"คนส่วนใหญ่" ตัดสินใจอย่างชาญฉลาด แต่คนส่วนใหญ่ไม่ใช่

— Phix

2

ฉันเห็นด้วยกับ @TylerCrompton ผู้ใช้จะทำผิดพลาดโง่และตำหนิคุณคุณสามารถเพิ่มเลิกทำหลังจากส่ง

— Ross Keddy

3

คำตอบที่ดีที่สุดคือคำตอบที่ง่ายที่สุดstackoverflow.com/a/25893747/1536309

— Blair Anderson

194

คุณสามารถเรียกsubmitวิธีการแบบฟอร์มของคุณในonchangeกรณีที่มีการป้อนไฟล์ของคุณ

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

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

— Alex Turpin
แหล่งที่มา

4

ใช้งานได้ใน Safari ซึ่งดูเหมือนว่าโซลูชัน jQuery จะไม่ทำงาน แปลก?

— henrywright

2

@henrywright: ใช่ ใน jQuery Submit()โทรเรียก jQuery submitเหตุการณ์ 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

ข้อดีของการแก้ปัญหานี้:

ทำงานได้โดยไม่ต้องids มันทำให้ชีวิตง่ายขึ้นถ้าคุณมีหลายรูปแบบในหน้า html เดียว
จาวาสคริปต์ดั้งเดิมไม่จำเป็นต้องใช้ 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/ …

— Samich

วิธีนี้ใช้งานได้ใน Safari หรือไม่ ฉันไม่แน่ใจ. ฉันทดสอบ Chrome, IE และ FF แล้วซึ่งใช้งานได้ทั้งหมด

— henrywright

@ErdalG: ใช้งาน jQuery เวอร์ชันเพิ่มเติมด้านล่าง มันหลีกเลี่ยงปัญหานี้

— Gone Coding

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.
แหล่งที่มา

เพิ่มความคิดเห็นหากคุณลงคะแนนเพื่อให้ชัดเจนว่ามีอะไรผิดปกติหรือควรปรับปรุงอะไร

— 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>

— Dhurba Baral
แหล่งที่มา

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

— sigi
แหล่งที่มา

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>

— Razib Al Mamun
แหล่งที่มา

+1 เพราะนี่เป็นวิธีเดียวที่ฉันพบที่ทำให้ฉันสามารถติดตามเหตุการณ์ส่งด้วย jquery วิธีอื่นดูเหมือนจะข้ามเหตุการณ์ส่งดังนั้นฉันไม่สามารถตรวจสอบแบบฟอร์มหรือส่งด้วย Ajax เมื่อใช้งานได้ ขอบคุณ

— user1404617

1

สำหรับผู้ที่ใช้. NET WebForms อาจไม่ต้องการส่งหน้าเต็ม ให้ใช้onchangeความคิดเดิมเพื่อให้จาวาสคริปต์คลิกที่ปุ่มที่ซ่อนอยู่ (เช่น <asp: ปุ่ม ... ) และปุ่มที่ซ่อนสามารถใช้เวลาที่เหลือได้ ให้แน่ใจว่าคุณกำลังทำปุ่มและไม่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>

— Anant Dabhi
แหล่งที่มา

0

คุณสามารถใส่รหัสนี้เพื่อให้รหัสของคุณทำงานด้วยรหัสบรรทัดเดียว

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

จะทำการอัพโหลดไฟล์บนเซิร์ฟเวอร์โดยไม่ต้องคลิกที่ปุ่มส่ง

— Amit Kumar
แหล่งที่มา