फॉर्म के बिना फाइल अपलोड करें

Question

किसी भी रूप का उपयोग किए बिना, क्या मैं सिर्फ <input type="file">jQuery का उपयोग करके POST विधि का उपयोग करके 'upload.php' से एक फ़ाइल / फाइलें भेज सकता हूं । इनपुट टैग किसी भी फॉर्म टैग के अंदर नहीं है। यह व्यक्तिगत रूप से खड़ा है। इसलिए मैं 'ajaxForm' या 'ajaxSubmit' जैसे jQuery प्लगइन्स का उपयोग नहीं करना चाहता।

Comments

यह कोशिश करें: uploadify.com लेकिन फ्लैश संस्करण का उपयोग करें। चलो, अपनी चट्टान को फेंक दो। मुझे यकीन नहीं है कि HTML5 संस्करण बिना फॉर्म के काम करता है। शायद होगा, लेकिन मुझे यकीन नहीं है।

— इस्माइल मिगेल

Arrr .... मुझे लगता है कि यह कहना है कि यह HTML 5 में काम करना चाहिए। लेकिन yera मंच संगतता के साथ व्याप्त होने वाला है 'कुछ वर्षों से अधिक पुराने ब्राउज़र। एक रूप बनाने में क्या नुकसान है, या डायनेमिक रूप से जेनेरेटर्स से एक फॉर्म जेनरेट करता है?

— यित्ज़ाक

Answer 1

आप अपने डेटा को POST अनुरोध द्वारा सबमिट करने के लिए FormData का उपयोग कर सकते हैं । ये रहा एक सरल उदाहरण:

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

जब तक आप अपना अनुरोध सेटिंग (जैसे url, विधि और पैरामीटर) नहीं जानते हैं, तब तक आपको ajax अनुरोध करने के लिए एक फॉर्म का उपयोग करने की आवश्यकता नहीं है।

Comments

IMHO यह सबसे अच्छा समाधान है, हालांकि एक और विकल्प का उपयोग करना है <iframe आपके अंदर एक नियमित पोस्ट वापस कर सकता है

— जॉन स्मिथ

हाँ यह सच है। पुराने ब्राउज़र, फॉर्मडाटा और ajax को फाइलों और समाधान को अपलोड करने के लिए समर्थन नहीं करते हैं यदि iframe का उपयोग उन ब्राउज़रों पर कमबैक के रूप में किया जाता है।

— ओमिड मोनशीज़ादेह

जोड़ने के लिए मत भूलना processData: falseऔर contentType: falseअवैध मंगलाचरण: करने के लिए सेटिंग्स आपत्ति वरना आप प्राप्त करेंगे Uncaught TypeError

— jsmiff

दोस्तों, आपने मेरी जान बचाई !! : D थैंक यू @monshi और @ jsmiff। (SOF एक ही टिप्पणी में कई उपयोगकर्ताओं को अस्वीकार कर देता है)।

— सिल्वियो डेलगाडो

इसमें पिक्चरइन्पुट क्या है ??

— developersaumya

Answer 2

यहां सभी उत्तर अभी भी फॉर्मडेटा एपीआई का उपयोग कर रहे हैं । यह "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हेडर का उपयोग यह समझाने के लिए किया जाता है कि हम क्या भेज रहे हैं (माइम-टाइप और फ़ाइल नाम)।

मैंने भी इसी तरह का जवाब यहां पोस्ट किया है ।

Comments

यह बहुत अच्छा जवाब है। यह पूरी तरह से फॉर्म डेटा के उपयोग से बच रहा है। मैं xmlHttpRequest के उपयोग में थोड़ा अधिक जोड़ सकता हूं। एक XMLHttpRequest अतुल्यकालिक संचालन के लिए अनुमति देता है, जो क्लाइंट (UI पृष्ठ) को ब्लॉक नहीं करता है। HTML फॉर्म का उपयोग करते समय, क्लाइंट (UI पेज) को ब्लॉक किया जाता है, जबकि ऑपरेशन किया जा रहा है।

— हैरी

किस बारे में fetch()?

— विटाली ज़डेनविच

@VitalyZdanevich निश्चित नहीं है कि आपका क्या मतलब है?

— विल्ट

इस विधि IE पर काम करता है?

— टोनी कोब

Answer 3

इस ट्यूटोरियल के आधार पर, यह करने के लिए एक बहुत ही बुनियादी तरीका है:

$('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){
            ...
        }
        ...
    }); 
});

उचित त्रुटि हैंडलिंग जोड़ना न भूलें

Answer 4

चरण 1: HTML पृष्ठ बनाएँ जहाँ HTML कोड को रखा जाए।

चरण 2: HTML कोड पृष्ठ तल (पाद लेख) में जावास्क्रिप्ट बनाएँ: और स्क्रिप्ट टैग में Jquery कोड डालें।

चरण 3: PHP फ़ाइल और php कोड कॉपी अतीत बनाएँ। $.ajaxकोड url में Jquery कोड के बाद जो आपके php फ़ाइल नाम पर लागू होता है।

जे एस

//$(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" />

Php

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

Comments

कृपया, अपने कोड के लिए कुछ टिप्पणी / विवरण जोड़ें

— kvorobiev

एक के ,बाद लापताtype: 'post'

— रस्ट

मेरा दिन बनाया :) धन्यवाद

— shekhardtu

क्या आप किसी फ़ाइल को किसी tmpनिर्देशिका में तब तक अपलोड कर सकते हैं जब तक कि पूरा फ़ॉर्म जमा नहीं हो जाता? (कहते हैं कि यह एक बहु-रूप थे)?

— थिसैय्या

मैं इन फॉर्म चर को जावा कोड में कैसे संदर्भित करूंगा

— भास्कर अरानी

Answer 5

इस पगलिन simpleUpload को आज़माएं , कोई ज़रूरत नहीं है

एचटीएमएल:

<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');

  }
});

Answer 6

उस आदमी होने के लिए क्षमा करें, लेकिन AngularJS एक सरल और सुरुचिपूर्ण समाधान प्रदान करता है।

यहाँ मैं उपयोग कोड है:

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>

सर्वर की ओर से मेरे पास एक एमवीसी कंट्रोलर है जो एक्शन के साथ फाइल को अपलोड करता है जो Request.Files संग्रह में पाया जाता है और JsonResult को वापस करता है।

यदि आप AngularJS का उपयोग करते हैं, तो इसे आज़माएं, यदि आप नहीं करते हैं ... माफ करना दोस्त :-)

Comments

डाउनवोटेड क्योंकि $ अपलोड निर्देश के साथ काम नहीं करता है

— NicoJuicy