আমি কীভাবে সংযোজনীয়ভাবে ফাইলগুলি আপলোড করতে পারি?

Question

আমি jQuery এর সাথে সংবিধানে একটি ফাইল আপলোড করতে চাই।

$(document).ready(function () {
    $("#uploadbutton").click(function () {
        var filename = $("#file").val();

        $.ajax({
            type: "POST",
            url: "addFile.do",
            enctype: 'multipart/form-data',
            data: {
                file: filename
            },
            success: function () {
                alert("Data Uploaded: ");
            }
        });
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<span>File</span>
<input type="file" id="file" name="file" size="10"/>
<input id="uploadbutton" type="button" value="Upload"/>

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

Comments

JQuery এর জন্য ফাইল আপলোড করতে বিভিন্ন তৈরি প্লাগইন রয়েছে। এই জাতীয় আপলোড হ্যাকগুলি উপভোগ করার মতো অভিজ্ঞতা নয়, তাই লোকে রেডিমেড সমাধানগুলি ব্যবহার করে উপভোগ করে। এখানে কয়েকটি: - জিকুয়ারি ফাইল আপলোডার - একাধিক ফাইল আপলোড প্লাগিন - মিনি একাধিক ফাইল আপলোড - jQuery ফাইল আপলোড আপনি এনপিএম ("jquery- প্লাগইন" কীওয়ার্ড হিসাবে ব্যবহার করে) বা গিথুবে আরও প্রকল্পের সন্ধান করতে পারেন।

— উত্সাহিত করুন

আপনি কেবল ফাইলের নাম পাচ্ছেন কারণ আপনার

— জিমি

এখানে একটি ভাল একটি: http://blueimp.github.io/jQuery-File-Upload/ - এইচটিএমএল 5 অ্যাজ্যাক্স আপলোড - অসমর্থিত ব্রাউজারগুলির জন্য iframes থেকে গ্রেফুল ফ্যালব্যাক - মাল্টি-ফাইল অ্যাসিঙ্ক আপলোড আমরা এটি ব্যবহার করেছি এবং এটি দুর্দান্ত কাজ করে। ( এখানে ডকুমেন্টেশন )

— আশীষ প্যানারি

এছাড়াও চেক করুন এই: stackoverflow.com/questions/6974684/... , এখানে কিভাবে এটি jQuery এর মাধ্যমে এটি অর্জন করা ব্যাখ্যা

— Chococroc

@ জিমি কীভাবে তার পরিবর্তে ইনপুটটিতে থাকা ফাইলটি পাবেন?

— অ্যালেক্স

Answer 1

সঙ্গে HTML5 এর আপনি Ajax এবং jQuery সঙ্গে ফাইল আপলোড করতে পারেন। কেবল এটিই নয়, আপনি ফাইলের বৈধতা (নাম, আকার এবং এমআইএমআই টাইপ) করতে পারেন বা HTML5 অগ্রগতি ট্যাগ (বা একটি ডিভি) দিয়ে অগ্রগতি ইভেন্টটি পরিচালনা করতে পারেন। সম্প্রতি আমাকে একটি ফাইল আপলোডার তৈরি করতে হয়েছিল, তবে আমি ফ্ল্যাশ বা ইফ্রামেস বা প্লাগইন ব্যবহার করতে চাইনি এবং কিছু গবেষণা শেষে সমাধানটি নিয়ে এসেছি।

এইচটিএমএল:

<form enctype="multipart/form-data">
    <input name="file" type="file" />
    <input type="button" value="Upload" />
</form>
<progress></progress>

প্রথমত, আপনি চান কিছু বৈধতা করতে পারেন। উদাহরণস্বরূপ, .on('change')ফাইলের ইভেন্টে:

$(':file').on('change', function () {
  var file = this.files[0];

  if (file.size > 1024) {
    alert('max upload size is 1k');
  }

  // Also see .name, .type
});

এবার $.ajax()বোতামটির ক্লিক সহ জমা দিন:

$(':button').on('click', function () {
  $.ajax({
    // Your server script to process the upload
    url: 'upload.php',
    type: 'POST',

    // Form data
    data: new FormData($('form')[0]),

    // Tell jQuery not to process data or worry about content-type
    // You *must* include these options!
    cache: false,
    contentType: false,
    processData: false,

    // Custom XMLHttpRequest
    xhr: function () {
      var myXhr = $.ajaxSettings.xhr();
      if (myXhr.upload) {
        // For handling the progress of the upload
        myXhr.upload.addEventListener('progress', function (e) {
          if (e.lengthComputable) {
            $('progress').attr({
              value: e.loaded,
              max: e.total,
            });
          }
        }, false);
      }
      return myXhr;
    }
  });
});

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

Comments

আমি কি তখন আপলোড.এফপি $ _FILES ব্যবহার করতে পারি?

— আলেসান্দ্রো কোসেন্টিনো

এটি ইন্টারনেট এক্সপ্লোরারে কাজ করা উচিত তবে কেবল সংস্করণ 10। ( Caniuse.com/xhr2 )

— টাইলার

হাই, আমি পিএইচপি আপনার পছন্দের ভাষাটি প্রশংসা করি ... তবে আমি ভাবছি যে আপনি যদি জানেন যে এটিও এএসপি.নেট এমভিসি তে কাজ করে? আমি। নেট বিকাশকারী এবং আমি আপনার কিছু সাধারণ এজেএক্স ফাইল আপলোড করার জন্য উদাহরণটি ব্যবহার করার চেষ্টা করেছি তবে সার্ভারের দিক থেকে আমি এজেএক্সের মাধ্যমে পোস্ট করা ফাইলটি পাই না। আমি সর্বশেষতম ক্রোম ব্যবহার করছি।

— শিউমি

এটি ফর্মডাটা এখানে সমস্ত যাদু করে। এই ডক্সটি যাচাই করতে ভুলবেন না - এটি একাধিক ফাইল এবং ক্ষেত্র সম্পর্কে আপনার সমস্ত প্রশ্নকে কভার করে।

— দেহধারী

ঠিক তাই অন্য কেউ ঘন্টা ব্যয় করেন না ... আপনি যদি পিএইচপি (এবং সম্ভবত অন্যান্য জায়গাগুলিতে) ডেটা ব্যবহার করতে চলেছেন তবে ফাইল ট্যাগে name="file"এটি অত্যন্ত গুরুত্বপূর্ণ <input>। আমি জাভাস্ক্রিপ্ট ব্যবহার করে গতিশীলভাবে একটি ফর্ম তৈরি করেছি যাতে নামটির গুণাবলীর দরকার পড়েনি তবে ডেটা সার্ভার-সাইডটি পুনরুদ্ধার করার জন্য আপনার একেবারে প্রয়োজনীয় উপায়টি খুঁজে পেলাম।

— কিভাক ওল্ফ

Answer 2

2019 আপডেট: এটি এখনও আপনার ডেমোগ্রাফিক ব্যবহারের ব্রাউজারগুলির উপর নির্ভর করে ।

"নতুন" এইচটিএমএল 5 fileএপিআইয়ের সাথে বোঝার একটি গুরুত্বপূর্ণ বিষয় হ'ল এটি আইই 10 পর্যন্ত সমর্থিত ছিল না । আপনি যে নির্দিষ্ট বাজারটিকে লক্ষ্য করছেন সেটি যদি উইন্ডোজের পুরানো সংস্করণগুলির চেয়ে গড়ের চেয়ে বেশি প্রবণতা থাকে তবে আপনার এতে অ্যাক্সেস নাও থাকতে পারে।

২০১ of সালের হিসাবে, প্রায় 5% ব্রাউজারগুলি আইই 6, 7, 8 বা 9.9 এর মধ্যে একটি are । ২০১ In সালে, আমি IE8 ব্যবহার করে এমন একটি সংস্থার সাথে তাদের 60% মেশিনে চুক্তি করেছি।

আমার প্রাথমিক উত্তরের প্রায় 11 বছর পরে এটি এই সম্পাদনা হিসাবে 2019 2019 আইই 9 এবং নিম্নতর বিশ্বব্যাপী 1% চিহ্নের কাছাকাছি থাকলেও এখনও উচ্চতর ব্যবহারের ক্লাস্টার রয়েছে।

এটি - বৈশিষ্ট্যটি যাইহোক - যা থেকে গুরুত্বপূর্ণ তা নেওয়া, আপনার ব্যবহারকারীরা কী ব্রাউজার ব্যবহার করেন তা পরীক্ষা করে দেখুন । যদি আপনি তা না করেন তবে আপনি কেন ক্লায়েন্টের কাছে বিতরণযোগ্য ক্ষেত্রে "আমার পক্ষে কাজ করে" যথেষ্ট ভাল নয় তার একটি দ্রুত এবং বেদনাদায়ক পাঠ শিখবেন। ক্যানিউজ একটি দরকারী সরঞ্জাম তবে তারা কোথা থেকে তাদের জনসংখ্যার চিত্র পেয়েছে তা নোট করুন। তারা আপনার সাথে সারিবদ্ধ নাও হতে পারে। এটি এন্টারপ্রাইজ পরিবেশের চেয়ে কখনই সত্য নয়।

আমার উত্তর 2008 থেকে অনুসরণ করা হয়।

---

তবে ফাইল আপলোডের অযোগ্য জেএস পদ্ধতি রয়েছে। আপনি পৃষ্ঠায় একটি আইফ্রেম তৈরি করতে পারেন (যা আপনি সিএসএস দিয়ে লুকিয়ে রাখবেন) এবং তারপরে আপনার ফর্মটিকে লক্ষ্য করে সেই আইফ্রেমে পোস্ট করতে পারেন। মূল পৃষ্ঠাটি সরানোর দরকার নেই।

এটি একটি "আসল" পোস্ট তাই এটি সম্পূর্ণ ইন্টারেক্টিভ নয়। আপনার যদি স্থিতির প্রয়োজন হয় তবে এটি প্রক্রিয়া করার জন্য আপনার কিছু সার্ভার-সাইড প্রয়োজন। এটি আপনার সার্ভারের উপর নির্ভর করে ব্যাপকভাবে পরিবর্তিত হয়। এএসপি.এনইটিটির আরও সুন্দর প্রক্রিয়া রয়েছে। পিএইচপি প্লেইন ব্যর্থ হয়, তবে পার্ল বা অ্যাপাচি পরিবর্তনগুলি ব্যবহার করতে পারেন এটির আশপাশে।

আপনার যদি একাধিক ফাইল-আপলোডের প্রয়োজন হয় তবে প্রতিটি ফাইল একবারে করা ভাল (সর্বোচ্চ ফাইল আপলোড সীমা অতিক্রম করতে)। প্রথম ফর্মটি iframe এ পোস্ট করুন, উপরের ব্যবহার করে এর অগ্রগতি পর্যবেক্ষণ করুন এবং এটি শেষ হয়ে গেলে, দ্বিতীয় ফর্মটি iframe এ পোস্ট করুন, এবং আরও কিছু।

অথবা একটি জাভা / ফ্ল্যাশ সমাধান ব্যবহার করুন। তারা তাদের পোস্টগুলির সাথে তারা কী করতে পারে তাতে অনেক বেশি নমনীয় ...

Comments

রেকর্ডের জন্য এখন ব্রাউজার যদি ফাইল এপিআই সমর্থন করে তবে খাঁটি AJAX ফাইল আপলোড করা সম্ভব - ডেভেলপার.মোজিলা.আর

— en

iframe সমাধান কাজ করা খুব সহজ এবং সহজ

— ম্যাথু লক

এটি বেশ পুরানো উত্তর, তবে এটি কিছুটা বিভ্রান্তিকর ছিল .. আইই XHR স্থানীয়ভাবে আই 7 হিসাবে অনেকটা সমর্থন করেছিল এবং আইটি 5 এর মতো অ্যাক্টিভএক্সের মাধ্যমে সমর্থন করেছিল supported w3schools.com/ajax/ajax_xMLhttprequest_create.asp । এটি করার ব্যবহারিক উপায়টি অবশ্যই ফ্ল্যাশ (শকওয়েভ) উপাদানগুলি লক্ষ্য করে বা ফ্ল্যাশ / অ্যাক্টিভএক্স (সিলভারলাইট) নিয়ন্ত্রণটি আবর্তন করে। আপনি যদি কোনও অনুরোধ উত্পন্ন করতে এবং জাভাস্ক্রিপ্টের মাধ্যমে প্রতিক্রিয়াটি পরিচালনা করতে পারেন তবে এটি আজাক্স .. যদিও বলেছিলেন যে, এজ্যাক্স এক্সএইচআর এর সমার্থক, তবে এটি নিজেই আন্ডারলাইন প্রক্রিয়া / উপাদানগুলি বর্ণনা করে না যা পেলোড বিতরণ করে / এক্সচেঞ্জ করে।

— ব্রেট ক্যাসওয়েল

@ ব্র্যাটক্যাসওয়েল আমি বলছিলাম না যে এজাক্স / এক্সএইচআর সম্ভব ছিল না, কেবল এটাই যে তাদের সাথে পুরানো — তবে চিরজীবনের IE সংস্করণগুলিতে একটি ফাইল পোস্ট করা সম্ভব ছিল না। এটি ছিল এবং সম্পূর্ণ সত্য।

— অলি

এটি এমন নয়, এটি একটি ইউএক্স মতামত - এটি বৈধ হতে পারে।

— নিমজক্স

Answer 3

আমি এই উদ্দেশ্যে ফাইন আপলোডার প্লাগইন ব্যবহার করার পরামর্শ দিচ্ছি । আপনার JavaScriptকোডটি হবে:

$(document).ready(function() {
  $("#uploadbutton").jsupload({
    action: "addFile.do",
    onComplete: function(response){
      alert( "server response: " + response);
    }
  });
});

Comments

এটি জেএসএন ব্যবহার করে - সুতরাং পিএইচপি পুরানো সংস্করণে এটি ব্যবহার সম্ভব নয়।

— লরেঞ্জো মানুচি

অ্যাজাক্স ফাইল আপলোডের চেয়ে অনেক বেশি পরিচ্ছন্ন বলে মনে হচ্ছে, যেখানে আমাকে জঘন্য জিনিসটি ব্যবহার করার জন্য একটি বিশাল সংখ্যক কোড অন্তর্ভুক্ত করতে হবে।

— ripper234

সংস্করণ 2-র জন্য নতুন ইউআরএল এখন Valums-file-uploader.github.com/file-uploader

— সাইমন ইস্ট

"এই প্লাগইনটি জিএনইউ জিপিএল 2 বা তার পরে এবং জিএনইউ এলজিপিএল 2 বা তার পরে খোলা রয়েছে" " সুতরাং যতক্ষণ আপনি অনুলিপি বা কোনও পরিবর্তিত সংস্করণ বিতরণ করবেন না, ততক্ষণ আপনার প্রকল্পটি খোলার দরকার নেই।

— ট্রান্টর লিউ

আমি কিছু অনুপস্থিত করছি? এই গ্রন্থাগারটি আর jquery ব্যবহার করবে বলে মনে হচ্ছে না, তাই এটি উত্তর থেকে বাক্য গঠন সমর্থন করে না?

— জেমস ম্যাককর্মাক 21

Answer 4

দ্রষ্টব্য: এই উত্তরটি পুরানো, এখন এক্সএইচআর ব্যবহার করে ফাইলগুলি আপলোড করা সম্ভব।

---

আপনি XMLHttpRequest (Ajax) ব্যবহার করে ফাইলগুলি আপলোড করতে পারবেন না । আপনি একটি iframe বা ফ্ল্যাশ ব্যবহার করে প্রভাব অনুকরণ করতে পারেন। কার্যকর jQuery ফর্ম প্লাগইন যে প্রভাব পেতে আপনার ফাইলগুলি একটি iframe মাধ্যমে পোস্ট করে।

Comments

হ্যাঁ, আপনি একটি আইফ্রেমে পোস্ট করতে পারেন এবং সেখানে ফাইলটি ক্যাপচার করতে পারেন। যদিও এর সাথে আমার খুব সীমিত অভিজ্ঞতা আছে, তাই আমি এটিতে আসলেই মন্তব্য করতে পারি না।

— ম্যাটিয়াস

ছোট মন্তব্য: Chrome এবং Firefox এর সর্বশেষ সংস্করণে এটা সম্ভব, stackoverflow.com/questions/4856917/...

— Alleo

— আইই

Answer 5

ভবিষ্যতের পাঠকদের জন্য গুছানো।

অ্যাসিঙ্ক্রোনাস ফাইল আপলোড

এইচটিএমএল 5 সহ

আপনি ফাইল আপলোড করতে পারেন jQuery সঙ্গে ব্যবহার $.ajax()যদি পদ্ধতি FormData এবং ফাইল এপিআই সমর্থিত (উভয় HTML5 এর অতিরিক্ত বৈশিষ্ট্যগুলিও উপস্থিত রয়েছে)।

আপনি ফর্মডেটা ছাড়াই ফাইলগুলি প্রেরণ করতে পারেন তবে যে কোনও উপায়ে ফাইল এপিআই ফাইলগুলি এমনভাবে প্রসেস করার জন্য উপস্থিত থাকতে হবে যাতে সেগুলি এক্সএমএলএইচটিপিআরকোয়েস্ট (অ্যাজাক্স) দিয়ে প্রেরণ করা যায় ।

$.ajax({
  url: 'file/destination.html', 
  type: 'POST',
  data: new FormData($('#formWithFiles')[0]), // The form with the file inputs.
  processData: false,
  contentType: false                    // Using FormData, no need to process data.
}).done(function(){
  console.log("Success: Files sent!");
}).fail(function(){
  console.log("An error occurred, the files couldn't be sent!");
});

দ্রুত, খাঁটি জাভাস্ক্রিপ্টের জন্য ( কোনও জকিউয়ারি নেই ) উদাহরণস্বরূপ " একটি ফর্মডাটা অবজেক্ট ব্যবহার করে ফাইল প্রেরণ করা " দেখুন।

পিছু হট

এইচটিএমএল 5 সমর্থিত না হলে (কোনও ফাইল এপিআই নেই ) কেবলমাত্র অন্য খাঁটি জাভাস্ক্রিপ্ট সমাধান (কোনও ফ্ল্যাশ বা অন্য কোনও ব্রাউজার প্লাগইন নয়) হ'ল লুকানো আইফ্রেম কৌশল, যা এক্সএমএলএইচটিপিআরকোয়েস্ট অবজেক্টটি ব্যবহার না করে একটি অ্যাসিঙ্ক্রোনাস অনুরোধ অনুকরণ করতে দেয় ।

এটি ফাইল ইনপুট সহ ফর্মের লক্ষ্য হিসাবে একটি আইফ্রেম সেট করে নিয়ে গঠিত। যখন ব্যবহারকারী জমা দেয় তখন একটি অনুরোধ করা হয় এবং ফাইলগুলি আপলোড করা হয় তবে প্রতিক্রিয়াটি মূল পৃষ্ঠায় পুনরায় রেন্ডারিংয়ের পরিবর্তে iframe এর ভিতরে প্রদর্শিত হয়। Iframe লুকানো পুরো প্রক্রিয়াটি ব্যবহারকারীর কাছে স্বচ্ছ করে তোলে এবং একটি অ্যাসিনক্রোনাস অনুরোধ অনুকরণ করে।

যদি সঠিকভাবে সম্পন্ন করা হয় তবে এটি কোনও ব্রাউজারে কার্যত কাজ করবে, তবে কীভাবে ইফ্রেম থেকে প্রতিক্রিয়া পাওয়া যায় সে সম্পর্কে কিছুটা সতর্কতা রয়েছে।

এই ক্ষেত্রে আপনি মত একটি মোড়কের প্লাগইন ব্যবহার করতে পছন্দ করতে পারে বাইফ্রস্টকে যা ব্যবহার আইফ্রেম কৌশল এছাড়াও একটি উপলব্ধ jQuery এর আয়াক্স পরিবহন করতে সক্ষম হবেন ফাইল পাঠাতে মাত্র সঙ্গে $.ajax()ভালো পদ্ধতি:

$.ajax({
  url: 'file/destination.html', 
  type: 'POST',
  // Set the transport to use (iframe means to use Bifröst)
  // and the expected data type (json in this case).
  dataType: 'iframe json',                                
  fileInputs: $('input[type="file"]'),  // The file inputs containing the files to send.
  data: { msg: 'Some extra data you might need.'}
}).done(function(){
  console.log("Success: Files sent!");
}).fail(function(){
  console.log("An error occurred, the files couldn't be sent!");
});

প্লাগইন

বিফ্রাস্ট কেবল একটি ছোট্ট মোড়ক যা jQuery এর এজাক্স পদ্ধতিতে ফ্যালব্যাক সমর্থন যোগ করে, তবে jQuery ফর্ম প্লাগইন বা jQuery ফাইল আপলোডের মতো উল্লিখিত প্লাগইনগুলির মধ্যে অনেকগুলি পুরো প্রক্রিয়াটি সহজ করার জন্য এইচটিএমএল 5 থেকে বিভিন্ন ফলব্যাক এবং কিছু দরকারী বৈশিষ্ট্যগুলিকে অন্তর্ভুক্ত করে। আপনার প্রয়োজন এবং প্রয়োজনীয়তার উপর নির্ভর করে আপনি একটি খালি বাস্তবায়ন বা এই প্লাগইনগুলির কোনওটি বিবেচনা করতে চাইতে পারেন।

Comments

ডকুমেন্টেশনের উপর ভিত্তি করে একটি বিষয় লক্ষণীয়: আপনারও পাঠানো উচিত contentType: false। আমি যখন ক্রোমের সাথে এটি পাঠাতাম না তখন ফর্ম সামগ্রী প্রকারটি jQuery দ্বারা অবৈধ।

— ছাই

চমৎকার উত্তর. উন্নতির জন্য কয়েকটি পরামর্শ: উত্তরের সাথে সম্পর্কিত নয় এমন কোডের অংশগুলি সরান, উদাহরণস্বরূপ, .done()এবং .fail()কলব্যাক্স। এছাড়াও, ব্যবহার ছাড়াই একটি উদাহরণ FormDataএবং প্রো / কনসের একটি তালিকা দুর্দান্ত লাগবে।

— জিরো 3

আমি এই ত্রুটিটি পেয়েছি:TypeError: Argument 1 of FormData.constructor does not implement interface HTMLFormElement.

— মোমবাতি

Answer 6

এই এজেএক্স ফাইলটি আপলোড করে jQuery প্লাগইনটি কোনওরকম ফাইল আপলোড করে, এবং কোনও কলব্যাকের প্রতিক্রিয়া ছাড়িয়ে দেয়, অন্য কিছুই নয়।

• এটি নির্দিষ্ট এইচটিএমএলের উপর নির্ভর করে না, কেবল একটি এ দিন <input type="file">
• এটি আপনার সার্ভারের কোনও নির্দিষ্ট উপায়ে সাড়া দেওয়ার প্রয়োজন হয় না
• আপনি কতগুলি ফাইল ব্যবহার করেন সেগুলি বা পৃষ্ঠায় সেগুলি গুরুত্বপূর্ণ নয়

- যত কম ব্যবহার করুন -

$('#one-specific-file').ajaxfileupload({
  'action': '/upload.php'
});

- বা যতটা -

$('input[type="file"]').ajaxfileupload({
  'action': '/upload.php',
  'params': {
    'extra': 'info'
  },
  'onComplete': function(response) {
    console.log('custom handler for file:');
    alert(JSON.stringify(response));
  },
  'onStart': function() {
    if(weWantedTo) return false; // cancels upload
  },
  'onCancel': function() {
    console.log('no file selected');
  }
});

Comments

@ ব্যবহারকারী 840250 jQuery 1.9.1?

— জর্দান ফিল্ডস্টেইন

Answer 7

আমি চিত্রগুলি আপলোড করতে নীচের স্ক্রিপ্টটি ব্যবহার করছি যা সূক্ষ্মভাবে কাজ করে।

এইচটিএমএল

<input id="file" type="file" name="file"/>
<div id="response"></div>

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

jQuery('document').ready(function(){
    var input = document.getElementById("file");
    var formdata = false;
    if (window.FormData) {
        formdata = new FormData();
    }
    input.addEventListener("change", function (evt) {
        var i = 0, len = this.files.length, img, reader, file;

        for ( ; i < len; i++ ) {
            file = this.files[i];

            if (!!file.type.match(/image.*/)) {
                if ( window.FileReader ) {
                    reader = new FileReader();
                    reader.onloadend = function (e) {
                        //showUploadedItem(e.target.result, file.fileName);
                    };
                    reader.readAsDataURL(file);
                }

                if (formdata) {
                    formdata.append("image", file);
                    formdata.append("extra",'extra-data');
                }

                if (formdata) {
                    jQuery('div#response').html('<br /><img src="ajax-loader.gif"/>');

                    jQuery.ajax({
                        url: "upload.php",
                        type: "POST",
                        data: formdata,
                        processData: false,
                        contentType: false,
                        success: function (res) {
                         jQuery('div#response').html("Successfully uploaded");
                        }
                    });
                }
            }
            else
            {
                alert('Not a vaild image!');
            }
        }

    }, false);
});

ব্যাখ্যা

আমি divআপলোডিং অ্যানিমেশন প্রদর্শন করতে প্রতিক্রিয়া এবং আপলোড সম্পন্ন হওয়ার পরে প্রতিক্রিয়া ব্যবহার করি ।

সেরা অংশটি হ'ল আপনি যখন এই স্ক্রিপ্টটি ব্যবহার করেন তখন আপনি অতিরিক্ত ডেটা যেমন আইডি ও ইত্যাদি ফাইলের সাথে ফাইলের সাথে প্রেরণ করতে পারেন। আমি extra-dataএটি স্ক্রিপ্ট হিসাবে উল্লেখ করেছি ।

পিএইচপি স্তরে এটি সাধারণ ফাইল আপলোড হিসাবে কাজ করবে। অতিরিক্ত তথ্য $_POSTডেটা হিসাবে পুনরুদ্ধার করা যেতে পারে ।

এখানে আপনি একটি প্লাগইন এবং স্টাফ ব্যবহার করছেন না। আপনি যেভাবে চান কোডটি পরিবর্তন করতে পারেন। আপনি এখানে অন্ধভাবে কোডিং করছেন না। এটি কোনও jQuery ফাইল আপলোডের মূল কার্যকারিতা। আসলে জাভাস্ক্রিপ্ট।

Comments

JQuery ব্যবহার করার জন্য এবং এটির নির্বাচক ইঞ্জিন এবং ইভেন্ট হ্যান্ডলারগুলি ব্যবহার না করার জন্য -1। addEventListenerক্রস ব্রাউজার নয়।

— চিহ্নিত করুন

কারণ একটি পৃথক উত্তর যুক্ত করা অর্থহীন হবে যা বেশিরভাগ ক্ষেত্রেই এটির উপর ভিত্তি করে তৈরি করা হবে, মাত্র কয়েকটি পরিবর্তন। পরিবর্তে, এই উত্তরটি সংশোধন করা উচিত।

— চিহ্নিত করুন

@ রেনফ্রমহেন, দয়া করে, আপনি উত্তর সম্পাদনা করতে পারেন? ক্রস ব্রাউজার উপায়ে এটি কীভাবে করা যায় তা আমি জানি না।

— থিয়াগো নেগ্রি

এখনও আই 9 এবং ডাউন এ কাজ করে না। বরাদ্দকৃত ব্যবহারকারীরা এখনও সেই সংস্করণ ব্যবহার করে।

— পিয়েরে

কেউ দয়া করে ব্যাখ্যা করতে পারেন কীভাবে এটি এএসপিএন-তে কাজ করা যায়? আমি কি ওয়েবমেডথ ব্যবহার করি? যদি হ্যাঁ তা দেখতে কেমন হবে?

— সামুরাইজ্যাক

Answer 8

আপনি ভ্যানিলা জাভাস্ক্রিপ্টে এটি খুব সহজেই করতে পারেন। আমার বর্তমান প্রকল্পের একটি স্নিপেট এখানে:

var xhr = new XMLHttpRequest();
xhr.upload.onprogress = function(e) {
    var percent = (e.position/ e.totalSize);
    // Render a pretty progress bar
};
xhr.onreadystatechange = function(e) {
    if(this.readyState === 4) {
        // Handle file upload complete
    }
};
xhr.open('POST', '/upload', true);
xhr.setRequestHeader('X-FileName',file.name); // Pass the filename along
xhr.send(file);

Comments

@ গ্যারি: দুঃখিত, আমারও কিছুটা পোস্ট করা উচিত ছিল। আমি এইচটিএমএল 5-এ নতুন ড্রাগ-ড্রপ কার্যকারিতাটি ব্যবহার করছিলাম; আপনি এখানে একটি উদাহরণ খুঁজে পেতে পারেন: html5demos.com/file-api#view-source - কেবল "উত্স দেখুন" ক্লিক করুন। মূলত, ondropইভেন্টটির ভিতরে আপনি যা করতে পারেনvar file = e.dataTransfer.files[0]

— এমপেন

সম্ভবত প্রশ্নটি সম্পাদনা করা হয়েছে, তবে কিছু লোকের আলোচনার আলোচনায় আমি মনে করি যে ভ্যানিলা জেএস উত্তরটি বিষয়বস্তু বন্ধ রয়েছে যদি ওপি যদি কোন জিকুয়েরি সমাধানের জন্য জিজ্ঞাসা করে (প্রদত্ত একটি উপস্থিত থাকে) এবং এই জাতীয় উত্তরগুলি একটি পৃথক প্রশ্নের সাথে সম্পর্কিত।

— অ্যান্ডি

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

— এমপিএন

Answer 9

আপনি কেবল jQuery দিয়ে আপলোড করতে পারেন .ajax()।

এইচটিএমএল:

<form id="upload-form">
    <div>
        <label for="file">File:</label>
        <input type="file" id="file" name="file" />
        <progress class="progress" value="0" max="100"></progress>
    </div>
    <hr />
    <input type="submit" value="Submit" />
</form>

সিএসএস

.progress { display: none; }

javascript:

$(document).ready(function(ev) {
    $("#upload-form").on('submit', (function(ev) {
        ev.preventDefault();
        $.ajax({
            xhr: function() {
                var progress = $('.progress'),
                    xhr = $.ajaxSettings.xhr();

                progress.show();

                xhr.upload.onprogress = function(ev) {
                    if (ev.lengthComputable) {
                        var percentComplete = parseInt((ev.loaded / ev.total) * 100);
                        progress.val(percentComplete);
                        if (percentComplete === 100) {
                            progress.hide().val(0);
                        }
                    }
                };

                return xhr;
            },
            url: 'upload.php',
            type: 'POST',
            data: new FormData(this),
            contentType: false,
            cache: false,
            processData: false,
            success: function(data, status, xhr) {
                // ...
            },
            error: function(xhr, status, error) {
                // ...
            }
       });
    }));
});

Comments

@ রেডেন ব্ল্যাক কেবল jQuery।

— জায়ন আলী

আপলোডের অগ্রগতি কিভাবে পাবেন?

— আলী শরাফাত

Answer 10

অতীতে আমি এটি করার সবচেয়ে সহজ এবং সবচেয়ে দৃ way় উপায়টি হ'ল কেবল আপনার ফর্মের সাথে একটি লুকানো আইফ্রেম ট্যাগটি লক্ষ্যবস্তু করা - তবে এটি পৃষ্ঠাটি পুনরায় লোড না করেই iframe এর মধ্যে জমা দেওয়া হবে।

এটি যদি আপনি এইচটিএমএল ব্যতীত কোনও প্লাগইন, জাভাস্ক্রিপ্ট বা "যাদু" এর অন্য কোনও রূপ ব্যবহার করতে না চান is অবশ্যই আপনি এটি জাভাস্ক্রিপ্টের সাথে একত্রিত করতে পারেন বা আপনার কী আছে ...

<form target="iframe" action="" method="post" enctype="multipart/form-data">
    <input name="file" type="file" />
    <input type="button" value="Upload" />
</form>

<iframe name="iframe" id="iframe" style="display:none" ></iframe>

আপনি onLoadসার্ভার ত্রুটি বা সাফল্যের প্রতিক্রিয়াগুলির জন্য iframe এর সামগ্রীগুলি এবং তারপরে ব্যবহারকারীকে আউটপুটও পড়তে পারেন ।

ক্রোম, আইফ্রেমস এবং অন্লোড

-নোট- আপলোড / ডাউনলোড করার সময় আপনি যদি কোনও ইউআই ব্লকার সেটআপ করতে আগ্রহী হন তবে আপনাকে কেবল পড়া চালিয়ে যাওয়া দরকার

ক্রোম যখন ফাইল স্থানান্তর করতে ব্যবহৃত হয় তখন iframe এর জন্য অন্লোড ইভেন্টটি ট্রিগার করে না। ফায়ারফক্স, আইই এবং এজ সবই ফাইল স্থানান্তরের জন্য অলোডলোড ইভেন্টটিকে আগুন ধরিয়ে দেয়।

আমি ক্রোমের জন্য কাজ করেছিলাম এমন একমাত্র সমাধান হ'ল কুকি ব্যবহার করা।

মূলত এটি করতে যখন আপলোড / ডাউনলোড শুরু হয়:

• [ক্লায়েন্ট সাইড] একটি কুকির অস্তিত্ব সন্ধানের জন্য একটি বিরতি শুরু করুন
• [সার্ভার সাইড] ফাইল ডেটা দিয়ে আপনার যা যা প্রয়োজন তা করুন
• [সার্ভার সাইড] ক্লায়েন্টের পাশের ব্যবধানের জন্য কুকি সেট করুন
• [ক্লায়েন্ট সাইড] ইন্টারভাল কুকি দেখে এবং এটি ਆਨ-ইভেন্টের মতো ব্যবহার করে। উদাহরণস্বরূপ আপনি একটি ইউআই ব্লকার শুরু করতে পারেন এবং তারপরে অনলোড (বা কুকি তৈরি হওয়ার পরে) আপনি ইউআই ব্লকারকে সরিয়ে ফেলুন।

এর জন্য কুকি ব্যবহার করা কুৎসিত তবে এটি কার্যকর।

ডাউনলোড করার সময় আমি ক্রোমের জন্য এই সমস্যাটি পরিচালনা করতে একটি jQuery প্লাগইন তৈরি করেছি, আপনি এখানে খুঁজে পেতে পারেন

https://github.com/ArtisticPhoenix/jQuery-Plugins/blob/master/iDownloader.js

একই বেসিক প্রিন্সিপাল আপলোডের ক্ষেত্রেও প্রযোজ্য।

ডাউনলোডার ব্যবহার করতে (অবশ্যই জেএস অন্তর্ভুক্ত করুন)

 $('body').iDownloader({
     "onComplete" : function(){
          $('#uiBlocker').css('display', 'none'); //hide ui blocker on complete
     }
 });

 $('somebuttion').click( function(){
      $('#uiBlocker').css('display', 'block'); //block the UI
      $('body').iDownloader('download', 'htttp://example.com/location/of/download');
 });

সার্ভার সাইডে, ফাইল ডেটা স্থানান্তর করার ঠিক আগে কুকি তৈরি করুন

 setcookie('iDownloader', true, time() + 30, "/");

প্লাগইনটি কুকি দেখতে পাবে এবং তারপরে onCompleteকলব্যাকটি ট্রিগার করবে ।

Comments

আমি এটা ভালোবাসি. যদি কেবল কেউই এই উজ্জ্বল সমাধান সহ সম্ভাব্য সমস্যাগুলি উল্লেখ করতে পারে। সমাধান পাওয়া গেলে লোকেরা কেন এলোমেলো করে এবং এই ক্লঙ্কি লাইব্রেরি এবং প্লাগইনগুলি ব্যবহার করে তা আমি সত্যিই বুঝতে পারি না।

— ইয়েভেগেনি আফানসিয়েভ

হ্যাঁ, আমি অনুমান করি কারণ আপলোড করার সময় কিছু অগ্রগতির তথ্য দেখানো হবে।

— প্রখর মিশ্র

Answer 11

আমি যে সমাধানটি পেয়েছি তা হ'ল <form>লক্ষ্যটি একটি লুকানো আইফ্রেম। এরপরে আইফ্রেমটি এটি সম্পূর্ণরূপে ব্যবহারকারীর কাছে প্রদর্শন করতে জেএস চালাতে পারে (পৃষ্ঠা লোডে)।

Comments

আমি এই উত্তরে আগ্রহী, আপনার কি কোনও ডেমো লিঙ্ক করতে পারেন?

— lfender6445

Answer 12

আমি এটি একটি রেল পরিবেশে লিখেছি । আপনি যদি লাইটওয়েট jQuery- ফর্ম প্লাগইন ব্যবহার করেন তবে এটি জাভাস্ক্রিপ্টের প্রায় পাঁচটি লাইন।

স্ট্যান্ডার্ডটি remote_form_forমাল্টি-পার্ট ফর্ম জমা বোঝে না বলে এজেএক্স আপলোড করা চ্যালেঞ্জ । এটি ফাইলের ডেটা প্রেরণ করতে যাচ্ছে না রেলরা আজাদের অনুরোধটি দিয়ে ফিরে চাচ্ছে।

এখানেই jQuery- ফর্ম প্লাগইন কার্যকর হয়।

এটির জন্য রেল কোডগুলি এখানে:

<% remote_form_for(:image_form, 
                   :url => { :controller => "blogs", :action => :create_asset }, 
                   :html => { :method => :post, 
                              :id => 'uploadForm', :multipart => true }) 
                                                                        do |f| %>
 Upload a file: <%= f.file_field :uploaded_data %>
<% end %>

এখানে সম্পর্কিত জাভাস্ক্রিপ্ট:

$('#uploadForm input').change(function(){
 $(this).parent().ajaxSubmit({
  beforeSubmit: function(a,f,o) {
   o.dataType = 'json';
  },
  complete: function(XMLHttpRequest, textStatus) {
   // XMLHttpRequest.responseText will contain the URL of the uploaded image.
   // Put it in an image element you create, or do with it what you will.
   // For example, if you have an image elemtn with id "my_image", then
   //  $('#my_image').attr('src', XMLHttpRequest.responseText);
   // Will set that image tag to display the uploaded image.
  },
 });
});

এবং এখানে রেলগুলি নিয়ন্ত্রক পদক্ষেপ, বেশ ভ্যানিলা:

 @image = Image.new(params[:image_form])
 @image.save
 render :text => @image.public_filename

আমি ব্লগগিটির সাথে গত কয়েক সপ্তাহ ধরে এটি ব্যবহার করে আসছি এবং এটি চ্যাম্পের মতো কাজ করেছে।

Answer 13

সিম্পল অ্যাজাক্স আপলোডার হ'ল আরেকটি বিকল্প:

https://github.com/LPology/Simple-Ajax-Uploader

• ক্রস ব্রাউজার - আই 7 +, ফায়ারফক্স, ক্রোম, সাফারি, অপেরাতে কাজ করে
• এমনকি একাধিক- HTML5 ব্রাউজারগুলিতে - একাধিক, সমবর্তী আপলোডগুলি সমর্থন করে
• কোনও ফ্ল্যাশ বা বাহ্যিক সিএসএস নেই - কেবল একটি 5 কেবি জাভাস্ক্রিপ্ট ফাইল
• সম্পূর্ণ ক্রস ব্রাউজারের অগ্রগতি বারের জন্য PHচ্ছিক, অন্তর্নির্মিত সমর্থন (পিএইচপি এর এপিসি এক্সটেনশন ব্যবহার করে)
• নমনীয় এবং অত্যন্ত স্বনির্ধারিত - আপলোড বোতাম হিসাবে কোনও উপাদান ব্যবহার করুন, আপনার নিজস্ব অগ্রগতি সূচককে স্টাইল করুন
• কোনও ফর্মের প্রয়োজন নেই, কেবল একটি উপাদান সরবরাহ করুন যা আপলোড বোতাম হিসাবে পরিবেশন করবে
• এমআইটি লাইসেন্স - বাণিজ্যিক প্রকল্পে বিনামূল্যে ব্যবহারযোগ্য

ব্যবহারের উদাহরণ:

var uploader = new ss.SimpleUpload({
    button: $('#uploadBtn'), // upload button
    url: '/uploadhandler', // URL of server-side upload handler
    name: 'userfile', // parameter name of the uploaded file
    onSubmit: function() {
        this.setProgressBar( $('#progressBar') ); // designate elem as our progress bar
    },
    onComplete: function(file, response) {
        // do whatever after upload is finished
    }
});

Comments

এটি এখন পর্যন্ত সবচেয়ে প্রতিশ্রুতিবদ্ধ বলে মনে হচ্ছে, আপনি আমাকে এখানে রেখেছিলেন IE7+! এখনই চেষ্টা করে দেখছি। ধন্যবাদ

— পিয়ের

Answer 14

jQuery আপলোড আরও একটি ভাল প্লাগইন যা আমি ফাইলগুলি আপলোড করার আগে ব্যবহার করেছি। জাভাস্ক্রিপ্ট কোড নিম্নলিখিত হিসাবে সহজ: কোড। তবে নতুন সংস্করণটি ইন্টারনেট এক্সপ্লোরারে কাজ করে না।

$('#file_upload').uploadify({
    'swf': '/public/js/uploadify.swf',
    'uploader': '/Upload.ashx?formGuid=' + $('#formGuid').val(),
    'cancelImg': '/public/images/uploadify-cancel.png',
    'multi': true,
    'onQueueComplete': function (queueData) {
        // ...
    },
    'onUploadStart': function (file) {
        // ...
    }
});

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

$(document).ready(function () {
    $('#btn_Upload').live('click', AjaxFileUpload);
});

function AjaxFileUpload() {
    var fileInput = document.getElementById("#Uploader");
    var file = fileInput.files[0];
    var fd = new FormData();
    fd.append("files", file);
    var xhr = new XMLHttpRequest();
    xhr.open("POST", 'Uploader.ashx');
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
             alert('success');
        }
        else if (uploadResult == 'success')
            alert('error');
    };
    xhr.send(fd);
}

Comments

আপলোডটি কয়েক বছর ধরে মারা গেছে। সমর্থিত বা রক্ষণাবেক্ষণ করা হয় না।

— রায় নিকোলাস

Answer 15

কীভাবে ফাইল আপলোড করবেন তার আরও একটি সমাধান এখানে ( কোনও প্লাগইন ছাড়াই )

সাধারণ জাভাস্ক্রিপ্ট এবং এজেএক্স ব্যবহার করে (অগ্রগতির বার সহ)

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

<form id="upload_form" enctype="multipart/form-data" method="post">
    <input type="file" name="file1" id="file1"><br>
    <input type="button" value="Upload File" onclick="uploadFile()">
    <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
    <h3 id="status"></h3>
    <p id="loaded_n_total"></p>
</form>

জেএস অংশ

function _(el){
    return document.getElementById(el);
}
function uploadFile(){
    var file = _("file1").files[0];
    // alert(file.name+" | "+file.size+" | "+file.type);
    var formdata = new FormData();
    formdata.append("file1", file);
    var ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", progressHandler, false);
    ajax.addEventListener("load", completeHandler, false);
    ajax.addEventListener("error", errorHandler, false);
    ajax.addEventListener("abort", abortHandler, false);
    ajax.open("POST", "file_upload_parser.php");
    ajax.send(formdata);
}
function progressHandler(event){
    _("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
    var percent = (event.loaded / event.total) * 100;
    _("progressBar").value = Math.round(percent);
    _("status").innerHTML = Math.round(percent)+"% uploaded... please wait";
}
function completeHandler(event){
    _("status").innerHTML = event.target.responseText;
    _("progressBar").value = 0;
}
function errorHandler(event){
    _("status").innerHTML = "Upload Failed";
}
function abortHandler(event){
    _("status").innerHTML = "Upload Aborted";
}

পিএইচপি অংশ

<?php
$fileName = $_FILES["file1"]["name"]; // The file name
$fileTmpLoc = $_FILES["file1"]["tmp_name"]; // File in the PHP tmp folder
$fileType = $_FILES["file1"]["type"]; // The type of file it is
$fileSize = $_FILES["file1"]["size"]; // File size in bytes
$fileErrorMsg = $_FILES["file1"]["error"]; // 0 for false... and 1 for true
if (!$fileTmpLoc) { // if file not chosen
    echo "ERROR: Please browse for a file before clicking the upload button.";
    exit();
}
if(move_uploaded_file($fileTmpLoc, "test_uploads/$fileName")){ // assuming the directory name 'test_uploads'
    echo "$fileName upload is complete";
} else {
    echo "move_uploaded_file function failed";
}
?>

এখানে উদাহরণ অ্যাপ্লিকেশন

Answer 16

var formData=new FormData();
formData.append("fieldname","value");
formData.append("image",$('[name="filename"]')[0].files[0]);

$.ajax({
    url:"page.php",
    data:formData,
    type: 'POST',
    dataType:"JSON",
    cache: false,
    contentType: false,
    processData: false,
    success:function(data){ }
});

আপনি চিত্র সহ আপনার সমস্ত মান পোস্ট করতে ফর্ম ডেটা ব্যবহার করতে পারেন।

Comments

দ্রষ্টব্য: cache: falseকোনও POSTঅনুরোধ হিসাবে POST কখনই ক্যাশে হয় তা অনর্থক।

— কোডিং হয়ে গেছে

@ বিবেক আছাইথাম্বি, আমি এই ত্রুটি পেয়েছি:TypeError: Argument 1 of FormData.constructor does not implement interface HTMLFormElement.

— মোমবাতি জ্যাক

Answer 17

নীচে পদক্ষেপগুলি Jquery ব্যবহার করে অ্যাসিঙ্ক্রোনালি ফাইল আপলোড করতে:

পদক্ষেপ 1 আপনার প্রকল্পে নুগেট ম্যানেজারটি খুলুন এবং প্যাকেজ যুক্ত করুন (jquery ফাইলআপলোড (কেবল আপনার অনুসন্ধান বাক্সে এটি লিখতে হবে এটি এসে এটি ইনস্টল করবে will)) ইউআরএল: https://github.com/blueimp/jQuery- ফাইল- আপলোড

পদক্ষেপ 2 HTML ফাইলগুলিতে স্ক্রিপ্টগুলির নীচে যুক্ত করুন, যা উপরের প্যাকেজটি চালিয়ে ইতিমধ্যে প্রকল্পে যুক্ত হয়েছে:

jquery.ui.widget.js

jquery.iframe-transport.js

jquery.fileupload.js

পদক্ষেপ 3 নীচের কোড অনুসারে ফাইল আপলোড নিয়ন্ত্রণ লিখুন:

<input id="upload" name="upload" type="file" />

পদক্ষেপ 4 নীচে হিসাবে আপলোড ফাইল হিসাবে একটি জেএস পদ্ধতি লিখুন:

 function uploadFile(element) {

            $(element).fileupload({

                dataType: 'json',
                url: '../DocumentUpload/upload',
                autoUpload: true,
                add: function (e, data) {           
                  // write code for implementing, while selecting a file. 
                  // data represents the file data. 
                  //below code triggers the action in mvc controller
                  data.formData =
                                    {
                                     files: data.files[0]
                                    };
                  data.submit();
                },
                done: function (e, data) {          
                   // after file uploaded
                },
                progress: function (e, data) {

                   // progress
                },
                fail: function (e, data) {

                   //fail operation
                },
                stop: function () {

                  code for cancel operation
                }
            });

        };

পদক্ষেপ 5 নীচে অনুযায়ী প্রক্রিয়া আরম্ভ করতে প্রস্তুত ফাংশন কল উপাদান ফাইল আপলোড:

$(document).ready(function()
{
    uploadFile($('#upload'));

});

পদক্ষেপ M নীচে অনুযায়ী এমভিসি নিয়ন্ত্রক এবং অ্যাকশন লিখুন:

public class DocumentUploadController : Controller
    {       

        [System.Web.Mvc.HttpPost]
        public JsonResult upload(ICollection<HttpPostedFileBase> files)
        {
            bool result = false;

            if (files != null || files.Count > 0)
            {
                try
                {
                    foreach (HttpPostedFileBase file in files)
                    {
                        if (file.ContentLength == 0)
                            throw new Exception("Zero length file!");                       
                        else 
                            //code for saving a file

                    }
                }
                catch (Exception)
                {
                    result = false;
                }
            }


            return new JsonResult()
                {
                    Data=result
                };


        }

    }

Answer 18

একটি আধুনিক পদ্ধতির jQuery ছাড়া ব্যবহার করা FileList থেকে অবজেক্ট আপনি ফিরে পেতে <input type="file">একটি ফাইল (গুলি) যখন ব্যবহারকারী নির্বাচন এবং তারপর ব্যবহার পান FileList একটি প্রায় আবৃত পোষ্ট করতে FormData অবজেক্ট।

// The input DOM element // <input type="file">
const inputElement = document.querySelector('input[type=file]');

// Listen for a file submit from user
inputElement.addEventListener('change', () => {
    const data = new FormData();
    data.append('file', inputElement.files[0]);
    data.append('imageName', 'flower');

    // You can then post it to your server.
    // Fetch can accept an object of type FormData on its  body
    fetch('/uploadImage', {
        method: 'POST',
        body: data
    });
});

Comments

স্পষ্টতই আইই

— মার্কো ডেমাইও

Answer 19

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

<from action="" id="formContent" method="post" enctype="multipart/form-data">
    <span>File</span>
    <input type="file" id="file" name="file" size="10"/>
    <input id="uploadbutton" type="button" value="Upload"/>
</form>

জমা দেওয়া ডেটা একটি ফর্মডাটা। আপনার jQuery এ, নীচের মত ফর্ম ফাইলটি জমা দিতে বোতাম ক্লিকের পরিবর্তে একটি ফর্ম জমা ফাংশন ব্যবহার করুন।

$(document).ready(function () {
   $("#formContent").submit(function(e){

     e.preventDefault();
     var formdata = new FormData(this);

 $.ajax({
     url: "ajax_upload_image.php",
     type: "POST",
     data: formdata,
     mimeTypes:"multipart/form-data",
     contentType: false,
     cache: false,
     processData: false,
     success: function(){

     alert("successfully submitted");

     });
   });
});

আরও বিশদ দেখুন

Answer 20

নমুনা: আপনি jQuery ব্যবহার করেন, আপনি একটি আপলোড ফাইল সহজ করতে পারেন। এটি একটি ছোট এবং শক্তিশালী jQuery প্লাগইন, http://jquery.malsup.com/form/ ।

উদাহরণ

var $bar   = $('.ProgressBar');
$('.Form').ajaxForm({
  dataType: 'json',

  beforeSend: function(xhr) {
    var percentVal = '0%';
    $bar.width(percentVal);
  },

  uploadProgress: function(event, position, total, percentComplete) {
    var percentVal = percentComplete + '%';
    $bar.width(percentVal)
  },

  success: function(response) {
    // Response
  }
});

আমি আশা করি এটি সহায়ক হবে

Answer 21

তুমি ব্যবহার করতে পার

$(function() {
    $("#file_upload_1").uploadify({
        height        : 30,
        swf           : '/uploadify/uploadify.swf',
        uploader      : '/uploadify/uploadify.php',
        width         : 120
    });
});

ডেমো

Answer 22

| এইচটিএমএল 5 এর রিডএএসডাটা URL () বা কিছু বেস 64 এনকোডার ব্যবহার করে ফাইলকে বেস 64 এ রূপান্তর করুন । ফিডল এখানে

var reader = new FileReader();

        reader.onload = function(readerEvt) {
            var binaryString = readerEvt.target.result;
            document.getElementById("base64textarea").value = btoa(binaryString);
        };

        reader.readAsBinaryString(file);

তারপরে পুনরুদ্ধার করতে:

window.open("data:application/octet-stream;base64," + base64);

Answer 23

এক্সএমএলএইচটিপিআরকোয়েস্ট (ফ্ল্যাশ এবং আইফ্রেমে নির্ভরতা ছাড়াই) ব্যবহার করে অ্যাসিঙ্ক্রোনাস আপলোড করার ক্ষেত্রে ফাইলের নামের সাথে আপনি অতিরিক্ত পরামিতিগুলি পাস করতে পারেন। ফর্মডাটা সহ অতিরিক্ত প্যারামিটার মান যুক্ত করুন এবং আপলোডের অনুরোধটি প্রেরণ করুন।

---

var formData = new FormData();
formData.append('parameter1', 'value1');
formData.append('parameter2', 'value2'); 
formData.append('file', $('input[type=file]')[0].files[0]);

$.ajax({
    url: 'post back url',
    data: formData,
// other attributes of AJAX
});

---

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

Answer 24

দেখুন কোনো ফাইল আপলোড পদ্ধতিকে হ্যান্ডলিং, অ্যাসিঙ্ক্রোনাস এখানে: https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

লিঙ্ক থেকে নমুনা

<?php
if (isset($_FILES['myFile'])) {
    // Example:
    move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']);
    exit;
}
?><!DOCTYPE html>
<html>
<head>
    <title>dnd binary upload</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
        function sendFile(file) {
            var uri = "/index.php";
            var xhr = new XMLHttpRequest();
            var fd = new FormData();

            xhr.open("POST", uri, true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // Handle response.
                    alert(xhr.responseText); // handle response.
                }
            };
            fd.append('myFile', file);
            // Initiate a multipart/form-data upload
            xhr.send(fd);
        }

        window.onload = function() {
            var dropzone = document.getElementById("dropzone");
            dropzone.ondragover = dropzone.ondragenter = function(event) {
                event.stopPropagation();
                event.preventDefault();
            }

            dropzone.ondrop = function(event) {
                event.stopPropagation();
                event.preventDefault();

                var filesArray = event.dataTransfer.files;
                for (var i=0; i<filesArray.length; i++) {
                    sendFile(filesArray[i]);
                }
            }
        }
    </script>
</head>
<body>
    <div>
        <div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;">Drag & drop your file here...</div>
    </div>
</body>
</html>

Answer 25

এটা আমার সমাধান।

<form enctype="multipart/form-data">    

    <div class="form-group">
        <label class="control-label col-md-2" for="apta_Description">Description</label>
        <div class="col-md-10">
            <input class="form-control text-box single-line" id="apta_Description" name="apta_Description" type="text" value="">
        </div>
    </div>

    <input name="file" type="file" />
    <input type="button" value="Upload" />
</form>

এবং জেএস

<script>

    $(':button').click(function () {
        var formData = new FormData($('form')[0]);
        $.ajax({
            url: '@Url.Action("Save", "Home")',  
            type: 'POST',                
            success: completeHandler,
            data: formData,
            cache: false,
            contentType: false,
            processData: false
        });
    });    

    function completeHandler() {
        alert(":)");
    }    
</script>

নিয়ামক

[HttpPost]
public ActionResult Save(string apta_Description, HttpPostedFileBase file)
{
    [...]
}

Comments

আপনি নিজের উত্তরের সাথে একরকম কাঠামো মিশিয়েছেন বলে মনে হচ্ছে। আপনার উত্তরটি কোন কাঠামোর জন্য ব্যবহারযোগ্য তা উল্লেখ করা উচিত। আরও ভাল, সমস্ত ফ্রেমওয়ার্ক স্টাফগুলি সরিয়ে ফেলুন এবং উত্থাপিত প্রশ্নের শুধুমাত্র একটি উত্তর উপস্থাপন করুন।

— জিরো 3

সুতরাং আসলে "এমভিসি" নামে একটি এমভিসি কাঠামো আছে? এবং এটি csharpish সিনট্যাক্স ব্যবহার করে? এটা নিষ্ঠুর।

— ননচিপ

Answer 26

এইচটিএমএল 5 এবং জাভাস্ক্রিপ্ট ব্যবহার করে , অ্যাসিঙ্ক আপলোড করা বেশ সহজ, আমি আপনার এইচটিএমএল সহ আপলোডিং যুক্তি তৈরি করি, এটি এপিআইর প্রয়োজন হিসাবে এটি পুরোপুরি কাজ করছে না, তবে এটি কীভাবে কাজ করে তা প্রদর্শন করে, যদি /uploadআপনার ওয়েবসাইটের মূল থেকে ডেকে আন্ডারপয়েন্ট থাকে , এই কোডটি আপনার পক্ষে কাজ করা উচিত:

const asyncFileUpload = () => {
  const fileInput = document.getElementById("file");
  const file = fileInput.files[0];
  const uri = "/upload";
  const xhr = new XMLHttpRequest();
  xhr.upload.onprogress = e => {
    const percentage = e.loaded / e.total;
    console.log(percentage);
  };
  xhr.onreadystatechange = e => {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log("file uploaded");
    }
  };
  xhr.open("POST", uri, true);
  xhr.setRequestHeader("X-FileName", file.name);
  xhr.send(file);
}

<form>
  <span>File</span>
  <input type="file" id="file" name="file" size="10" />
  <input onclick="asyncFileUpload()" id="upload" type="button" value="Upload" />
</form>

এক্সএমএলএইচটিপিআরকুইস সম্পর্কে আরও কিছু তথ্য:

এক্সএমএলএইচটিপিআরকোয়েস্ট অবজেক্ট

সমস্ত আধুনিক ব্রাউজারগুলি XMLHttpRequest অবজেক্টটিকে সমর্থন করে। XMLHttpRequest অবজেক্টটি পর্দার আড়ালে একটি ওয়েব সার্ভারের সাথে ডেটা বিনিময় করতে ব্যবহার করা যেতে পারে। এর অর্থ পুরো পৃষ্ঠাটি পুনরায় লোড না করে কোনও ওয়েব পৃষ্ঠার অংশগুলি আপডেট করা সম্ভব।

একটি এক্সএমএলএইচটিপিআরকিউয়েস্ট অবজেক্ট তৈরি করুন

সমস্ত আধুনিক ব্রাউজারগুলিতে (ক্রোম, ফায়ারফক্স, আই 7 +, এজ, সাফারি, অপেরা) একটি বিল্ট-ইন এক্সএমএলএইচটিপিআরকোয়েস্ট অবজেক্ট রয়েছে।

এক্সএমএলএইচটিএইচপিআরকোয়েস্ট অবজেক্ট তৈরির জন্য সিনট্যাক্স:

পরিবর্তনশীল = নতুন এক্সএমএলএইচটিএইচপিআরকেস্ট ();

ডোমেনগুলি জুড়ে অ্যাক্সেস করুন

সুরক্ষার কারণে, আধুনিক ব্রাউজারগুলি ডোমেন জুড়ে অ্যাক্সেসের অনুমতি দেয় না।

এর অর্থ হ'ল ওয়েব পৃষ্ঠা এবং এক্সএমএল ফাইল উভয়ই এটি লোড করার চেষ্টা করে, অবশ্যই একই সার্ভারে থাকা উচিত।

ডাব্লু 3 স্কুলগুলির উদাহরণগুলি ডাব্লু 3 স্কুলগুলিতে ডোমেনে থাকা সমস্ত খোলা এক্সএমএল ফাইল রয়েছে।

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

আরও তথ্যের জন্য, আপনি এখানে পড়া চালিয়ে যেতে পারেন ...

Answer 27

আপনি জাভাস্ক্রিপ্ট দ্বারা আরও নতুন আনয়ন API ব্যবহার করতে পারেন । এটার মত:

function uploadButtonCLicked(){
    var input = document.querySelector('input[type="file"]')

    fetch('/url', {
      method: 'POST',
      body: input.files[0]
    }).then(res => res.json())   // you can do something with response
      .catch(error => console.error('Error:', error))
      .then(response => console.log('Success:', response));
}                               

সুবিধা: ফেচ এপিআই স্থানীয়ভাবে সমস্ত আধুনিক ব্রাউজার দ্বারা সমর্থিত , তাই আপনাকে কোনও কিছু আমদানি করতে হবে না। এছাড়াও, নোট করুন যে আনুন () একটি প্রতিশ্রুতি দেয় যা তারপরে .then(..code to handle response..)অ্যাসিঙ্ক্রোনালি ব্যবহার করে পরিচালনা করা হয় ।

Answer 28

আপনি জাভাস্ক্রিপ্ট বা jQuery ব্যবহার করে অসিনক্রোনাস একাধিক ফাইল আপলোড করতে পারেন এবং এটি কোনও প্লাগইন ব্যবহার না করেই করতে পারেন। আপনি অগ্রগতি নিয়ন্ত্রণে ফাইল আপলোডের আসল সময়ের অগ্রগতিও দেখাতে পারেন। আমি দুটি দুর্দান্ত লিঙ্ক জুড়ে এসেছি -

1. অগ্রগতি বারের সাথে এএসপি.নেট ওয়েব ফর্ম ভিত্তিক মুলিটপল ফাইল আপলোড বৈশিষ্ট্য
2. এএসপি.এনইটি এমভিসি ভিত্তিক একাধিক ফাইল আপলোড jQuery এ তৈরি

সার্ভার সাইড ল্যাঙ্গুয়েজটি সি # তবে আপনি পিএইচপি এর মতো অন্যান্য ভাষার সাথে এটি কাজ করার জন্য কিছু পরিবর্তন করতে পারেন।

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

ভিউতে এইচটিএমএলে ফাইল আপলোড নিয়ন্ত্রণ তৈরি করুন:

<form method="post" asp-action="Add" enctype="multipart/form-data">
    <input type="file" multiple name="mediaUpload" />
    <button type="submit">Submit</button>
</form>

আপনার কন্ট্রোলারে এখন অ্যাকশন পদ্ধতি তৈরি করুন:

[HttpPost]
public async Task<IActionResult> Add(IFormFile[] mediaUpload)
{
    //looping through all the files
    foreach (IFormFile file in mediaUpload)
    {
        //saving the files
        string path = Path.Combine(hostingEnvironment.WebRootPath, "some-folder-path"); 
        using (var stream = new FileStream(path, FileMode.Create))
        {
            await file.CopyToAsync(stream);
        }
    }
}

হোস্টিং এনভায়রনমেন্ট ভেরিয়েবল IHostingEn পরিবেশ টাইপ টাইপ যা নির্ভরতা ইনজেকশন ব্যবহার করে নিয়ামককে ইনজেকশন দেওয়া যেতে পারে, যেমন:

private IHostingEnvironment hostingEnvironment;
public MediaController(IHostingEnvironment environment)
{
    hostingEnvironment = environment;
}

Comments

আপনি কি উত্তরের সমাধানের सारটি অন্তর্ভুক্ত করতে পারেন, কারণ লিঙ্কযুক্ত ওয়েবসাইটটি পরিবর্তন হয় বা অফলাইনে চলে গেলে এটি অন্যথায় অকেজো হতে পারে।

— দিমা কোজভিন

Answer 29

পিএইচপি-র জন্য, https://developer.hyvor.com/php/image-upload-ajax-php-mysql দেখুন

এইচটিএমএল

<html>
<head>
    <title>Image Upload with AJAX, PHP and MYSQL</title>
</head>
<body>
<form onsubmit="submitForm(event);">
    <input type="file" name="image" id="image-selecter" accept="image/*">
    <input type="submit" name="submit" value="Upload Image">
</form>
<div id="uploading-text" style="display:none;">Uploading...</div>
<img id="preview">
</body>
</html>

অবশ্যই JAVASCRIPT

var previewImage = document.getElementById("preview"),  
    uploadingText = document.getElementById("uploading-text");

function submitForm(event) {
    // prevent default form submission
    event.preventDefault();
    uploadImage();
}

function uploadImage() {
    var imageSelecter = document.getElementById("image-selecter"),
        file = imageSelecter.files[0];
    if (!file) 
        return alert("Please select a file");
    // clear the previous image
    previewImage.removeAttribute("src");
    // show uploading text
    uploadingText.style.display = "block";
    // create form data and append the file
    var formData = new FormData();
    formData.append("image", file);
    // do the ajax part
    var ajax = new XMLHttpRequest();
    ajax.onreadystatechange = function() {
        if (this.readyState === 4 && this.status === 200) {
            var json = JSON.parse(this.responseText);
            if (!json || json.status !== true) 
                return uploadError(json.error);

            showImage(json.url);
        }
    }
    ajax.open("POST", "upload.php", true);
    ajax.send(formData); // send the form data
}

পিএইচপি

<?php
$host = 'localhost';
$user = 'user';
$password = 'password';
$database = 'database';
$mysqli = new mysqli($host, $user, $password, $database);


 try {
    if (empty($_FILES['image'])) {
        throw new Exception('Image file is missing');
    }
    $image = $_FILES['image'];
    // check INI error
    if ($image['error'] !== 0) {
        if ($image['error'] === 1) 
            throw new Exception('Max upload size exceeded');

        throw new Exception('Image uploading error: INI Error');
    }
    // check if the file exists
    if (!file_exists($image['tmp_name']))
        throw new Exception('Image file is missing in the server');
    $maxFileSize = 2 * 10e6; // in bytes
    if ($image['size'] > $maxFileSize)
        throw new Exception('Max size limit exceeded'); 
    // check if uploaded file is an image
    $imageData = getimagesize($image['tmp_name']);
    if (!$imageData) 
        throw new Exception('Invalid image');
    $mimeType = $imageData['mime'];
    // validate mime type
    $allowedMimeTypes = ['image/jpeg', 'image/png', 'image/gif'];
    if (!in_array($mimeType, $allowedMimeTypes)) 
        throw new Exception('Only JPEG, PNG and GIFs are allowed');

    // nice! it's a valid image
    // get file extension (ex: jpg, png) not (.jpg)
    $fileExtention = strtolower(pathinfo($image['name'] ,PATHINFO_EXTENSION));
    // create random name for your image
    $fileName = round(microtime(true)) . mt_rand() . '.' . $fileExtention; // anyfilename.jpg
    // Create the path starting from DOCUMENT ROOT of your website
    $path = '/examples/image-upload/images/' . $fileName;
    // file path in the computer - where to save it 
    $destination = $_SERVER['DOCUMENT_ROOT'] . $path;

    if (!move_uploaded_file($image['tmp_name'], $destination))
        throw new Exception('Error in moving the uploaded file');

    // create the url
    $protocol = stripos($_SERVER['SERVER_PROTOCOL'],'https') === true ? 'https://' : 'http://';
    $domain = $protocol . $_SERVER['SERVER_NAME'];
    $url = $domain . $path;
    $stmt = $mysqli -> prepare('INSERT INTO image_uploads (url) VALUES (?)');
    if (
        $stmt &&
        $stmt -> bind_param('s', $url) &&
        $stmt -> execute()
    ) {
        exit(
            json_encode(
                array(
                    'status' => true,
                    'url' => $url
                )
            )
        );
    } else 
        throw new Exception('Error in saving into the database');

} catch (Exception $e) {
    exit(json_encode(
        array (
            'status' => false,
            'error' => $e -> getMessage()
        )
    ));
}

Answer 30

আপনি https://uppy.io এর মতো কিছু ব্যবহার করার বিষয়েও বিবেচনা করতে পারেন ।

এটি পৃষ্ঠা থেকে দূরে নেভিগেশন ছাড়াই ফাইল আপলোড করে এবং ড্র্যাগ অ্যান্ড ড্রপ, ব্রাউজার ক্র্যাশ / ফ্ল্যাঙ্ক নেটওয়ার্কগুলির ক্ষেত্রে আপলোড পুনরায় শুরু করা এবং উদাহরণস্বরূপ ইনস্টাগ্রাম থেকে আমদানি করার মতো কয়েকটি বোনাস সরবরাহ করে। এটি উন্মুক্ত উত্স এবং jQuery / প্রতিক্রিয়া / কৌণিক / ভ্যুর উপর নির্ভর করে না, তবে এটির সাথে ব্যবহার করা যেতে পারে। দাবি অস্বীকার: এর স্রষ্টা হিসাবে আমি পক্ষপাতদুষ্ট;)

Comments

উপরের লিঙ্কটি মারা গেছে। এখানে গিথুব রয়েছে

— ক্রিস চার্লস

uppy.io কি ক্লাউডফ্লেয়ার + গিটহাব পৃষ্ঠাগুলি ব্যাকড হয়েছে এবং আমার জন্য? সরাসরি রেপো লিঙ্কটি এখনও কার্যকর তবে :)

— কেভিজেড