ফর্ম ছাড়াই ফাইল আপলোড

Question 1

যাইহোক কোনও ফর্ম ব্যবহার না করে, আমি কেবল <input type="file">jQuery ব্যবহার করে POST পদ্ধতি ব্যবহার করে 'আপলোড.এফপি' থেকে কোনও ফাইল / ফাইল পাঠাতে পারি । ইনপুট ট্যাগ কোনও ফর্ম ট্যাগের মধ্যে নেই। এটি পৃথকভাবে দাঁড়িয়ে। সুতরাং আমি 'অ্যাজ্যাক্সফর্ম' বা 'আজাক্স সাবমিট' এর মতো jQuery প্লাগইন ব্যবহার করতে চাই না।

Question 2

আপনি কোনও পোষ্ট অনুরোধের মাধ্যমে আপনার ডেটা জমা দেওয়ার জন্য ফর্মডাটা ব্যবহার করতে পারেন । এখানে একটি সহজ উদাহরণ:

var myFormData = new FormData();
myFormData.append('pictureFile', pictureInput.files[0]);

$.ajax({
  url: 'upload.php',
  type: 'POST',
  processData: false, // important
  contentType: false, // important
  dataType : 'json',
  data: myFormData
});

এজ্যাক্স অনুরোধ করার জন্য আপনাকে কোনও ফর্ম ব্যবহার করতে হবে না, যতক্ষণ না আপনি নিজের অনুরোধ সেটিংটি জানেন (যেমন ইউআরএল, পদ্ধতি এবং প্যারামিটার ডেটা)।

Question 3

এখানে সমস্ত উত্তর এখনও ফর্মডেটা এপিআই ব্যবহার করছে । "multipart/form-data"এটি কোনও ফর্ম ছাড়াই আপলোডের মতো । আপনি POSTঅনুরোধের বুকের অভ্যন্তরের সামগ্রী হিসাবে ফাইলটি সরাসরি আপলোড করতে পারেন xmlHttpRequest:

var xmlHttpRequest = new XMLHttpRequest();

var file = ...file handle...
var fileName = ...file name...
var target = ...target...
var mimeType = ...mime type...

xmlHttpRequest.open('POST', target, true);
xmlHttpRequest.setRequestHeader('Content-Type', mimeType);
xmlHttpRequest.setRequestHeader('Content-Disposition', 'attachment; filename="' + fileName + '"');
xmlHttpRequest.send(file);

Content-Typeএবং Content-Dispositionশিরোনামগুলি আমরা কী পাঠাচ্ছি তা বোঝাতে (মাইম-টাইপ এবং ফাইলের নাম) ব্যবহার করা হয়।

আমি এখানেও অনুরূপ উত্তর পোস্ট করেছি ।

Question 4

এই টিউটোরিয়ালের উপর ঝাঁকুনি, এটি করার একটি খুব প্রাথমিক উপায়:

$('your_trigger_element_selector').on('click', function(){    
    var data = new FormData();
    data.append('input_file_name', $('your_file_input_selector').prop('files')[0]);
    // append other variables to data if you want: data.append('field_name_x', field_value_x);

    $.ajax({
        type: 'POST',               
        processData: false, // important
        contentType: false, // important
        data: data,
        url: your_ajax_path,
        dataType : 'json',  
        // in PHP you can call and process file in the same way as if it was submitted from a form:
        // $_FILES['input_file_name']
        success: function(jsonData){
            ...
        }
        ...
    }); 
});

সঠিক ত্রুটি হ্যান্ডলিং যুক্ত করতে ভুলবেন না

Question 5

পদক্ষেপ 1: এইচটিএমএল কোডটি কোথায় রাখবেন এইচটিএমএল পৃষ্ঠা তৈরি করুন।

পদক্ষেপ 2: এইচটিএমএল কোড পৃষ্ঠায় নীচে (পাদচরণ) জাভাস্ক্রিপ্ট তৈরি করুন: এবং স্ক্রিপ্ট ট্যাগে জ্যাকারি কোড রাখুন।

পদক্ষেপ 3: পিএইচপি ফাইল এবং পিএইচপি কোড অনুলিপি তৈরি করুন। $.ajaxকোড url এ Jquery কোড পরে আপনার পিএইচপি ফাইলের নামটি প্রয়োগ করে name

জেএস

//$(document).on("change", "#avatar", function() {   // If you want to upload without a submit button 
$(document).on("click", "#upload", function() {
  var file_data = $("#avatar").prop("files")[0]; // Getting the properties of file from file field
  var form_data = new FormData(); // Creating object of FormData class
  form_data.append("file", file_data) // Appending parameter named file with properties of file_field to form_data
  form_data.append("user_id", 123) // Adding extra parameters to form_data
  $.ajax({
    url: "/upload_avatar", // Upload Script
    dataType: 'script',
    cache: false,
    contentType: false,
    processData: false,
    data: form_data, // Setting the data attribute of ajax with file_data
    type: 'post',
    success: function(data) {
      // Do something after Ajax completes 
    }
  });
});

এইচটিএমএল

<input id="avatar" type="file" name="avatar" />
<button id="upload" value="Upload" />

পিএইচপি

print_r($_FILES);
print_r($_POST);

Question 6

এই পগলিন সিম্পল আপলোড চেষ্টা করুন , কোনও ফর্মের প্রয়োজন নেই

এইচটিএমএল:

<input type="file" name="arquivo" id="simpleUpload" multiple >
<button type="button" id="enviar">Enviar</button>

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

$('#simpleUpload').simpleUpload({
  url: 'upload.php',
  trigger: '#enviar',
  success: function(data){
    alert('Envio com sucesso');

  }
});

Question 7

লোকটি হওয়ার জন্য দুঃখিত তবে অ্যাঙ্গুলারজেএস একটি সহজ এবং মার্জিত সমাধান দেয়।

আমি যে কোডটি ব্যবহার করি তা এখানে:

ngApp.controller('ngController', ['$upload',
function($upload) {

  $scope.Upload = function($files, index) {
    for (var i = 0; i < $files.length; i++) {
      var file = $files[i];
      $scope.upload = $upload.upload({
        file: file,
        url: '/File/Upload',
        data: {
          id: 1 //some data you want to send along with the file,
          name: 'ABC' //some data you want to send along with the file,
        },

      }).progress(function(evt) {

      }).success(function(data, status, headers, config) {
          alert('Upload done');
        }
      })
    .error(function(message) {
      alert('Upload failed');
    });
  }
};
}]);

.Hidden {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div data-ng-controller="ngController">
  <input type="button" value="Browse" onclick="$(this).next().click();" />
  <input type="file" ng-file-select="Upload($files, 1)" class="Hidden" />
</div>

স্নিপেট প্রসারিত করুন

সার্ভারের পাশে আমার কাছে একটি অ্যাকশন সহ এমভিসি কন্ট্রোলার রয়েছে যা অনুরোধ.ফাইলেস সংগ্রহে পাওয়া ফাইলগুলি সংরক্ষণ করে এবং একটি জসনআরসাল্ট ফিরিয়ে দেয়।

আপনি যদি AngularJS ব্যবহার করেন তবে এটি চেষ্টা করে দেখুন, দুঃখিত না হলে সাথী :-)