jQuery AJAX फ़ाइल अपलोड PHP

Question

मैं अपने इंट्रानेट-पृष्ठ में एक साधारण फ़ाइल अपलोड लागू करना चाहता हूं, जिसमें सबसे छोटा सेटअप संभव है।

यह मेरा HTML हिस्सा है:

<input id="sortpicture" type="file" name="sortpic" />
<button id="upload">Upload</button>

और यह मेरी जेएस jquery स्क्रिप्ट है:

$("#upload").on("click", function() {
    var file_data = $("#sortpicture").prop("files")[0];   
    var form_data = new FormData();
    form_data.append("file", file_data);
    alert(form_data);
    $.ajax({
        url: "/uploads",
        dataType: 'script',
        cache: false,
        contentType: false,
        processData: false,
        data: form_data,                         
        type: 'post',
        success: function(){
            alert("works"); 
        }
    });
});

वेबसाइट की रूट निर्देशिका में "अपलोड" नाम का एक फ़ोल्डर है, जिसमें "उपयोगकर्ता" और "IIS_users" के लिए परिवर्तन की अनुमति है।

जब मैं फ़ाइल-फ़ॉर्म वाली फ़ाइल का चयन करता हूं और अपलोड बटन दबाता हूं, तो पहला अलर्ट "[ऑब्जेक्ट फॉर्मडैट]" देता है। दूसरा अलर्ट नहीं मिलता है और "अपलोड" फ़ोल्डर भी खाली है !?

क्या कोई मेरी गलती का पता लगाने में मदद कर सकता है?

इसके अलावा अगला चरण होना चाहिए, फ़ाइल का नाम सर्वर साइड जनरेट किए गए नाम के साथ। शायद कोई मुझे इसके लिए एक समाधान भी दे सकता है।

Comments

कृपया इसे पहले पढ़ें: stackoverflow.com/questions/166221/…

— Vincent Decaux

मेरे लिए सब कुछ काम करता है, शायद यह आपका PHP कोड है?

— कोरिकुलम

इस फॉर्म के साथ "जुड़ा हुआ" कुछ और नहीं है। मेरे php कोड का क्या मतलब है?

— user2355509

मेरा क्या मतलब है, आपका कोड काम करता है, शायद समस्या आपके सर्वर साइड कोड में है।

— कोरिकुलम

क्या आपको AJAX स्क्रिप्ट निष्पादित करने पर 500 त्रुटि कोड मिल रहा है? यह इंगित करेगा कि यह एक सर्वर साइड त्रुटि है। इसके अलावा: सुनिश्चित करें कि डीबगिंग करते समय, आप कंसोल में PHP फ़ाइल की प्रतिक्रिया को आउटपुट करते हैं। इस तरह, यदि आपका PHP कोड एक त्रुटि फेंकता है, तो आप जानते हैं कि क्या हो रहा है।

— डिडेरिक

Answer 1

आपको एक स्क्रिप्ट की ज़रूरत है जो फ़ाइल को अपलोड डायरेक्टरी में ले जाने के लिए सर्वर पर चलती है। JQuery ajaxविधि (ब्राउज़र में चल रहा है) सर्वर को फ़ॉर्म डेटा भेजता है, फिर सर्वर पर एक स्क्रिप्ट अपलोड को संभालती है। यहाँ PHP का उपयोग करके एक उदाहरण दिया गया है।

आपका HTML ठीक है, लेकिन इस तरह दिखने के लिए अपनी JS jQuery स्क्रिप्ट अपडेट करें:

$('#upload').on('click', function() {
    var file_data = $('#sortpicture').prop('files')[0];   
    var form_data = new FormData();                  
    form_data.append('file', file_data);
    alert(form_data);                             
    $.ajax({
        url: 'upload.php', // point to server-side PHP script 
        dataType: 'text',  // what to expect back from the PHP script, if anything
        cache: false,
        contentType: false,
        processData: false,
        data: form_data,                         
        type: 'post',
        success: function(php_script_response){
            alert(php_script_response); // display response from the PHP script, if any
        }
     });
});

और अब सर्वर-साइड स्क्रिप्ट के लिए, इस मामले में PHP का उपयोग करके।

upload.php : एक PHP स्क्रिप्ट जो सर्वर पर चलती है और फ़ाइल को डायरेक्ट्री डायरेक्टरी पर ले जाती है:

<?php

    if ( 0 < $_FILES['file']['error'] ) {
        echo 'Error: ' . $_FILES['file']['error'] . '<br>';
    }
    else {
        move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']);
    }

?>

---

इसके अलावा, गंतव्य निर्देशिका के बारे में कुछ बातें:

1. सुनिश्चित करें कि आपके पास सही सर्वर पथ है , अर्थात, PHP स्क्रिप्ट स्थान पर शुरू होकर अपलोड निर्देशिका के लिए पथ क्या है, और
2. सुनिश्चित करें कि यह लेखन योग्य है ।

और PHP फ़ंक्शन के बारे में थोड़ा सा move_uploaded_file, upload.php स्क्रिप्ट में उपयोग किया जाता है :

move_uploaded_file(

    // this is where the file is temporarily stored on the server when uploaded
    // do not change this
    $_FILES['file']['tmp_name'],

    // this is where you want to put the file and what you want to name it
    // in this case we are putting in a directory called "uploads"
    // and giving it the original filename
    'uploads/' . $_FILES['file']['name']
);

$_FILES['file']['name']अपलोड होते ही फ़ाइल का नाम है। आपको इसका उपयोग नहीं करना है। आप फ़ाइल को कोई भी नाम दे सकते हैं (सर्वर फाइलसिस्टम संगत) जो आप चाहते हैं:

move_uploaded_file(
    $_FILES['file']['tmp_name'],
    'uploads/my_new_filename.whatever'
);

और अंत में, अपने PHP upload_max_filesizeऔर post_max_sizeकॉन्फ़िगरेशन मानों से अवगत रहें , और सुनिश्चित करें कि आपकी परीक्षण फ़ाइलें या तो अधिक नहीं हैं। यहां कुछ मदद दी गई है कि आप PHP कॉन्फ़िगरेशन की जांच कैसे करते हैं और आप अधिकतम फ़ाइलों और सेटिंग्स को कैसे सेट करते हैं ।

Comments

हे खूनी! धन्यवाद, मुझे लगता है कि यह एक बड़ी बात थी, मुझे गलत समझा गया। इसलिए मैंने php फ़ाइल को जोड़ा, और अब मैं थोड़ा करीब हूं। दूसरा अलर्ट भी पॉप अप! लेकिन फ़ोल्डर अभी भी खाली है।

— user2355509

आह, प्रपत्र इनपुट नाम "सॉर्टपिक" को form_data.appendफ़ंक्शन में "फ़ाइल" में बदल दिया जाता है । इसलिए मैंने नए फॉर्म इनपुट नाम को प्रतिबिंबित करने के लिए PHP स्क्रिप्ट को बदल दिया। मैं भी डीबगिंग के साथ मदद करने के लिए ajax सफलता चेतावनी में PHP स्क्रिप्ट प्रतिक्रिया खींच लिया।

— खूनी 21

बडी, यह मुझे त्रुटि अपरिभाषित सूचकांक फ़ाइल में$_FILES['file']

— हेंड्री तनाका

@partho, कोड प्रोप ('फाइलें') [0] सर्वर पर अपलोड करने के उद्देश्य से स्थानीय फ़ाइल तक पहुँचता है। यदि आपको अधिक स्पष्टीकरण की आवश्यकता है तो jQuery फ़ंक्शन "प्रोप" और "html5 फ़ाइल अपलोड" देखें।

— रक्तरंजित कूंकल्स

मैंने इस मुद्दे को सुलझा लिया। इसका कारण यह था कि फाइलें बहुत बड़ी थीं।

— रॉन टोरनेम्बे

Answer 2

**1. index.php**
<body>
    <span id="msg" style="color:red"></span><br/>
    <input type="file" id="photo"><br/>
  <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      $(document).on('change','#photo',function(){
        var property = document.getElementById('photo').files[0];
        var image_name = property.name;
        var image_extension = image_name.split('.').pop().toLowerCase();

        if(jQuery.inArray(image_extension,['gif','jpg','jpeg','']) == -1){
          alert("Invalid image file");
        }

        var form_data = new FormData();
        form_data.append("file",property);
        $.ajax({
          url:'upload.php',
          method:'POST',
          data:form_data,
          contentType:false,
          cache:false,
          processData:false,
          beforeSend:function(){
            $('#msg').html('Loading......');
          },
          success:function(data){
            console.log(data);
            $('#msg').html(data);
          }
        });
      });
    });
  </script>
</body>

**2.upload.php**
<?php
if($_FILES['file']['name'] != ''){
    $test = explode('.', $_FILES['file']['name']);
    $extension = end($test);    
    $name = rand(100,999).'.'.$extension;

    $location = 'uploads/'.$name;
    move_uploaded_file($_FILES['file']['tmp_name'], $location);

    echo '<img src="'.$location.'" height="100" width="100" />';
}

Answer 3

var formData = new FormData($("#YOUR_FORM_ID")[0]);
$.ajax({
    url: "upload.php",
    type: "POST",
    data : formData,
    processData: false,
    contentType: false,
    beforeSend: function() {

    },
    success: function(data){




    },
    error: function(xhr, ajaxOptions, thrownError) {
       console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
    }
});

Answer 4

और यह uplaoded फ़ाइलों को प्राप्त करने के लिए php फ़ाइल है

<?
$data = array();
    //check with your logic
    if (isset($_FILES)) {
        $error = false;
        $files = array();

        $uploaddir = $target_dir;
        foreach ($_FILES as $file) {
            if (move_uploaded_file($file['tmp_name'], $uploaddir . basename( $file['name']))) {
                $files[] = $uploaddir . $file['name'];
            } else {
                $error = true;
            }
        }
        $data = ($error) ? array('error' => 'There was an error uploading your files') : array('files' => $files);
    } else {
        $data = array('success' => 'NO FILES ARE SENT','formData' => $_REQUEST);
    }

    echo json_encode($data);
?>

Comments

क्या if (true)कर रहा है? क्या हमेशा सच का मूल्यांकन करना, इतना बेकार है, है ना? इसके अलावा, आप एक अतिरिक्त अंत घुंघराले है।

— १३

मैंने इसे आपके लिए ठीक कर दिया है। :)

— Mr.Web

Answer 5

शुद्ध जेएस का उपयोग करें

async function saveFile() 
{
    let formData = new FormData();           
    formData.append("file", sortpicture.files[0]);
    await fetch('/uploads', {method: "POST", body: formData});    
    alert('works');
}

<input id="sortpicture" type="file" name="sortpic" />
<button id="upload" onclick="saveFile()">Upload</button>
<br>Before click upload look on chrome>console>network (in this snipped we will see 404)

फ़ाइलनाम स्वचालित रूप से अनुरोध करने के लिए शामिल है और सर्वर इसे पढ़ सकता है, 'सामग्री-प्रकार' स्वचालित रूप से 'मल्टीपार्ट / फॉर्म-डेटा' पर सेट है। यहां त्रुटि से निपटने और अतिरिक्त जसन भेजने के साथ अधिक विकसित उदाहरण है

async function saveFile(inp) 
{
    let user = { name:'john', age:34 };
    let formData = new FormData();
    let photo = inp.files[0];      
         
    formData.append("photo", photo);
    formData.append("user", JSON.stringify(user));  
    
    try {
       let r = await fetch('/upload/image', {method: "POST", body: formData}); 
       console.log('HTTP response code:',r.status); 
       alert('success');
    } catch(e) {
       console.log('Huston we have problem...:', e);
    }
    
}

<input type="file" onchange="saveFile(this)" >
<br><br>
Before selecting the file Open chrome console > network tab to see the request details.
<br><br>
<small>Because in this example we send request to https://stacksnippets.net/upload/image the response code will be 404 ofcourse...</small>

Answer 6

डाउनलोड करने के लिए यहां क्लिक करें सामग्री के साथ जेकरी अजाक्स का उपयोग करते हुए सर्वश्रेष्ठ फ़ाइल अपलोड करें

जब आप छवि का चयन करते हैं तो छवि को आधार 64 में रूपांतरित किया जाएगा और आप इसे डेटाबेस में संग्रहीत कर सकते हैं, इसलिए यह हल्का वजन भी होगा।