آپلود فایل در 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>
<div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://beporsam.ir/blog/show-wifi-password/" target="_blank" rel="dofollow" class="ufc5628190f44fc8f2845bba983bc861b"><!-- INLINE RELATED POSTS 1/3 //--><style> .ufc5628190f44fc8f2845bba983bc861b { padding:0px; margin: 0; padding-top:1em!important; padding-bottom:1em!important; width:100%; display: block; font-weight:bold; background-color:#eaeaea; border:0!important; border-left:4px solid #34495E!important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); text-decoration:none; } .ufc5628190f44fc8f2845bba983bc861b:active, .ufc5628190f44fc8f2845bba983bc861b:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; text-decoration:none; } .ufc5628190f44fc8f2845bba983bc861b { transition: background-color 250ms; webkit-transition: background-color 250ms; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; } .ufc5628190f44fc8f2845bba983bc861b .ctaText { font-weight:bold; color:inherit; text-decoration:none; font-size: 16px; } .ufc5628190f44fc8f2845bba983bc861b .postTitle { color:#000000; text-decoration: underline!important; font-size: 16px; } .ufc5628190f44fc8f2845bba983bc861b:hover .postTitle { text-decoration: underline!important; } </style><div style="padding-left:1em; padding-right:1em;"><span class="ctaText">مطلب پیشنهادی:</span>  <span class="postTitle">آموزش مشاهده رمز WiFi در ویندوز(7،8،8.1،10)</span></div></a></div>
<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>

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

۲۵

۲۶

۲۷

۲۸

۲۹

۳۰

۳۱

۳۲

۳۳

۳۴

۳۵

۳۶

۳۷

۳۸

۳۹

۴۰

۴۱

۴۲

۴۳

۴۴

۴۵

۴۶

۴۷

۴۸

۴۹

۵۰

۵۱

۵۲

۵۳

۵۴

۵۵

۵۶

۵۷

۵۸

۵۹

۶۰

۶۱

<!DOCTYPE html>

<html>

<head>

<title>beporsam Tutorial | Upload File without using Form Submit in Ajax PHP</title>

</head>

<body>

<h2 align="center">Upload File without using Form Submit in Ajax PHP</h2>

<br />

<label>Select Image</label>

<br />

</div>

</body>

</html>

$(document).ready(function(){

$(document).on('change', '#file', function(){

var name = document.getElementById("file").files[۰].name;

var form_data = new FormData();

var ext = name.split('.').pop().toLowerCase();

if(jQuery.inArray(ext, ['gif','png','jpg','jpeg']) == -۱)

{

alert("Invalid Image File");

}

var oFReader = new FileReader();

oFReader.readAsDataURL(document.getElementById("file").files[۰]);

var f = document.getElementById("file").files[۰];

var fsize = f.size||f.fileSize;

if(fsize > ۲۰۰۰۰۰۰)

{

alert("Image File Size is very big");

}

else

{

form_data.append("file", document.getElementById('file').files[۰]);

$.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>

مطلب پیشنهادی: آموزش نصب بازی Bayonetta 3 روی کامپیوتر

کد 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" />';
}
?>

۱۰

۱۱

۱۲

<?php

//upload.php

if($_FILES["file"]["name"] != '')

{

$test = explode('.', $_FILES["file"]["name"]);

$ext = end($test);

$name = rand(۱۰۰, ۹۹۹) . '.' . $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 فایل ها مون رو آپلود کنیم.

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

موفق باشید.