آپلود فایل در PHP با AJAX بدون فرم

عضویت در سایت

نام کاربری*

ایمیل*

رمزعبور*

تایید رمز عبور*

نام*

نام خانوادگی*

نام نمایشی*

تصویر پروفایل*

مرور

کشور*

شهر*

جنسیت* آقا

خانم

سایر

سن*

قوانین و مقررات* با تیک زدن این گزینه شما قوانین و مقررات را میپذیرید.

عضویت در سایت

رایگان ثبت نام کنید و سوالات خود را بپرسید، همچنین میتوانید در پاسخگویی به سوالات دیگر کاربران نیز سهیم باشید، هر مشکلی در ثبت نام یا ورود داشتید با ایمیل beporsam@gmail.com در ارتباط باشید

آپلود فایل در PHP با AJAX بدون فرم

سلام

در این مقاله از PHP می پردازیم به اینکه به اینکه چطوری میتوانیم با کمک AJAX بدون نیاز فرم و رفرش صفحه بتونیم بتونیم فایل آپلود کنیم. در ادامه همراه بپرسم باشید.

آپلود فایل با Ajax

برای آپلود تصویر، ابتدا Image را انتخاب می کنیم و زمانی که تصویر را انتخاب می کنیم، تصویر در محل تعیین شده آپلود می شود. زیرا ما روی عنصر فایل نوع ورودی از رویداد تغییر jquery استفاده کرده ایم.

در این مورد نیز برخی از اعتبار سنجی مانند نوع تصویر مجاز و اندازه تصویر انتخابی را نیز انجام داده ایم. تمام این اعتبارسنجی که ما انجام خواهیم داد توسط جی کوئری نیز انجام می شود.

برای ارسال تصویر انتخاب شده به سرور، از شی () FormData استفاده می کنیم. با استفاده از آبجکت FormData() تصویر انتخاب شده را با استفاده از درخواست Ajax برای سرور ارسال کرده ایم. بنابراین با استفاده از آبجکت FormData() و Ajax فایل انتخاب شده را به اسکریپت PHP ارسال کرده ایم. با استفاده از اسکریپت پی اچ پی می توانیم فایل یا تصویر انتخاب شده را بدون رفرش صفحه در سرور آپلود کنیم.

پس از آپلود تصویر انتخاب شده، تصویر را نیز بدون رفرش کردن صفحه در صفحه وب آپلود کرده ایم. بنابراین این آموزش ساده ما در مورد نحوه آپلود تصویر بدون استفاده از ارسال فرم در Ajax PHP است.

کد index.php:

<!DOCTYPE html>
<html>
 <head>
  <title>beporsam Tutorial | Upload File without using Form Submit in Ajax PHP</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 </head>
 <body>
  <br /><br />
  <div class="container" style="width:700px;">
   <h2 align="center">Upload File without using Form Submit in Ajax PHP</h2>
   <br />
   <label>Select Image</label>
   <input type="file" name="file" id="file" />
   <br />
   <span id="uploaded_image"></span>
  </div>
 </body>
</html>

<script>
$(document).ready(function(){
 $(document).on('change', '#file', function(){
  var name = document.getElementById("file").files[0].name;
  var form_data = new FormData();
  var ext = name.split('.').pop().toLowerCase();
  if(jQuery.inArray(ext, ['gif','png','jpg','jpeg']) == -1) 
  {
   alert("Invalid Image File");
  }
  var oFReader = new FileReader();
  oFReader.readAsDataURL(document.getElementById("file").files[0]);
  var f = document.getElementById("file").files[0];
  var fsize = f.size||f.fileSize;
  if(fsize > 2000000)
  {
   alert("Image File Size is very big");
  }
  else
  {
   form_data.append("file", document.getElementById('file').files[0]);
   $.ajax({
    url:"upload.php",
    method:"POST",
    data: form_data,
    contentType: false,
    cache: false,
    processData: false,
    beforeSend:function(){
     $('#uploaded_image').html("<label class='text-success'>Image Uploading...</label>");
    },   
    success:function(data)
    {
     $('#uploaded_image').html(data);
    }
   });
  }
 });
});
</script>

کد upload.php

<?php
//upload.php
if($_FILES["file"]["name"] != '')
{
 $test = explode('.', $_FILES["file"]["name"]);
 $ext = end($test);
 $name = rand(100, 999) . '.' . $ext;
 $location = './upload/' . $name;  
 move_uploaded_file($_FILES["file"]["tmp_name"], $location);
 echo '<img src="'.$location.'" height="150" width="225" class="img-thumbnail" />';
}
?>

به همین سادگی تونستیم که با کمک Ajax بدون نیاز به رفرش صفحه و با کمک PHP فایل ها مون رو آپلود کنیم.

مطلب پیشنهادی: سورس کد تقویم پایتون

چنانچه مشکلی داشتید از ما بپرسید 🙂

موفق باشید.