কোনও ফাইল নির্বাচন করা হলে আমি কীভাবে একটি আপলোড ফর্ম স্বয়ংক্রিয়ভাবে জমা দেব?

Question

আমার একটি সরল ফাইল আপলোড ফর্ম রয়েছে। কোনও ফাইল নির্বাচন করা হয়ে গেলে আমি কীভাবে এটি স্বয়ংক্রিয়ভাবে জমা করব? আমি চাই না যে ব্যবহারকারীকে জমা দিন বোতামটি ক্লিক করতে হবে।

Comments

যদি ব্যবহারকারী ভুল ফাইলটি নির্বাচন করে? আইএমও, কখন জমা দিতে হবে তা চয়ন করার জন্য আপনার এটি ব্যবহারকারীর কাছে ছেড়ে দেওয়া উচিত।

— টাইলার ক্রম্পটন

@ টাইলার বেশিরভাগ লোকেরা সঠিক ফাইলটি নির্বাচন করবেন এবং আমি ইউএক্সের ঘর্ষণকে হ্রাস করার চেষ্টা করছি। এই ফাইলগুলির জন্য যারা ভুল ফাইলটি নির্বাচন করেন, এটি আপলোড হওয়ার পরে তারা এটি মুছতে পছন্দ করতে পারেন।

— রম 1

"বেশিরভাগ লোক" স্মার্ট সিদ্ধান্ত নেয়, তবে বেশিরভাগ লোকেরা তা করে না।

— ফিক্স

আমি @ টাইলারক্র্যাম্পটনের সাথে একমত, ব্যবহারকারীরা নির্লিপ্ত ভুল করবেন এবং এর জন্য আপনাকে দোষ দেবেন, আপনি জমা দেওয়ার পরে একটি পূর্বাবস্থা যুক্ত করতে পারেন।

— রস কেডি

সর্বোত্তম উত্তর হ'ল সহজ উত্তর স্ট্যাকওভারফ্লো.com

— ব্লেয়ার অ্যান্ডারসন

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 এর সাহায্যে ডিওএম উপাদানটি হিট করতে ব্যবহার করতে পারেন

— কোডিং গেছে

Answer 2

fileকোনও পরিবর্তনতে স্বয়ংক্রিয়ভাবে ফর্মটি জমা দেওয়ার জন্য ইনপুটকে বলুন :

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

এই সমাধানটি এইভাবে কাজ করে:

• onchangeযখনই valueসংশোধিত হয় ইনপুট উপাদানটি নিম্নলিখিত স্ক্রিপ্টটি কার্যকর করে
• form ফর্মটি উল্লেখ করে যে এই ইনপুট উপাদানটির একটি অংশ
• submit() ফর্মের ফলে URL হিসাবে সমস্ত তথ্য প্রেরণ করা হবে, যেমন উল্লিখিত হয়েছে action

এই সমাধানের সুবিধা:

• idএস ছাড়া কাজ করে । যদি আপনার এইচটিএমএল পৃষ্ঠায় বেশ কয়েকটি ফর্ম থাকে তবে এটি জীবনকে আরও সহজ করে তোলে ।
• নেটিভ জাভাস্ক্রিপ্ট, কোন jQuery বা অনুরূপ প্রয়োজন।
• কোড ভিতরে এইচটিএমএল-ট্যাগ। আপনি যদি এইচটিএমএল পরিদর্শন করেন তবে আপনি এখনই এটির আচরণটি দেখতে পাবেন।

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 পরীক্ষা করেছি যা সব কাজ করে

— হেনরিয়াইট

@ এরডালজি: ওয়ার্কিং jQuery সংস্করণ নীচে যুক্ত করা হয়েছে। এটি এই সমস্যা এড়ায়।

— 20:53

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

— ভিক্কি

কীভাবে onchange="form.submit()"? :)

— স্লারিটিদান

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

এটি আমার চিত্র আপলোড সমাধান, যখন ব্যবহারকারী ফাইলটি নির্বাচন করেন।

এইচটিএমএল অংশ:

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

Answer 9

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>

Comments

+1 কারণ এটি আমি একমাত্র পদ্ধতিটি পেয়েছি যা আমাকে jquery সহ জমা দেওয়ার ইভেন্টটি ধরতে সক্ষম করে। অন্যান্য পদ্ধতিগুলি জমা দেওয়ার ইভেন্টটিকে বাইপাস করে বলে মনে হচ্ছে যাতে আমি ফর্মটিতে চেক করতে পারি না বা সেগুলি ব্যবহার করার সময় এজ্যাক্সের সাথে জমা দিতে পারি না। ধন্যবাদ

— user1404617

Answer 10

যারা নেট নেটফর্ম ব্যবহার করছেন তাদের জন্য একটি পূর্ণ পৃষ্ঠা জমা দেওয়ার পছন্দসই নাও হতে পারে। পরিবর্তে, onchangeজাভাস্ক্রিপ্টে কোনও লুকানো বোতামটি ক্লিক করতে একই ধারণাটি ব্যবহার করুন (যেমন <এসপি: বোতাম ...) এবং লুকানো বোতামটি বাকী অংশ নিতে পারে। আপনি display: none;বাটনে একটি করছেন এবং না তা নিশ্চিত করুন Visible="false"।

Answer 11

এইচটিএমএল

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

জাভাস্ক্রিপ্ট খাঁটি

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

এটি সাবমিট বাটনে ক্লিক না করে সার্ভারে ফাইল আপলোড করবে