जब एक फ़ाइल का चयन किया जाता है तो मैं एक अपलोड फ़ॉर्म कैसे सबमिट करूं?

Question

मेरे पास एक सरल फ़ाइल अपलोड फ़ॉर्म है। जब एक फ़ाइल का चयन किया गया है तो मैं इसे स्वचालित रूप से कैसे सबमिट करूं? मैं नहीं चाहता कि उपयोगकर्ता को सबमिट बटन पर क्लिक करना पड़े।

Comments

यदि उपयोगकर्ता गलत फ़ाइल का चयन करता है तो क्या होगा? IMO, आपको इसे सबमिट करने के लिए चुनने के लिए उपयोगकर्ता पर छोड़ देना चाहिए।

— टायलर क्रॉम्पटन

@ टायलर अधिकांश लोग सही फ़ाइल का चयन करेंगे और मैं UX घर्षण को कम करने की कोशिश कर रहा हूं। उन लोगों के लिए जो गलत फ़ाइल का चयन करते हैं, यह अपलोड होने के बाद वे इसे हटाना चुन सकते हैं।

— ram1

"अधिकांश लोग" स्मार्ट निर्णय लेते हैं, लेकिन अधिकांश लोग नहीं हैं।

— फिक्स

मैं @TylerCrompton से सहमत हूं, उपयोगकर्ता सबसे गंभीर गलतियां करेंगे और आपको इसके लिए दोषी ठहराएंगे, आप सबमिशन के बाद एक पूर्ववत् जोड़ सकते हैं।

— रॉस केडी

सबसे अच्छा उत्तर सबसे सरल उत्तर है stackoverflow.com/a/25893747/1536309

— ब्लेयर एंडरसन

Answer 1

आप बस अपनी फ़ाइल इनपुट submitकी onchangeस्थिति में अपने फॉर्म के तरीके को कॉल कर सकते हैं ।

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

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

Comments

यह सफारी में काम करता है जहां jQuery समाधान काम नहीं करता है। अजीब?

— हेनरीटाइट

@ राइनराइट: हाँ। JQuery में Submit()कॉल jQuery submitइवेंट को ट्रिगर करता है, लेकिन अंतर्निहित रूप को फायर नहीं करता है submit()। आप बेशक $('form')[0].submit()jQuery के साथ DOM तत्व को हिट करने के लिए उपयोग कर सकते हैं

— चला गया

Answer 2

fileकिसी भी परिवर्तन पर फ़ॉर्म को स्वचालित रूप से सबमिट करने के लिए -input को बताएं :

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

यह समाधान इस तरह काम करता है:

• onchangeजब भी valueसंशोधित होता है , इनपुट तत्व निम्न स्क्रिप्ट को निष्पादित करता है
• form प्रपत्र का संदर्भ, यह इनपुट तत्व का हिस्सा है
• submit() के रूप में निर्दिष्ट करने के लिए URL के लिए सभी डेटा भेजने के लिए प्रपत्र का कारण बनता है action

इस समाधान के लाभ:

• बिना काम करता है id। यह जीवन को आसान बनाता है, यदि आपके पास एक html पृष्ठ में कई रूप हैं ।
• देशी जावास्क्रिप्ट, कोई jQuery या इसी तरह की आवश्यकता नहीं है।
• कोड HTML-टैग के अंदर है। यदि आप html का निरीक्षण करते हैं, तो आप देखेंगे कि यह तुरंत व्यवहार है।

Answer 3

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>

Comments

: भी, एक ही सवाल stackoverflow पर था stackoverflow.com/questions/4704154/...

— Samich

क्या यह दृष्टिकोण सफारी में काम करता है? मुझे यकीन नहीं है। मैंने Chrome, IE और FF का परीक्षण किया है जो सभी काम करते हैं।

— हेनरीटाइट

@ErdalG: वर्किंग jQuery वर्जन नीचे जोड़ा गया। यह इस समस्या से बचा जाता है।

— कोडिंग

Answer 4

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>

Comments

एक टिप्पणी जोड़ें यदि आप स्पष्ट करने के लिए मतदान करते हैं कि क्या गलत है या क्या सुधार किया जाना चाहिए।

— एलेक्स।

Answer 5

सबसे छोटा उपाय है

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

Comments

कैसे के बारे मेंonchange="this.form.submit()"

— vikkee

कैसे के बारे में onchange="form.submit()"? :)

— slartidan

Answer 6

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

Answer 7

यदि आप पहले से ही jQuery सरल का उपयोग कर रहे हैं:

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

Answer 8

यह मेरी छवि अपलोड समाधान है, जब उपयोगकर्ता ने फ़ाइल का चयन किया।

HTML हिस्सा:

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

जावास्क्रिप्ट:

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

Answer 9

Jquery के साथ bellow कोड आज़माएं:

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

Comments

+1 क्योंकि यह एकमात्र तरीका है जो मैंने पाया कि मुझे jquery के साथ सबमिट ईवेंट को पकड़ने में सक्षम किया। अन्य विधियां सबमिट ईवेंट को बायपास करने लगती हैं, इसलिए मैं फॉर्म पर चेक नहीं कर सकता या उपयोग करते समय अजाक्स के साथ सबमिट नहीं कर सकता। धन्यवाद

— user1404617

Answer 10

जो लोग .NET WebForms का उपयोग कर रहे हैं उनके लिए एक पूर्ण पृष्ठ सबमिट नहीं किया जा सकता है। इसके बजाय, एक ही onchangeविचार का उपयोग करें कि जावास्क्रिप्ट एक छिपे हुए बटन पर क्लिक करें (जैसे <एस्प: बटन ...) और छिपा हुआ बटन बाकी का ले सकता है। सुनिश्चित करें कि आप display: none;बटन पर कर रहे हैं और नहीं Visible="false"।

Answer 11

एचटीएमएल

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

Answer 12

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

Answer 13

आप इस कोड को कोड की एकल पंक्ति के साथ अपना कोड काम करने के लिए रख सकते हैं

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

यह सबमिट बटन पर क्लिक किए बिना फ़ाइल को सर्वर पर अपलोड करेगा