jQuery AJAX ফাইল পিএইচপি আপলোড করুন

Question

আমি আমার ইন্ট্রানেট পৃষ্ঠায় একটি সহজ ফাইল আপলোড কার্যকর করতে চাই, সবচেয়ে ছোট সেটআপ সম্ভব।

এটি আমার এইচটিএমএল অংশ:

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

ওয়েবসাইটের মূল ডিরেক্টরিতে "আপলোডস" নামে একটি ফোল্ডার রয়েছে, যেখানে "ব্যবহারকারী" এবং "আইআইএস_উসার্স" এর পরিবর্তনের অনুমতি রয়েছে।

আমি যখন ফাইল-ফর্মের সাহায্যে কোনও ফাইল নির্বাচন করি এবং আপলোড বোতাম টিপুন, তখন প্রথম সতর্কতা "[অবজেক্ট ফর্মডাটা]" দেয়। দ্বিতীয় সতর্কতা কল করা হবে না এবং "আপলোডগুলি" ফোল্ডারটিও খালি !?

কেউ কি আমার ভুল বুঝতে সাহায্য করতে পারে?

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

Comments

দয়া করে এটি প্রথমে পড়ুন: স্ট্যাকওভারফ্লো.

— com/ প্রশ্নগুলি

আমার জন্য সবকিছু কাজ করে, সম্ভবত এটি আপনার পিএইচপি কোড?

— করিকুলাম

এই ফর্মের সাথে অন্য কোনও "সংযুক্ত" নেই। আমার পিএইচপি কোড দিয়ে আপনি কী বোঝাতে চাইছেন?

— ব্যবহারকারী 2355509

আমার অর্থ হ'ল, আপনার কোডটি কাজ করে, সম্ভবত আপনার সার্ভারের সাইড কোডে সমস্যা।

— করিকুলাম

আপনি কি এজেএক্স স্ক্রিপ্টটি সম্পাদন করার পরে 500 টি ত্রুটি কোড পাচ্ছেন? এটি ইঙ্গিত দেয় যে এটি একটি সার্ভার সাইড ত্রুটি। এছাড়াও: ডিবাগ করার সময় আপনি কনসোলে পিএইচপি ফাইলের প্রতিক্রিয়া আউটপুট করে তা নিশ্চিত করুন। এইভাবে, যদি আপনার পিএইচপি কোড কোনও ত্রুটি ছুড়ে দেয় তবে আপনি কী জানেন কী হবে।

— ডিয়েডেরিক

Answer 1

ফাইলটিকে আপলোড ডিরেক্টরিতে সরাতে আপনার একটি স্ক্রিপ্ট দরকার যা সার্ভারে চলে। JQuery ajaxপদ্ধতি (ব্রাউজারে চলমান) ফর্ম ডেটা সার্ভারে প্রেরণ করে, তারপরে সার্ভারের একটি স্ক্রিপ্ট আপলোড পরিচালনা করে। এখানে পিএইচপি ব্যবহার করে একটি উদাহরণ দেওয়া হয়েছে।

আপনার এইচটিএমএল ঠিক আছে, তবে এটি দেখতে আপনার জেএস 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

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

?>

---

এছাড়াও গন্তব্য ডিরেক্টরি সম্পর্কে কয়েকটি জিনিস:

1. নিশ্চিত হয়ে নিন যে আপনার কাছে সঠিক সার্ভারের পথ রয়েছে , যেমন পিএইচপি স্ক্রিপ্টের অবস্থান থেকে শুরু করে আপলোড ডিরেক্টরিতে যাওয়ার পথটি কী এবং
2. এটি লেখার যোগ্য কিনা তা নিশ্চিত করুন ।

এবং পিএইচপি ফাংশন সম্পর্কে কিছুটা move_uploaded_file, আপলোড.এফপি স্ক্রিপ্টে ব্যবহৃত :

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

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

Comments

আরে ব্লাডি কন্যাকলস! ধন্যবাদ, আমি মনে করি এটি একটি বড় জিনিস ছিল, আমি ভুল বুঝেছিলাম। সুতরাং আমি পিএইচপি ফাইল যুক্ত করেছি, এবং এখন আমি কিছুটা কাছাকাছি এসেছি। দ্বিতীয় সতর্কতাও পপ আপ! তবে ফোল্ডারটি এখনও খালি রয়েছে।

— ব্যবহারকারী 2355509

আহ, ফর্ম ইনপুট নাম "সর্পপিক" ফাংশনে "ফাইল" এ পরিবর্তন করা হয়েছে form_data.append। সুতরাং আমি পিএইচপি স্ক্রিপ্ট পরিবর্তন করেছি নতুন ফর্ম ইনপুট নাম প্রতিবিম্বিত করতে। ডিবাগিংয়ের ক্ষেত্রে সাহায্যের জন্য আমি পিএইচপি স্ক্রিপ্টের প্রতিক্রিয়াটিকেও অজাক্স সাফল্যের সতর্কতার মধ্যে টানলাম।

— রক্তাক্তনাকলস

বাডি, এটি আমাকে ত্রুটি দেয় অনির্ধারিত সূচক ফাইলটি$_FILES['file']

— হেন্ড্রি তনাকা

@ পার্থো, কোড প্রোপ ('ফাইল') [0] সার্ভারে আপলোড করার উদ্দেশ্যে স্থানীয় ফাইলটি অ্যাক্সেস করে। আপনার যদি আরও ব্যাখ্যাের প্রয়োজন হয় তবে jQuery ফাংশন "প্রোপ" এবং "এইচটিএমএল 5 ফাইল আপলোড" সন্ধান করুন।

— রক্তাক্তনাকলস

আমি এই সমস্যাটি সমাধান করেছি The এর কারণ ফাইলাইজ করা খুব বড়।

— রন টর্নেম্বে

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

এবং এটি বর্ধিত ফাইলগুলি পেতে পিএইচপি ফাইল

<?
$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)করছে? সর্বদা সত্যের মূল্যায়ন করা কি অকেজো, তাই না? এছাড়াও আপনি একটি অতিরিক্ত শেষ-কোঁকড়ানো আছে।

— মিঃ ওয়েব

আমি আপনার জন্য এটি স্থির করেছি। :)

— মিঃ ওয়েব

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৪ এ রূপান্তরিত হবে এবং আপনি এটি ডাটাবেসে সংরক্ষণ করতে পারেন যাতে এটি হালকা ওজনও হবে।