javascript - jQuery अजाक्स फ़ाइल अपलोड करें




ajax post (14)

क्या मैं अजाक्स अनुरोध के पोस्ट विधि का उपयोग कर फ़ाइल अपलोड करने के लिए निम्न jQuery कोड का उपयोग कर सकता हूं?

$.ajax({
    type: "POST",
    timeout: 50000,
    url: url,
    data: dataString,
    success: function (data) {
        alert('success');
        return false;
    }
});

यदि यह संभव है, तो क्या मुझे "डेटा" भाग भरना होगा? क्या यह सही तरीका है? मैं केवल फाइल को सर्वर की तरफ पोस्ट करता हूं।

मैं चारों ओर गुगल कर रहा हूं, लेकिन जो मैंने पाया वह एक प्लगइन था जबकि मेरी योजना में मैं इसका उपयोग नहीं करना चाहता था। कम से कम एक पल के लिए।


सरल अपलोड फॉर्म

 <script>
   //form Submit
   $("form").submit(function(evt){	 
      evt.preventDefault();
      var formData = new FormData($(this)[0]);
   $.ajax({
       url: 'fileUpload',
       type: 'POST',
       data: formData,
       async: false,
       cache: false,
       contentType: false,
       enctype: 'multipart/form-data',
       processData: false,
       success: function (response) {
         alert(response);
       }
   });
   return false;
 });
</script>
<!--Upload Form-->
<form>
  <table>
    <tr>
      <td colspan="2">File Upload</td>
    </tr>
    <tr>
      <th>Select File </th>
      <td><input id="csv" name="csv" type="file" /></td>
    </tr>
    <tr>
      <td colspan="2">
        <input type="submit" value="submit"/> 
      </td>
    </tr>
  </table>
</form>


AJAX के माध्यम से फ़ाइल अपलोड संभव नहीं है। आप IFrame का उपयोग कर रीफ्रेशिंग पृष्ठ के बिना फ़ाइल अपलोड कर सकते हैं। आप here और विवरण देख सकते here

अद्यतन करें:

एक्सएचआर 2 के साथ, AJAX के माध्यम से फ़ाइल अपलोड समर्थित है। FormData ऑब्जेक्ट के माध्यम से, लेकिन दुर्भाग्य से यह सभी / पुराने ब्राउज़र द्वारा समर्थित नहीं है।

FormData समर्थन डेस्कटॉप ब्राउज़र संस्करणों का पालन करने से शुरू होता है। आईई 10+, फ़ायरफ़ॉक्स 4.0+, क्रोम 7+, सफारी 5+, ओपेरा 12+

अधिक जानकारी के लिए, एमडीएन लिंक देखें


XML AJttpRequest () के साथ एक AJAX अपलोड वास्तव में संभव है। कोई iframes आवश्यक है। अपलोड प्रगति दिखाया जा सकता है।

विवरण के लिए देखें: jQuery अपलोड प्रगति और AJAX फ़ाइल अपलोड करने के लिए https://.com/a/4943774/873282 का उत्तर दें।


jquery का उपयोग कर फ़ॉर्म के हिस्से के रूप में उपयोगकर्ता द्वारा सबमिट की गई फ़ाइल अपलोड करने के लिए कृपया नीचे दिए गए कोड का पालन करें:

var formData = new FormData();
formData.append("userfile", fileInputElement.files[0]);

फिर सर्वर पर फॉर्म डेटा ऑब्जेक्ट भेजें।

हम फॉर्मडाटा ऑब्जेक्ट पर सीधे फ़ाइल या ब्लॉब भी जोड़ सकते हैं।

data.append("myfile", myBlob, "filename.txt");

अजाक्स पोस्ट और अपलोड फ़ाइल संभव है। मैं अपनी फाइल लोड करने के लिए jQuery $.ajax फ़ंक्शन का उपयोग कर रहा हूं। मैंने एक्सएचआर ऑब्जेक्ट का उपयोग करने की कोशिश की लेकिन PHP के साथ सर्वर की ओर से परिणाम नहीं मिल सका।

var formData = new FormData();
formData.append('file', $('#file')[0].files[0]);

$.ajax({
       url : 'upload.php',
       type : 'POST',
       data : formData,
       processData: false,  // tell jQuery not to process the data
       contentType: false,  // tell jQuery not to set contentType
       success : function(data) {
           console.log(data);
           alert(data);
       }
});

जैसा कि आप देख सकते हैं, आपको एक फॉर्मडेटा ऑब्जेक्ट बनाना चाहिए, खाली या से (serialized? - $('#yourForm').serialize()) मौजूदा फॉर्म, और उसके बाद इनपुट फ़ाइल संलग्न करें।

यहां अधिक जानकारी दी गई है: - jQuery.ajax और FormData का उपयोग करके फ़ाइल अपलोड करने के लिए - jQuery के माध्यम से फ़ाइलों को अपलोड करना, ऑब्जेक्ट फॉर्मडाटा प्रदान किया गया है और कोई फ़ाइल नाम नहीं है, अनुरोध प्राप्त करें

PHP प्रक्रिया के लिए आप इस तरह कुछ उपयोग कर सकते हैं:

//print_r($_FILES);
$fileName = $_FILES['file']['name'];
$fileType = $_FILES['file']['type'];
$fileError = $_FILES['file']['error'];
$fileContent = file_get_contents($_FILES['file']['tmp_name']);

if($fileError == UPLOAD_ERR_OK){
   //Processes your file here
}else{
   switch($fileError){
     case UPLOAD_ERR_INI_SIZE:   
          $message = 'Error al intentar subir un archivo que excede el tamaño permitido.';
          break;
     case UPLOAD_ERR_FORM_SIZE:  
          $message = 'Error al intentar subir un archivo que excede el tamaño permitido.';
          break;
     case UPLOAD_ERR_PARTIAL:    
          $message = 'Error: no terminó la acción de subir el archivo.';
          break;
     case UPLOAD_ERR_NO_FILE:    
          $message = 'Error: ningún archivo fue subido.';
          break;
     case UPLOAD_ERR_NO_TMP_DIR: 
          $message = 'Error: servidor no configurado para carga de archivos.';
          break;
     case UPLOAD_ERR_CANT_WRITE: 
          $message= 'Error: posible falla al grabar el archivo.';
          break;
     case  UPLOAD_ERR_EXTENSION: 
          $message = 'Error: carga de archivo no completada.';
          break;
     default: $message = 'Error: carga de archivo no completada.';
              break;
    }
      echo json_encode(array(
               'error' => true,
               'message' => $message
            ));
}

अजाक्स फ़ाइल अपलोड का समर्थन नहीं करता है, आपको इसके बजाय iframe का उपयोग करना चाहिए


मैं इसके लिए बहुत देर हो चुकी हूं लेकिन मैं एक एजेक्स आधारित छवि अपलोडिंग समाधान की तलाश में था और जिस उत्तर को मैं ढूंढ रहा था वह इस पोस्ट में थोड़ी बिखरी हुई थी। जिस समाधान पर मैंने बस गया था वह फॉर्मडाटा ऑब्जेक्ट शामिल था। मैंने कोड के मूल रूप को एक साथ रखा जो मैंने एक साथ रखा था। आप देख सकते हैं कि यह fd.append () के साथ फ़ॉर्म में एक कस्टम फ़ील्ड जोड़ने के साथ-साथ AJAX अनुरोध किए जाने पर प्रतिक्रिया डेटा को संभालने का तरीका दिखाता है।

एचटीएमएल अपलोड करें:

<!DOCTYPE html>
<html>
<head>
    <title>Image Upload Form</title>
    <script src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript">
        function submitForm() {
            console.log("submit event");
            var fd = new FormData(document.getElementById("fileinfo"));
            fd.append("label", "WEBUPLOAD");
            $.ajax({
              url: "upload.php",
              type: "POST",
              data: fd,
              processData: false,  // tell jQuery not to process the data
              contentType: false   // tell jQuery not to set contentType
            }).done(function( data ) {
                console.log("PHP Output:");
                console.log( data );
            });
            return false;
        }
    </script>
</head>

<body>
    <form method="post" id="fileinfo" name="fileinfo" onsubmit="return submitForm();">
        <label>Select a file:</label><br>
        <input type="file" name="file" required />
        <input type="submit" value="Upload" />
    </form>
    <div id="output"></div>
</body>
</html>

यदि आप php के साथ काम कर रहे हैं तो यहां अपलोड को संभालने का एक तरीका है जिसमें उपर्युक्त एचटीएमएल में प्रदर्शित दोनों कस्टम फ़ील्ड का उपयोग शामिल है।

Upload.php

<?php
if ($_POST["label"]) {
    $label = $_POST["label"];
}
$allowedExts = array("gif", "jpeg", "jpg", "png");
$temp = explode(".", $_FILES["file"]["name"]);
$extension = end($temp);
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/jpg")
|| ($_FILES["file"]["type"] == "image/pjpeg")
|| ($_FILES["file"]["type"] == "image/x-png")
|| ($_FILES["file"]["type"] == "image/png"))
&& ($_FILES["file"]["size"] < 200000)
&& in_array($extension, $allowedExts)) {
    if ($_FILES["file"]["error"] > 0) {
        echo "Return Code: " . $_FILES["file"]["error"] . "<br>";
    } else {
        $filename = $label.$_FILES["file"]["name"];
        echo "Upload: " . $_FILES["file"]["name"] . "<br>";
        echo "Type: " . $_FILES["file"]["type"] . "<br>";
        echo "Size: " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
        echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br>";

        if (file_exists("uploads/" . $filename)) {
            echo $filename . " already exists. ";
        } else {
            move_uploaded_file($_FILES["file"]["tmp_name"],
            "uploads/" . $filename);
            echo "Stored in: " . "uploads/" . $filename;
        }
    }
} else {
    echo "Invalid file";
}
?>

मैंने इन्हें एक साधारण कोड में संभाला है। आप यहां से एक काम कर रहे डेमो डाउनलोड कर सकते here

आपके मामले के लिए, ये बहुत संभव है। मैं आपको कदम से कदम उठाऊंगा कि आप AJAX jquery का उपयोग कर सर्वर पर फ़ाइल कैसे अपलोड कर सकते हैं।

सबसे पहले नीचे दिखाए गए अनुसार निम्न फॉर्म फ़ाइल तत्व जोड़ने के लिए हम एक HTML फ़ाइल बनाते हैं।

<form action="" id="formContent" method="post" enctype="multipart/form-data" >
         <input  type="file" name="file"  required id="upload">
         <button class="submitI" >Upload Image</button> 
</form>

दूसरी बात jquery.js फ़ाइल बनाएं और सर्वर पर हमारे फ़ाइल सबमिशन को संभालने के लिए निम्न कोड जोड़ें

    $("#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("file successfully submitted");
            },error: function(){
                alert("okey");
            }
         });
      });
    });

वहां आप कर चुके हैं here


यदि आप इसे ऐसा करना चाहते हैं:

$.upload( form.action, new FormData( myForm))
.progress( function( progressEvent, upload) {
    if( progressEvent.lengthComputable) {
        var percent = Math.round( progressEvent.loaded * 100 / progressEvent.total) + '%';
        if( upload) {
            console.log( percent + ' uploaded');
        } else {
            console.log( percent + ' downloaded');
        }
    }
})
.done( function() {
    console.log( 'Finished upload');                    
});

से

https://github.com/lgersman/jquery.orangevolt-ampere/blob/master/src/jquery.upload.js

आपका समाधान हो सकता है।


यहां एक विचार था जिसके बारे में मैं सोच रहा था:

Have an iframe on page and have a referencer.

एक ऐसा फॉर्म बनाएं जिसमें आप INPUT को स्थानांतरित करें: फ़ाइल तत्व को।

Form:  A processing page AND a target of the FRAME.

नतीजा फ्रेम पर पोस्ट करेगा, और उसके बाद आप केवल उस छवि टैग को ले जाया जा सकता है जिसे आप चाहते हैं:

data:image/png;base64,asdfasdfasdfasdfa

और पेज लोड करता है।

मेरा मानना ​​है कि यह मेरे लिए काम करता है, और निर्भर करता है कि आप ऐसा कुछ करने में सक्षम हो सकते हैं:

.aftersubmit(function(){
    stopPropigation()// or some other code which would prevent a refresh.
});

टाइप = "फाइल" सहित आपके सभी फॉर्म इनपुट प्राप्त करने के लिए आपको फॉर्मडाटा ऑब्जेक्ट का उपयोग करने की आवश्यकता है। आप डिबगर में फॉर्मडेटा सामग्री -> नेटवर्क -> हेडर सबमिट करने के बाद फॉर्म सबमिट करने में सक्षम होंगे।

var url = "YOUR_URL";

var form = $('#YOUR_FORM_ID')[0];
var formData = new FormData(form);


$.ajax(url, {
    method: 'post',
    processData: false,
    contentType: false,
    data: formData
}).done(function(data){
    if (data.success){ 
        alert("Files uploaded");
    } else {
        alert("Error while uploading the files");
    }
}).fail(function(data){
    console.log(data);
    alert("Error while uploading the files");
});

                 var dataform = new FormData($("#myform")[0]);

                    //console.log(dataform);
                     $.ajax({
                        url: 'url',
                        type: 'POST',
                        data: dataform,
                        async: false,
                        success: function (res) {
                            response data;
                        },
                        cache: false,
                        contentType: false,
                        processData: false
                    });

<html>
    <head>
        <title>Ajax file upload</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script>
            $(document).ready(function (e) {
            $("#uploadimage").on('submit', (function(e) {
            e.preventDefault();
                    $.ajax({
                    url: "upload.php", // Url to which the request is send
                            type: "POST", // Type of request to be send, called as method
                            data: new FormData(this), // Data sent to server, a set of key/value pairs (i.e. form fields and values)
                            contentType: false, // The content type used when sending data to the server.
                            cache: false, // To unable request pages to be cached
                            processData:false, // To send DOMDocument or non processed data file it is set to false
                            success: function(data)   // A function to be called if request succeeds
                            {
                            alert(data);
                            }
                    });
            }));
        </script>
    </head>
    <body>
        <div class="main">
            <h1>Ajax Image Upload</h1><br/>
            <hr>
            <form id="uploadimage" action="" method="post" enctype="multipart/form-data">
                <div id="image_preview"><img id="previewing" src="noimage.png" /></div>
                <hr id="line">
                <div id="selectImage">
                    <label>Select Your Image</label><br/>
                    <input type="file" name="file" id="file" required />
                    <input type="submit" value="Upload" class="submit" />
                </div>
            </form>
        </div>
    </body>
</html>

  • एक छिपी हुई आईफ्रेम का उपयोग करें और अपने फॉर्म का लक्ष्य उस iframe के नाम पर सेट करें। इस तरह, जब फॉर्म सबमिट किया जाता है, तो केवल आईफ्रेम रीफ्रेश किया जाएगा।
  • प्रतिक्रिया का विश्लेषण करने के लिए आईफ्रेम के लोड ईवेंट के लिए एक इवेंट हैंडलर पंजीकृत है।

मेरे ब्लॉग पोस्ट पर अधिक जानकारी: http://blog.manki.in/2011/08/ajax-fie-upload.html







file-upload