شنبه ۲۲ شهریور ۱۴۰۴

Saturday, September 13, 2025 GMT +3:30

آموزش نحوه آپلود فایل با PHP و ای جکس (Ajax)

ajax-php-file-upload

انجام آپلود در صفحات وب از طریق فرم های HTML یکی از شیوه های متداولی است که برای ارسال و ذخیره سازی فایل ها در فرمت های مختلف از سمت سیستم کاربر به حافظه سرور کاربرد دارد، در این شیوه در حالت معمول اگر بخواهیم فایلی را به سرور ارسال کنیم با اتمام فرایند آپلود آدرس صفحه مرورگر به طور خودکار تغییر کرده و به آدرس مقصدی که در قسمت action تگ form در نظر گرفته ایم منتقل می شود، این ساز و کار در عمل فایل را آپلود می کند اما ممکن است با توجه به رابط کاربری مد نظر ما شیوه بهینه نباشد و اینکه آدرس صفحه پس از آپلود رفرش یا منتقل شود کاربران برنامه را به زحمت بیندازد، خوشبختانه برای تغییر این حالت روش هایی وجود دارد که به کمک آنها می توانیم بدون اینکه صفحه رفرش یا منتقل شود فایل را به سرور ارسال کنیم و از آنجایی که بیشتر این روش ها مبتنی بر تکنیک ای جکس (Ajax) یا شبیه سازی شده از فرایند ای جکس است در این آموزش قصد داریم به نحوه آپلود فایل با برنامه نویسی PHP و Ajax بپردازیم.

ساز و کار آپلود فایل در وب


قبل از پرداختن به ادامه این آموزش لازم است برای داشتن درک صحیحی از فرایند آپلود فایل در وب به طور مختصر به ساز و کار آن اشاره ای داشته باشیم.
دسترسی به فایل های کاربران در وب از لحاظ امنیتی یک استثناء و مجوزی پر ریسک است اما کمتر سرویس تحت وبی است که بی نیاز از این امکان باشد، بر همین مبنا جهت حفظ حریم خصوصی کاربران این قابلیت صرفا از طریق کدهای HTML و عناصر زیرمجموعه تگ form وجود دارد که حق انتخاب و آپلود فایل در دست کاربر باشد تا اگر خود او تمایل داشت فایل های مورد نظرش را انتخاب و تحت پروتکل های انتقال داده در وب به سرور ارسال نماید، در سرور این فایل ها توسط برنامه نویسی سمت سرور مانند زبان PHP یا موارد مشابه مدیریت می شوند و اگر همه چیز درست باشد فایل بر روی حافظه سخت افزاری یا به عبارتی هارددیسک سرور ذخیره شده و از این لحظه قابل استفاده است.

چگونه یک فایل را با ای جکس آپلود کنیم؟


پس از بکارگیری تکنیک های مبتنی بر ای جکس از سال 2000 میلادی توسط برخی توسعه دهندگان وب و استفاده همگانی از این فناوری (با معرفی نسخه بتای گوگل مپ) در سال 2005 تا چندین سال بعد اگرچه از بسیاری جنبه ها پیشرفت کرده بود و می توانستیم به کمک آن مقادیر موجود در فرم های HTML را بدون رفرش صفحه به سرور ارسال کنیم اما در مورد ارسال فایل مشکل وجود داشت و ای جکس (آبجکت XHR مخفف XMLHttpRequest) نمی توانست از این قابلیت پشتیبانی کند و متد مناسبی که مرورگرهای استاندارد از آن پشتیبانی کنند عملا وجود نداشت، تا مدتها برای کاربران گزینه های جایگزین دیگری در دسترس بود از جمله استفاده از کتابخانه های جاوا اسکریپتی نظیر جی کئوری (jQuery) و موتولز (Mootools) که با جلوه ها و محیط کاربری زیبا می توانستند فایل ها را آپلود کنند، هنوز هم این روش ها در موارد خاص خود کاربرد دارند اما مهم بود که ای جکس صرف نیز بتواند عملیات آپلود فایل را برای برنامه های تحت وب انجام دهد، این نیاز رفته رفته باعث توسعه API جدیدی تحت عنوان FormData شد که از طریق آن می توانیم تمام مواردی که از طریق تگ form در صفحات HTML به سرور ارسال کنیم را با ای جکس انجام دهیم، از آنجایی که برخی مرورگرهای قدیمی از آبجکت های این API به درستی پشتیبانی نمی کنند در این آموزش علاوه بر روش اصلی از روشی شبیه سازی شده بر اساس فرایند ای جکس اما مبتنی بر جاوا اسکریپت و تکنیک iframe نیز استفاده خواهیم کرد.

آپلود فایل با استفاده از آبجکت های FormData و Ajax


نیاز وب مدرن و تکیه بیشتر برنامه ها به شیوه ای جکس معرفی API جدیدی تحت عنوان FormData را با هدف رفع نواقص موجود درپی داشت که به کمک آبجکت های آن می توانیم همان طور که در شیوه متداول فرم های وب را از سمت کاربر به سرور ارسال می کنیم با ای جکس نیز این کار را انجام دهیم، در آبجکت های FormData اطلاعات به صورت کلید و مقدار تنظیم و در نهایت با متد XMLHttpRequest.send قابل ارسال هستند، کلید نام فیلدها و مقدار داده ای است که ارسال می شود و می تواند از نوع رشته، عدد، آرایه، فایل و... باشد، در ادامه نحوه آپلود فایل بدون رفرش صفحه با FormData و Ajax را بررسی می کنیم.

کد HTML برای آپلود فایل با FormData و Ajax


اولین قسمتی که برای ایجاد امکان آپلود فایل با FormData و Ajax مورد نیاز است کدنویسی سمت کاربر با استفاده از تگ form در HTML است که در نمونه صفحه زیر این کار را انجام داده ایم، این فایل را با نام index.html ذخیره می کنیم:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | آپلود فایل بدون رفرش صفحه با formdata</title>
<!-- Webgoo.ir -->
</head>
<body>
<noscript>جاوا اسکریپت در مرورگر شما غیر فعال است!</noscript>
<form id="upload-form" class="inline" action="ajax-formdata-upload.php" method="post" enctype="multipart/form-data">
<label for="user-file">انتخاب فایل:</label>
<input type="file" id="user-file" name="user-file" onchange="uploadInfo(0);">
</form>
<button class="inline" onclick="uploadStart('upload-form', 'user-file');">آپلود فایل</button>
<div id="file-name"></div>
<div id="file-size"></div>
<div id="file-type"></div>
<div id="upload-process"></div>
<div id="upload-result"></div>
<hr>
نکته: این برنامه صرفا جنبه آموزشی داشته و استفاده از آن بدون تسلط بر PHP و توابع مربوط به فایل، توصیه نمی شود.
<br><br>
[توسعه یافته توسط <a href="https://webgoo.ir" title="وبگو | آموزش برنامه نویسی و مهارتهای وب" target="_blank">Webgoo.ir</a>]
</body>
</html>
توضیح:
- همان طور که مشخص است در قسمت action فرم آدرس فایل PHP تنظیم شده است،البته در تکنیک ای جکس این قسمت لازم نیست و URL اصلی در متد open درج می شود که در ادامه خواهیم دید.
- تگ form باید یک ID منحصربفرد داشته باشد، از این آی دی برای انتخاب فرم در هنگام فراخوانی FormData استفاده خواهیم کرد.
- فایل از طریق تگ input از نوع file برای آپلود انتخاب می شود، با انتخاب فایل توسط کاربر رویداد onchange اجرا و تابع جاوا اسکریپتی uploadInfo با آرگیومنت 0 فراخوانی می شود، همان طور که مشخص است تگ فایل نیز یک ID خاص دارد که در کدهای جاوا اسکریپت از آن استفاده خواهیم کرد.
- برای شروع فرایند آپلود دکمه از نوع button در نظر گرفته ایم که پس از کلیک کاربر تابع uploadStart را فراخوانی می کند، این تابع دو آرگیومنت دارد که به ترتیب آی دی فرم و آی دی تگ مربوط به فایل است.
- برای مدیریت اطلاعاتی که قبل، حین و پس از آپلود می توانیم به کاربر نمایش دهیم تگ های div در نظر گرفته ایم که هر کدام آی دی مخصوص به خود دارند.

کد CSS و جاوا اسکریپت آپلود فایل با FormData و Ajax


کدهای HTML به تنهایی صرفا چارچوب اولیه برنامه را تشکیل می دهند و جلوه های ظاهری و تعاملی و همچنین امکان آپلود به صورت بدون رفرش صفحه به کمک استایل CSS و کدنویسی جاوا اسکریپت امکانپذیر می شود که در نمونه زیر این کار را انجام داده ایم، این کدها را قبل از بسته شدن تگ head در فایل index.html اضافه می کنیم:
<style>
body {
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
a{
    text-decoration:none;
    color:#06C;
}
a:hover {
    color:#666;
}
.inline {
    display:inline-block;
}
.ok {
    display:block;
    padding:4px;
    border:0px #666 solid;
    color:#090;
    width:300px;
}
.error {
    display:block;
    padding:4px;
    border:0px #666 solid;
    color:#C00;
    width:300px;    
}
</style>
<script>
function uploadInfo(clear){
    var file = document.getElementById('user-file').files[0];
    var elm_name = document.getElementById('file-name');
    var elm_size = document.getElementById('file-size');
    var elm_type = document.getElementById('file-type');
    var elm_process = document.getElementById('upload-process');
    var elm_result = document.getElementById('upload-result');

    if(file && clear === 0){
        var file_size = 0;
        
        if(file.size > 1024 * 1024){
            file_size = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
        } else{
            file_size = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
        }
          
        elm_name.innerHTML = 'Name: ' + file.name;
        elm_size.innerHTML = 'Size: ' + file_size;
        elm_type.innerHTML = 'Type: ' + file.type;
        elm_process.innerHTML = '';
        elm_result.innerHTML = '';
    } else{
        elm_name.innerHTML = '';
        elm_size.innerHTML = '';
        elm_type.innerHTML = '';
    }
}

function uploadStart(form_id, file_id){
    if(document.getElementById(file_id).value != ''){
        var xhr = new XMLHttpRequest();
        var form = document.getElementById(form_id);
        var fd = new FormData(form);

        xhr.upload.addEventListener("progress", uploadProgress, false);
        xhr.addEventListener("abort", uploadCanceled, false);
        xhr.addEventListener("error", uploadFailed, false);
        xhr.addEventListener("load", uploadEnd, false);

        xhr.open("POST", "ajax-formdata-upload.php");
        xhr.send(fd);
    } else{
        alert('لطفا ابتدا یک فایل انتخاب کنید!');
    }
    
    return false;
}

function uploadProgress(evt){
    if(evt.lengthComputable){
        var percent_complete = Math.round(evt.loaded * 100 / evt.total);
        document.getElementById('upload-process').innerHTML = percent_complete.toString() + '%';
    } else{
        document.getElementById('upload-process').innerHTML = 'محاسبه درصد آپلود ممکن نیست!';
    }
}

function uploadCanceled(evt){
    alert("آپلود فایل توسط کاربر منتفی یا مرورگر ارتباط را قطع کرد!");
}

function uploadFailed(evt){
    alert("بروز خطا در فرآیند آپلود فایل!");
}

function uploadEnd(evt){
    var result = evt.target.responseText;
    document.getElementById('upload-result').innerHTML = result;
    uploadInfo(1);
}
</script>
توضیح:
- در استایل CSS این نمونه کد جهت جلوگیری از پیچیده شدن کار صرفا چند کلاس ساده در نظر گرفته ایم که ویژگی های کلی صفحه و رنگ متن خطا یا پیغام آپلود موفق را مشخص می کند، قاعدتا برای استفاده کاربردی از برنامه می توانیم بر اساس سلیقه این قسمت را تکمیل کنیم.
- کدهای جاوا اسکریپت شامل چند تابع با نامگذاری دلخواه uploadInfo، uploadStart، uploadProgress، uploadCanceled، uploadFailed و uploadEnd است که هر کدام در مرحله و تحت شرایط خاصی فراخوانی می شوند.
- تابع uploadInfo در دو قسمت و با دو مقدار مختلف (0 یا 1 برای آرگیومنت clear) فراخوانی می شود، پس از انتخاب فایل توسط کاربر رویداد onchange اجرا شده و تابع با آرگیومنت 0 فراخوانی می شود، 0 در اینجا یعنی اطلاعات مربوط به فایل (نام، اندازه و نوع) در بلاک های div در نظر گرفته شده نمایش داده شود، اگر این مقدار 1 باشد اطلاعات این بلاک ها حذف می شود که این کار در پایان فرآیند آپلود در تابع uploadEnd صورت می گیرد.
- uploadStart تابع اصلی برنامه است که وظیفه فراهم سازی ساز و کار ارسال درخواست ای جکس و آپلود فایل با آبجکت FormData را بر عهده دارد، این تابع دو آرگیومنت دارد که به ترتیب آی دی فرم و آی دی فیلد فایل را مشخص می کند، تابع uploadStart پس از کلیک کاربر بر روی دکمه آپلود فراخوانی می شود، نکته مهم در این تابع استفاده از addEventListener برای اختصاص عملیات هایی در هنگام تغییر وضعیت رویدادهای درخواست ای جکس است که شامل دریافت مقادیر درصدی آپلود شده (رویداد progress)، منتفی شدن آپلود (رویداد abort)، بروز خطا (رویداد error) و پایان فرآیند آپلود (رویداد load) است، در هر کدام از این رویدادها تابع متناظر با آن فراخوانی می شود.
- تابع uploadProgress برای محاسبه و نمایش مقدار حجم آپلود شده به صورت کیلوبایت، درصد و... است، در این تابع از دو متد loaded و total استفاده کرده ایم، مقادیر در این دو متد بر اساس بایت است که با محاسبات ساده ریاضی در نهایت میزان پیشرفت فرآیند آپلود را به صورت درصدی نمایش می دهیم، قاعدتا با در اختیار داشتن مقدار عددی حجم آپلود شده در لحظه می توانیم شکل ظاهری کار را به نحو دلخواه و سفارشی طراحی کنیم، به فرض بلاکی با رنگ متمایز برای خط آپلود (Progress Bar) کدنویسی و با جاوا اسکریپت (متد style) میزان عرض بلاک را متناسب با درصد آپلود شده به روز کنیم.
- توابع uploadCanceled و uploadFailed برای مواردی است که یا آپلود توسط کاربر متوقف می شود یا اینکه به هر دلیل اشکالی در فرآیند وجود داشته که آپلود کامل نمی شود.
- در صورت آپلود موفق در نهایت تابع uploadEnd فراخوانی می شود، این تابع پاسخ سرور را در بلاک div هدف چاپ و با فراخوانی مجدد تابع uploadInfo با مقادیر 1 برای آرگیومنت clear موارد اضافه موجود در صفحه را نیز حذف می کند.

کد PHP برای پردازش فایل آپلود شده با FormData و Ajax


ساختارهای برنامه های وب معمولا از دو بخش اصلی سمت کاربر و سمت سرور تشکیل شده اند که تا اینجا کدهای سمت کاربر (HTML، JavaScript و Ajax) را نوشتیم، در گام بعدی در فایلی با نام دلخواه ajax-formdata-upload.php دستورات زیر را درج می کنیم تا مرحله بررسی و ذخیره سازی فایل آپلود شده در حافظه هارد دیسک سرور به درستی انجام شود:
<?php
//برای جلوگیری از خطاهای ناخواسته موارد زیر در فایل php.ini بررسی و مطابق نیاز تنظیم شده باشند:
/*
file_uploads = برابر On یا 1 تنظیم شده باشد.
upload_max_filesize = حداکثر حجم معتبر فایل، آپلود فایل های بزرگتر توسط PHP رد می شود!
post_max_size = حداکثر حجم معتبر ارسال داده در متد POST، باید بیشتر از پارامتر upload_max_filesize تعیین شود.
max_file_uploads = حداکثر تعداد فایل قابل آپلود در یک ارسال.
*/

//فرمت های مجاز
$valid_extension = array('jpg', 'png', 'gif');

//نوع فایل های مجاز
$valid_mime = array('image/jpeg', 'image/png', 'image/gif');

//تعیین فرمت، نوع فایل یا اندازه مجاز و سایر پارامترها
if(in_array(pathinfo($_FILES["user-file"]["name"], PATHINFO_EXTENSION), $valid_extension) && in_array($_FILES["user-file"]["type"], $valid_mime) && $_FILES["user-file"]["size"] < 1048576) {
    //بررسی سایر خطاهای سرور
    if ($_FILES["user-file"]["error"] > 0) {
        echo '<div class="error">خطا: ' . $_FILES["user-file"]["error"] . '</div><br>';
    } //بررسی وجود یا عدم وجود فایل با نام مشابه در سرور    
    else {
        if(file_exists('user-files/' . $_FILES["user-file"]["name"])) {
            echo '<div class="error">این فایل در حال حاضر وجود دارد!</div><br>';
        } //انتقال و ذخیره فایل در سرور    
        else {            
            if(move_uploaded_file($_FILES["user-file"]["tmp_name"], 'user-files/' . $_FILES["user-file"]["name"])) {
                echo '<div class="ok">فایل با موفقیت آپلود شد!</div><br>';
                echo 'فایل: ' . $_FILES["user-file"]["name"] . '<br>';
                echo 'نوع: ' . $_FILES["user-file"]["type"] . '<br>';
                echo 'اندازه: ' . ($_FILES["user-file"]["size"] / 1024) . ' Kb<br>';
                echo 'دایرکتوری: user-files/' . $_FILES["user-file"]["name"]. '<br>';
            } else {
                echo '<div class="error">ذخیره سازی فایل در سرور با مشکل مواجه شد!</div><br>';
            }
        }
    }
} //خطای تعیین فرمت، نوع یا اندازه مجاز و سایر پارامترها
else {
    //print_r( $_FILES["user-file"]);
    
    if($_FILES["user-file"]["size"] > 1048576) {
        echo '<div class="error">حجم فایل خیلی زیاد است! اندازه مجاز 1 مگابایت.</div>';
    } else {
        echo '<div class="error">فرمت یا نوع فایل مجاز نیست!</div>';
    }
}
?>
توضیح:
- برای دریافت فایل آپلود شده در PHP از متغیر از پیش تعریف شده FILES که به صورت آرایه است استفاده می کنیم، کلید اول آرایه نام فیلد input است که فایل در آن انتخاب و ارسال می شود، کلید دوم آرایه پارامترهای مربوط به نام، نوع، حجم، اندازه و... فایل آپلود شده است.
- پارامترهای فایل آپلود شده در آرایه FILES می تواند شامل موارد زیر باشد:
<?php
//نام فایل آپلود شده
$_FILES['user-file']['name'];
//نوع MIME فایل مانند image/jpeg
$_FILES['user-file']['type'];
//حجم فایل به بایت
$_FILES['user-file']['size'];
//نام موقت فایل در سرور
$_FILES['user-file']['tmp_name'];
//شماره خطای برگردانده شده توسط سرور
$_FILES['user-file']['error'];
?>
- خطاهای مربوط به کار با فایل اعدادی از 1 تا 8 هستند، اگر همه چیز درست باشد عدد صفر برگردانده می شود، در زیر به طور مختصر به این خطاها اشاره می کنیم:
UPLOAD_ERR_OK: عدد 0 برگردانده می شود و این به معنی عدم خطا است.
UPLOAD_ERR_INI_SIZE: عدد 1 برگردانده می شود، فایل آپلود شده از حداکثر حجم تنظیم شده در تنظیمات php.ini بیشتر است.
UPLOAD_ERR_FORM_SIZE: عدد 2 برگردانده می شود، فایل آپلود شده از حداکثر حجم تنظیم شده در فرم HTML بیشتر است (در فرم HTML می توانیم فیلد مخفی با نام MAX_FILE_SIZE داشته باشیم و در قسمت value حداکثر حجم مجاز را به بایت تعیین کنیم، البته در حال حاضر این روش قابل اطمینان نیست و باید حتما در سرور مجدد اعتبارسنجی با PHP صورت گیرد).
UPLOAD_ERR_PARTIAL: عدد 3 برگردانده می شود، فایل به صورت ناقص آپلود شده است.
UPLOAD_ERR_NO_FILE: عدد 4 برگردانده می شود، هیچ فایلی آپلود نشد.
UPLOAD_ERR_EMPTY: عدد 5 برگردانده می شود، فایل آپلود شده صفر بایت است یا فیلد خالی می باشد.
UPLOAD_ERR_NO_TMP_DIR: عدد 6 برگردانده می شود (تنها در نسخه 4.3.10 و بالاتر)، مفسر PHP نمی تواند پوشه tmp را پیدا کند.
UPLOAD_ERR_CANT_WRITE: عدد 7 برگردانده می شود (تنها در نسخه 5.1.0 و بالاتر)، مفسر PHP نمی تواند فایل را ذخیره کند.
UPLOAD_ERR_EXTENSION: عدد 8 برگردانده می شود (تنها در نسخه 5.2.0 و بالاتر)، یکی از الحاقات PHP مانع آپلود فایل شده است، استفاده از ()phpinfo ممکن است به رفع مشکل کمک کند.
- برای بررسی پسوند (Extension) فایل ها از تابع pathinfo با آرگیومنت PATHINFO_EXTENSION استفاده می کنیم.
- علاوه بر بررسی پسوند فایل باید نوع MIME آن را نیز بررسی کنیم، بدین منظور از پارامتر type برای FILES استفاده می کنیم.
- اندازه مجاز تعیین شده در این نمونه کد 1 مگابایت (معادل 1048576 بایت) است.
- تابع file_exists بررسی می کند که آیا فایل ارسال شده از قبل در دایرکتوری مورد نظر وجود دارد یا خیر.
- اگر همه چیز درست باشد نهایتا PHP با تابع move_uploaded_file فایل را در دایرکتوری مورد نظر (در اینجا فولدر user-files) ذخیره می کند.

دانلود کد آپلود فایل با PHP به شیوه FormData و Ajax


در لینک زیر کدهای بالا را به اضافه تنظیمات کاملتر در یک بسته جهت دانلود قرار داده ایم، پس از دریافت فایل کافی است آن را روی لوکال هاست یا سرور اجرا کنیم:
دانلود کد آپلود فایل با PHP به شیوه FormData و Ajax - حجم: کمتر از 5 کیلوبایت
نکته: این برنامه صرفا جنبه آموزشی داشته و استفاده از آن بدون تسلط بر PHP و توابع مربوط به فایل توصیه نمی شود.

آپلود فایل با استفاده از ترکیب جاوا اسکریپت و تکنیک iframe


اگرچه امروزه استفاده از API جدیدتر FormDate و ارسال مقادیر فرم در بستر ای جکس روش بهینه و مورد پسند توسعه دهندگان وب است و توسط اغلب مرورگرها پشتیبانی می شود اما ممکن است به دلایلی از جمله استفاده اغلب کاربران یک برنامه از مرورگرهای قدیمی و عدم پشتیبانی کامل این مرورگرها از آبجکت های زیر مجموعه FormDate یا به دلایل دیگر همچنان نیاز به روش های جایگزین مانند ترکیب جاوا اسکریپت و تکنیک iframe احساس شود، به همین دلیل جهت آشنایی بیشتر در ادامه آموزش این روش را نیز بررسی می کنیم.
ajax-file-uploading.jpg

کد HTML برای آپلود فایل با تگ iframe


در شیوه iframe فرم آپلود به صورت فریم در صفحه اصلی قرار می گیرد، به این صورت با کمک جاوا اسکریپت می توانیم فرآیند ارسال فرم را در بستر فریم داخلی انجام دهیم تا صفحه اصلی تغییر نکند و به اصطلاح رفرش نشود، بدین منظور نمونه فرم HTML زیر را در فایلی با نام index.html کدنویسی کرده ایم:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | آپلود فایل بدون رفرش صفحه با iframe</title>
<!-- Webgoo.ir -->
</head>
<body>
<noscript>جاوا اسکریپت در مرورگر شما غیر فعال است!</noscript>
<form action="ajax-iframe-upload.php" method="post" enctype="multipart/form-data" target="upload-target" onsubmit="return uploadStart(this.form, 'user-file');">
<label for="user-file"></label>
<input type="file" id="user-file" name="user-file">
<input type="submit" value="آپلود فایل">
</form>
<div id="upload-process"><img src="loading.gif" height="16" width="16" alt="loading"> در حال پردازش...</div>
<div id="upload-form"></div>
<iframe id="upload-target" name="upload-target" class="frame"></iframe>
</body>
</html>
توضیح:
- در قسمت action فرم، آدرس فایل PHP یا URL مقصد را درج می کنیم، فایل های آپلود شده به این آدرس ارسال، پردازش و مدیریت می شوند.
- در قسمت متد ارسال فایل از متد POST استفاده خواهیم کرد، متد POST برخلاف GET برای ارسال پارامترها در پس زمینه (بدون امکان روئیت) کاربرد دارد.
- بخش مربوط به enctype (مخفف Encoding Type) و مقادیر multipart/form-data این امکان را به مرورگر خواهد داد تا فایل را به صورت بخش بخش شده به سرور انتقال دهد، در حالت معمول و به طور پیش فرض مرورگر از مقادیر application/x-www-form-urlencoded استفاده می کند که برای انتقال فایل و داده های حجیم مناسب نیست.
- قسمت مربوط به target به جهت استفاده از تکنیک iframe قرار داده شده که مقادیر آن در واقع آی دی iframe (در اینجا upload-target) است، گفتیم که در روش فریم فایل از طریق تگ iframe و بدون رفرش صفحه اصلی ارسال می شود، لذا بستر ارسال فرم را با پارامتر target تعیین می کنیم.
- قسمت onsubmit و مقادیر آن مربوط به فراخوانی تابع جاوا اسکریپتی است که هنگام ارسال فرم اجرا می شود و وظیفه اعتبارسنجی خالی نبودن فیلد فایل و تغییر استایل بلاک مربوط به نمایش پیام ها به حالت visible (قابل روئیت) را برعهده دارد.
- برای ایجاد امکان انتخاب و ارسال فایل باید از تگ input و نوع file استفاده کنیم، ذکر این نکته لازم است که مقادیر و استایل دکمه انتخاب فایل (Choose File) به صورت پیش فرض توسط مرورگرها تعیین می شود و برای تغییر آن باید از تکنیک CSS و جاوا اسکریپت استفاده کرد.
- نهایتا با در نظر گرفتن دکمه از نوع submit فرم را ارسال می کنیم، نکته مهم اینکه نوع دکمه ارسال فایل باید حتما submit باشد چون برای اجرای تابع جاوا اسکریپتی خود از رویداد onsubmit استفاده کرده ایم.
- بلاک های div که در پائین تگ form ایجاد کرده ایم برای مدیریت نمایش پیام در حال پردازش، پیغام خطا یا موفقیت آمیز بودن فرآیند آپلود و انتقال فایل به سرور است.
- تگ iframe را نیز برای دریافت پیام سرور بعد از آپلود فایل در قسمت انتهایی کدها در نظر گرفته ایم که دلخواه و قابل سفارشی سازی است.

کد CSS و جاوا اسکریپت در تکنیک آپلود با iframe


برای اینکه برنامه ما به صورت دلخواه و به درستی کار کند باید تنظیمات و کنترل کاملتری روی آن اعمال کنیم، بدین منظور از کدهای CSS جهت سفارشی سازی ظاهر کار و برنامه نویسی جاوا اسکریپت (JavaScript) جهت مدیریت رفتارهای تعاملی و ارسال فایل و دریافت پاسخ به شکل زیر در فایل index.html استفاده می کنیم:
<style>
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
a{
    text-decoration:none;
    color:#06C;
}
a:hover{
    color:#666;
}
.ok {
    display:block;
    padding:4px;
    border:0px #666 solid;
    color:#090;
    width:300px;
}
.error {
    display:block;
    padding:4px;
    border:0px #666 solid;
    color:#C00;
    width:300px;    
}
#upload-process{
    z-index:1000;
    visibility:hidden;
}
.frame{
    width:300px;
    height:100px;
    border:0px;    
}
</style>
<script>
function uploadStart(form, file){
    if(document.getElementById(file).value != ''){
        document.getElementById('upload-process').style.visibility = 'visible';
        return true;
    } else{
        alert('لطفا ابتدا یک فایل انتخاب کنید!');
        return false;
    }
}

function uploadEnd(check){
    var result = '';
      
    if (check == 1){
        result = '<span class="ok">فایل با موفقیت آپلود شد!<\/span>';
    } else {
        result = '<span class="error">انتقال فایل به سرور انجام نشد!<\/span>';
    }
      
    document.getElementById('upload-process').style.visibility = 'hidden';
    document.getElementById('upload-form').innerHTML = result;
}
</script>
توضیح:
- استایل CSS تنظیمات مربوط به ظاهر عناصر HTML را مدیریت می کند و با تغییر در مقادیر کلاس و آی دی به راحتی می توانیم ویژگی های سفارشی را متناسب با سلیقه و نیازمان اعمال کنیم.
- کد جاوا اسکریپت بالا دو تابع ساده دارد، تابع اول با نام uploadStart با کلیک بر روی دکمه ارسال فرم فراخوانی می شود و در صورتی که فیلد فایل خالی نباشد استایل بلاک div با آی دی upload-process را از حالت hidden به حالت مرئی یا visible تبدیل می کند، در تابع دوم (uploadEnd) یک عدد که پس از ارسال فرم از کدهای PHP دریافت می شود را بررسی می کنیم و متناسب با مقدار آن پیام و اطلاعاتی به کاربر نمایش خواهیم داد،اگر این مقدار 1 باشد پیام موفقیت و در غیر اینصورت پیغام خطا تنظیم می شود.
نکته: تابع uploadEnd به صورت داینامیک فراخوانی می شود، یعنی قسمت فراخوانی آن ابتدا در خروجی کدهای صفحه index.html وجود ندارد اما پس از ارسال فرم در انتهای فایل ajax-iframe-upload.php و در فریم چاپ می شود.
- در اینجا برای مقداردهی پیغام ها در بلاک div با آی دی upload-form از متد innerHTML استفاده کرده ایم.

کد PHP برای پردازش فایل آپلود شده در تکنیک iframe


پس از اینکه کاربر فرم را ارسال می کند در سمت سرور باید کدی داشته باشیم که بتواند فایل را دریافت و فرآیند آپلود را مدیریت کند، در PHP متغیر از پیش تعریف شده (Predefined Variable) با نام FILES وجود دارد که بدین منظور مورد استفاده قرار می گیرد، با این توضیح کدهای زیر را در فایلی با نام ajax-iframe-upload.php درج می کنیم:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | فایل سرور برای پردازش آپلود</title>
<!-- Webgoo.ir -->
<style>
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
.response-text{
    font-style:italic;
}
</style>
<?php
//برای جلوگیری از خطاهای ناخواسته موارد زیر در فایل php.ini بررسی و مطابق نیاز تنظیم شده باشند:
/*
file_uploads = برابر On یا 1 تنظیم شده باشد.
upload_max_filesize = حداکثر حجم معتبر فایل، آپلود فایل های بزرگتر توسط PHP رد می شود!
post_max_size = حداکثر حجم معتبر ارسال داده در متد POST، باید بیشتر از پارامتر upload_max_filesize تعیین شود.
max_file_uploads = حداکثر تعداد فایل قابل آپلود در یک ارسال.
*/

//فرمت های مجاز
$valid_extension = array('jpg', 'png', 'gif');

//نوع فایل های مجاز
$valid_mime = array('image/jpeg', 'image/png', 'image/gif');

//تعیین فرمت، نوع فایل یا اندازه مجاز و سایر پارامترها
if(in_array(pathinfo($_FILES["user-file"]["name"], PATHINFO_EXTENSION), $valid_extension) && in_array($_FILES["user-file"]["type"], $valid_mime) && $_FILES["user-file"]["size"] < 1048576) {
    //بررسی سایر خطاهای سرور
    if ($_FILES["user-file"]["error"] > 0) {
        echo '<div class="response-text">خطا: ' . $_FILES["user-file"]["error"] . '</div><br>';
        $check = 0;
    } //بررسی وجود یا عدم وجود فایل با نام مشابه در سرور    
    else {
        if(file_exists('user-files/' . $_FILES["user-file"]["name"])) {
            echo '<div class="response-text">این فایل در حال حاضر وجود دارد!</div><br>';
            $check = 0;
        } //انتقال و ذخیره فایل در سرور    
        else {          
            if(move_uploaded_file($_FILES["user-file"]["tmp_name"], 'user-files/' . $_FILES["user-file"]["name"])) {
                echo 'فایل: ' . $_FILES["user-file"]["name"] . '<br>';
                echo 'نوع: ' . $_FILES["user-file"]["type"] . '<br>';
                echo 'اندازه: ' . ($_FILES["user-file"]["size"] / 1024) . ' Kb<br>';
                echo 'دایرکتوری: user-files/' . $_FILES["user-file"]["name"]. '<br>';
                $check = 1;
            } else {
                echo '<div class="response-text">ذخیره سازی فایل در سرور با مشکل مواجه شد!</div><br>';
                $check = 0;
            }
        }
    }
} //خطای تعیین فرمت، نوع یا اندازه مجاز و سایر پارامترها
else {
    //print_r( $_FILES["user-file"]);
    
    if($_FILES["user-file"]["size"] > 1048576) {
        echo '<div class="response-text">حجم فایل خیلی زیاد است! اندازه مجاز 1 مگابایت.</div>';
    } else {
        echo '<div class="response-text">فرمت یا نوع فایل مجاز نیست!</div>';
    }
    
    $check = 0;
}
?>
<script>
window.top.window.uploadEnd(<?php echo $check; ?>);
</script>
</head>
</html>
توضیح:
- برای دریافت فایل آپلود شده در PHP از متغیر از پیش تعریف شده FILES که به صورت آرایه است استفاده می کنیم، کلید اول آرایه نام فیلد input است که فایل در آن انتخاب و ارسال می شود، کلید دوم آرایه پارامترهای مروبط به نام، نوع، حجم، اندازه و... فایل آپلود شده است.
- پارامترهای فایل آپلود شده در آرایه FILES می تواند شامل موارد زیر باشد:
<?php
//نام فایل آپلود شده
$_FILES['user-file']['name'];
//نوع MIME فایل مانند image/jpeg
$_FILES['user-file']['type'];
//حجم فایل به بایت
$_FILES['user-file']['size'];
//نام موقت فایل در سرور
$_FILES['user-file']['tmp_name'];
//شماره خطای برگردانده شده توسط سرور
$_FILES['user-file']['error'];
?>
- خطاهای مربوط به کار با فایل اعدادی از 1 تا 8 هستند، اگر همه چیز درست باشد عدد صفر برگردانده می شود، در زیر به طور مختصر به این خطاها اشاره می کنیم:
UPLOAD_ERR_OK: عدد 0 برگردانده می شود و این به معنی عدم خطا است.
UPLOAD_ERR_INI_SIZE: عدد 1 برگردانده می شود، فایل آپلود شده از حداکثر حجم تنظیم شده در تنظیمات php.ini بیشتر است.
UPLOAD_ERR_FORM_SIZE: عدد 2 برگردانده می شود، فایل آپلود شده از حداکثر حجم تنظیم شده در فرم HTML بیشتر است (در فرم HTML می توانیم فیلد مخفی با نام MAX_FILE_SIZE داشته باشیم و در قسمت value حداکثر حجم مجاز را به بایت تعیین کنیم، البته در حال حاضر این روش قابل اطمینان نیست و باید حتما در سرور مجدد اعتبارسنجی با PHP صورت گیرد).
UPLOAD_ERR_PARTIAL: عدد 3 برگردانده می شود، فایل به صورت ناقص آپلود شده است.
UPLOAD_ERR_NO_FILE: عدد 4 برگردانده می شود، هیچ فایلی آپلود نشد.
UPLOAD_ERR_EMPTY: عدد 5 برگردانده می شود، فایل آپلود شده صفر بایت است یا فیلد خالی می باشد.
UPLOAD_ERR_NO_TMP_DIR: عدد 6 برگردانده می شود (تنها در نسخه 4.3.10 و بالاتر)، مفسر PHP نمی تواند پوشه tmp را پیدا کند.
UPLOAD_ERR_CANT_WRITE: عدد 7 برگردانده می شود (تنها در نسخه 5.1.0 و بالاتر)، مفسر PHP نمی تواند فایل را ذخیره کند.
UPLOAD_ERR_EXTENSION: عدد 8 برگردانده می شود (تنها در نسخه 5.2.0 و بالاتر)، یکی از الحاقات PHP مانع آپلود فایل شده است، استفاده از ()phpinfo ممکن است به رفع مشکل کمک کند.
- برای بررسی پسوند (Extension) فایل ها از تابع pathinfo با آرگیومنت PATHINFO_EXTENSION استفاده می کنیم.
- علاوه بر بررسی پسوند فایل باید نوع MIME آن را نیز بررسی کنیم، بدین منظور از پارامتر type برای FILES استفاده می کنیم.
- اندازه مجاز تعیین شده در این نمونه کد 1 مگابایت (معادل 1048576 بایت) است.
- تابع file_exists بررسی می کند که آیا فایل ارسال شده از قبل در دایرکتوری مورد نظر وجود دارد یا خیر.
- اگر همه چیز درست باشد نهایتا PHP با تابع move_uploaded_file فایل را در دایرکتوری مورد نظر (در اینجا فولدر user-files) ذخیره می کند.

دانلود کد آپلود فایل با PHP به شیوه iframe


در لینک زیر کدهای بالا را به اضافه تنظیمات کاملتر در یک بسته جهت دانلود قرار داده ایم، پس از دریافت فایل کافی است آن را روی لوکال هاست یا سرور اجرا کنیم:
دانلود کد آپلود فایل با PHP به شیوه iframe - حجم: کمتر از 5 کیلوبایت
نکته: این برنامه صرفا جنبه آموزشی داشته و استفاده از آن بدون تسلط بر PHP و توابع مربوط به فایل توصیه نمی شود.
دسته بندی: آموزش کاربردی » Ajax
برچسب ها: Ajax - PHP
قبلی »
« بعدی
related مطالب بیشتر:
نمایش داینامیک و صفحه به صفحه مطالب با ای جکس (Ajax)
نمایش زنده آمار و اطلاعات با ای جکس (Ajax)
ساخت قابلیت امتیازدهی با PHP و Ajax
اعتبارسنجی همزمان فرم با ای جکس (Ajax) و PHP
نمایش نتایج پایگاه داده MySQL با PHP و ای جکس (Ajax)
دیدگاه
more ۱۴۷ دیدگاه برای این مطلب ارسال شده است.
more چینش دیدگاه ها به ترتیب از جدیدترین به قدیمی ترین است.
حمیدرضا کمالی
۱۸:۳۶ ۱۳۹۵/۰۴/۰۳
با سلام و تشکر از مطالب مفیدتون ، من یک فرمی دارم که انتخاب عکس اختیاریه ، ولی متاسفانه اگر عکسی برای بارگذاری انتخاب نشه نمی گذاره اطلاعات ارسال بشه و روی فیلد بارگذاری عکس میره و می گه حتما باید یک فایل انتخاب کنی، لطفا راهنمایی کنید
سورس کدها باید بررسی شوند، لطفا فرم مورد نظر را در وب آپلود کرده و آدرس صفحه را ارسال کنید تا بررسی گردد.
شیما
۱۲:۴۰ ۱۳۹۵/۰۳/۲۷
سلام
من یک صفحه برای وارد کردن کالا به صفحه ی سایت طراحی کردم. و میتوانم فرم را به صورت جداگانه ذخیره کنم. در همان صفحه امکان اپلود تصویر را هم قرار دادم که با ایجکس هست و درست کار می کند . اما نمیدانم اولا عکس رو چه جوری در پایگاه ذخیره کنم و دوما چجوری این دو همزمان ذخیره شوند؟
لطفا راهنماییم کنین. ممنون
سوالتان کلی است! ذخیره تصاویر آپلود شده در وب نیازمند آشنایی شما با متد FILES در PHP و توابع مربوطه است که باید در جای خود فرا گرفته شود (بهتر است فایل ها در هارد سرور ذخیره شوند و صرفا اطلاعات متنی آنها در دیتابیس موجود باشد)، اما در مورد ارسال هم زمان فایل و اطلاعات، چه از طریق AJAX و چه از طریق فرم عادی این کار ممکن است، در کل باید خصوصیت enctype تگ form به صورت multipart/form-data باشد، در این صورت برای فایل از نوع file و برای متن از نوع text در قسمت input فرم HTML استفاده کنید، در سرور و در کدهای PHP نیز از متغییر FILES برای فایل ها و از متغییر POST برای سایر موارد استفاده کنید.
حسین
۱۶:۳۱ ۱۳۹۵/۰۱/۳۱
سلام خدمت ادمین عزیز
شاید سوالم تا حدودی از حیطه این مقاله خارج باشه اما چون مستاصل شده بودم مجبور شدم اینجا مطرحش کنم.
واسه آپلود فایل از طریق ftp با استفاده از php ، چیکار باید کرد که درصد آپلود فایل رو نشون بده.
در واقع منظورم این بود که چیکار باید کرد که بشه آپلود فایل رو از طریق ftp با استفاده از ajax انجام داد و صفحه رفرش نشه
و اینکه میشه کاری کرد که سرعت آپلود با این روش زیادتر هم بشه؟
ممنون از سایت خوبتون و ممنون از وقتی که میذارید
در مورد نمایش درصد آپلود و... در حال حاضر باید از راه حل هایی مانند کدهای جی کئوری استفاده کنید، مثال:
http://www.ultramegasoft.com/blog/2010/10/create-an-upload-progress-bar-with-php-and-jquery/

http://www.sitepoint.com/tracking-upload-progress-with-php-and-javascript/
سرعت آپلود بیشتر بستگی به تنظیمات و قدرت سرور و قاعدتا کیفیت و سرعت اینترنت شما دارد، در سمت کاربر عملا روشی برای افزایش سرعت وجود ندارد (حداقل از وجود آن بی اطلاع هستیم)!
حامید
۱۸:۲۵ ۱۳۹۴/۱۲/۲۳
با سلام. فایل انگلیسی و فارسی PDF آپلود می کنم مشکل نیست فقط مشکل اسم فایل فارسی و متن ورد فارسی است
همان طور که گفتیم حل این مشکل به سادگی ممکن نیست و نیاز به اعمال تغییراتی در نحوه پردازش فایل های یونیکد در برنامه شما دارد، همچنین در مورد نام فایل و سازگاری با زبان فارسی، نیاز به کدنویسی دارد (زمانبر است)!
حامید
۲۳:۱۵ ۱۳۹۴/۱۲/۲۲
با سلام هنگام که متن فارسی ورد را آپلود می کنیم بعد از قسمت پنل مدیریت فایل ورد فارسی را دانلود می کنم بعد باز می کنم داخلش چیزی نیست مشکل چیست البته چندین راه رفتم مشکل حل نشد
بدون بررسی یک نمونه فایل + دسترسی به تنظیمات سرور + سورس کدهای مربوط به پنل مدیریت و در کل فراهم بودن امکان تست آنلاین، نمی توان نظر خاصی داد، احتمالا این مشکل به برنامه ای برمی گردد که فایل را برای دانلود به مرورگر ارسال می کند! برای اطمینان می توانید حجم فایل آپلود شده در سرور را با حجم فایل اصلی تطبیق دهید.
دانیال
۱۳:۰۴ ۱۳۹۴/۱۰/۱۹
ممنون که جواب دادید. گفتید که کد های php رو چک کنم ولی مشکل اینجاست که اگه یه فایل png یا jpg رو آپلود کنم مشکلی نداره و آپلود رو انجام می ده.
متن خطا:
 Notice: Undefined index: user-file in C:\wamp2\www\uploadc\php-ajax-upload.php on line 22
در اینصورت فقط با مشاهده و بررسی سورس کدها (فایل ها) می توان کمک بیشتر کرد، در صورت تمایل فایل ها را به صورت فشرده شده به آدرس ایمیل ما (موجود در بخش تماس) ارسال کنید تا بررسی شود.
دانیال
۱۹:۳۳ ۱۳۹۴/۱۰/۱۸
با سلام
من فایل این کد رو گرفتم و قسمت کنترل نوع فایل رو برداشتم تا بتونه هر نوع فایلی رو آپلود کنه ولی وقتی یه فایلی مثل فایل mp3 یا zip رو میخوام آپلود کنم یه پیغام اخطار سیستمی میده که user-file تعریف نشده.
ممنون میشم جواب بدید.
user-file نام انتخابی فیلدی است که در فرم HTML استفاده شده، لذا ابتدا باید ببینید که آیا نام فیلد فایل به درستی تنظیم شده، سپس باید بررسی کنید که آیا به درستی در کدهای PHP این پارامتر از طریق دستور FILES دریافت شده باشد، همچنین درج متن خطای دریافتی می تواند به درک بهتر مشکل کمک کند!
امین
۱۲:۳۶ ۱۳۹۴/۰۹/۲۴
سلام استاد
من میخوام ی آپلودر تصویر درست کنم مثل اتچ یاهو که بعد از اینکه طرف آپلود کرد عکسها رو ببینه و باز بتونه آپلود کنه تا وقتی که ارسال نهایی بزنه. و تا قبل از ارسال نهایی بتونه حذفشون کنه...
من با استفاده از آرایه ها تا حدی کار رو انجام دادم اما در قسمت حذف مشکل پیدا کردم...
اصلا این روش هم بهم نچسبید حس میکنم روشم قابل اطمینان نیست.
دوستان میتونن راهنمایی کنن چطور اینکار رو بکنم؟ البته جدول موقت بکارم نمیاد چون ممکنه همزمان چند کاربر بخوان عکس آپلود کنن بعدش نمیشه تشخیص داد کدومش مال کدومه..
و یا طرف ممکنه آپلود کنه اما صفحه رو ببنده.. خوب عکسهای مونده تو جدول تمپ درد سر میشه بعدن.
دوستان راهنمایی کنید.
با توجه به توضیحات باید گفت که این سیستم به ظاهر ساده قاعدتا برنامه ریزی و ساختار حساب شده ای می خواهد که در اینصورت با امکانات موجود PHP و MySQL به راحتی شدنی است، راه هایی که در زیر عنوان می شود تنها یک پیشنهاد و بدون صرف زمان زیاد (جهت تجزیه تحلیل و پیدا کردن روش های بهتر احتمالی) ارائه شده:
- نگهداری حقیقی فایل ها بهتر است در سرور (روی هارد) صورت گیرد و صرفا اطلاعات فایل ها در دیتابیس باشد.
- هر فایل یک نام یکتا داشته باشد یا فایل ها در فولدرهایی بر اساس نام کاربران ذخیره شود، همین اطلاعات در دیتابیس به همراه تاریخ و زمان آپلود در جدول موقت ها نگهداری شود.
- اگر کاربر فایل را آپلود کرد، فایل از فولدر و جدول موقت ها به فولدر و جدول اصلی منتقل شود (به همراه ثبت اطلاعات فایل، نام کاربر، تاریخ و زمان آپلود و...)
- با داشتن تاریخ و زمان آپلود می توان در صورتی که به فرض مدت زیادی از آخرین اقدام کاربر گذشته باشد، فایل ها را به همراه اطلاعات موجود در دیتابیس (با طراحی یک سیستم کنترل خودکار) حذف کرد!
- با داشتن نام کاربری و یا یکتا بودن نام فایل ها، دیگر امکان تداخل کاربران وجود ندارد!
سیستم هایی که در وب وجود دارند نیز با ساختاری مشابه آنچه گفته شد طراحی شده اند، منتها قبل از استفاده به صورت کاربردی، چندین بار تست و رفع نقص شده اند تا به مرحله ثبات و شیوه ایده آل رسیده اند!
علی
۲۱:۵۴ ۱۳۹۴/۰۹/۰۲
ممنون از پاسختون.
در جایی خوندم که همین مشکلی که گفتم به وجود اومده.
در پاسخ گفته بودن از کد زیر استفاده کن:
<?php
if (isRarOrZip($argv[1])) {
    echo 'It is probably a RAR or ZIP file.';
} else {
    echo 'It is probably not a RAR or ZIP file.';
}

function isRarOrZip($file) {
    // get the first 7 bytes
    $bytes = file_get_contents($file, FALSE, NULL, 0, 7);
    $ext = strtolower(substr($file, - 4));

    // RAR magic number: Rar!\x1A\x07\x00
    // http://en.wikipedia.org/wiki/RAR
    if ($ext == '.rar' and bin2hex($bytes) == '526172211a0700') {
        return TRUE;
    }

    // ZIP magic number: none, though PK\003\004, PK\005\006 (empty archive), 
    // or PK\007\008 (spanned archive) are common.
    // http://en.wikipedia.org/wiki/ZIP_(file_format)
    if ($ext == '.zip' and substr($bytes, 0, 2) == 'PK') {
        return TRUE;
    }

    return FALSE;
}
?>
که برای فایل زیپ و رار هست. ایا کد شما برای فایل زیپ امنیتش بیشتره یا این کد؟
این کد علاوه بر بحث پسوند فایل، محتوای آن را هم با مشخصات یک فایل zip یا rar استاندارد مقایسه می کند، لذا به لحاظ این نکته امنیت آن قاعدتا بیشتر است (البته نحوه کارکرد و مشکلات احتمالی این قابلیت تست نشده!).
علی
۱۸:۰۱ ۱۳۹۴/۰۹/۰۱
سلام.
من برای آپلود کردن فایل زیپ کدهای قسمت فرمت رو به صورت زیر تغییر دادم
application/zip
application/x-zip-compressed
multipart/x-zip
application/x-compressed
application/octet-stream
حالا توی مرورگر IE درست کار میکنه و فایل Zip آپلود میشه اما توی فایرفاکس نه و ارور میده که فایل زیپ نیست! مشکل کجاست؟
با اکو گرفتن فهمیدم که application/download برمیگردونه.
حالا وقتی کد application/download به لیست کدهای بالا اضافه می کنم درست میشه و توی فایرفاکس فایل زیپ آپلود میشه.
آیا استفاده از application/download از لحاظ امینتی مشکل داره؟ چیکار کنم درست بشه؟
ممنون.
مهمترین نکته برای حفظ امنیت بررسی پسوند فایل است، اطلاعات ارسالی مرورگر می توانند سهوا یا عمدا اشتباه باشند، لذا بهتر است پسوند فایل ها را به روش نمونه زیر بررسی کنید تا اطمینان داشته باشید که پسوند های مخرب (مانند js، php و... آپلود نشوند!):
<?php
$valid_extension = array(
'gif',
'jpg',			
'jpeg',
'pjpeg',
'png',
'zip',
'gzip'
);
$file_extension = preg_match('/\.([a-z]{2,4})$/', $_FILES["user-file"]["name"], $match);
$file_extension = @$match[1];
if(!in_array($file_extension, $valid_extension)){
	echo 'Error!';
}
else{
	echo 'OK!';
}
?>
علی
۱۱:۳۹ ۱۳۹۴/۰۷/۲۷
سلام
ممنون از سایت خوبتون.
برای اپلود دسته ای که بیش از یک فایل انتخاب شود به جه گونه باید توشت؟
برای این کار باید با ارسال فرم به صورت چندگانه و دریافت آن در قالب یک آرایه آشنا باشید، به صورت مختصر در سمت کاربر فیلدهای فرم با یک علامت [] در انتهای نام باید تغییر کنند، به فرض:
<input type="file" id="user-file" name="user-file[]">
<input type="file" id="user-file" name="user-file[]">
سپس در سمت کاربر با حلقه for یا foreach می توان مقدار هر فیلد را به صورت مجزا اسخراج و پردازش کرد، مثال:
<?php
$file = $_FILES["user-file"];
$loop = 1;
foreach($file['name'] as $key => $value){
	echo $loop.' = '.$file['size'];
	$loop++;
}
?>
اطلاعات بیشتر:
http://www.php.net/manual/en/features.file-upload.multiple.php
راسپینا
۱۷:۴۱ ۱۳۹۴/۰۷/۱۲
با درود و سپاس از زحماتتان
سوالی داشتم و اینکه میخواستم هر عکسی را که آپلود میکنم در هر سطر از جدولی که با کدهای html ساختم نشان دهد چطور میتوانم این کار را انجام دهم لطفا راهنمایی کنید
سوال کلی است! ابتدا باید بدانید که با کدهای معمولی HTML چطور می توان یک تصویر را نمایش داد (کار با تگ table و img)، سپس در صورت آشنایی با دستورات PHP و MySQL می توان همان خروجی را با اطلاعات موجود در دیتابیس و آدرس دهی متناسب با محل قرارگیری فایل های تصویر ایجاد کرد (قاعدتا باید از قبل آموزش های مقدماتی مربوطه را فراگرفته باشید!)، مثال:
<?php 
$conn = mysqli_connect("localhost", "mysql_user", "mysql_password", "mysql_db"); 
if(!$conn){
	die("Could Not Connect: " . mysqli_connect_error());
}

$sql = "SELECT * FROM table WHERE 1";
$query = mysqli_query($conn, $sql);

echo '<table border="1" width="100%">';
while($row = mysqli_fetch_array($query)){
	echo '<tr>';
	echo '<td>' . $row['col_1'] . '</td>';
	echo '<td>' . $row['col_2'] . '</td>';
	echo '<td><img src="folder_name/' . $row['image_name'] . '"></td>';
	echo '</tr>';
}
echo '</table>';

mysqli_close($conn);
?>
رضا
۰۷:۴۰ ۱۳۹۴/۰۶/۲۹
سلام خسته نباشید
خیلی خیلی ممنون از این آموزش
1 - چطور میشه سایزی که بعد از آپلود نشان میدهد رو به مگابایت تبدیل کرد؟
2- اینکه چطور میشه فایل را به یک سرور خارجی ، یعنی من این آپلود را توی سایت خودم میزارم ولی فایل انتقال پیدا میکنه روی یک سرور دیگر ؟
- برای نمایش مقدار byte به صورت گیگ، مگ و... تابع کلی زیر قابل استفاده است:
<?php
function formatSizeUnits($bytes){
	if($bytes >= 1073741824){
		$bytes = number_format($bytes / 1073741824, 2) . ' GB';
	}
	elseif($bytes >= 1048576){
		$bytes = number_format($bytes / 1048576, 2) . ' MB';
	}
	elseif($bytes >= 1024){
		$bytes = number_format($bytes / 1024, 2) . ' KB';
	}
	elseif($bytes > 1){
		$bytes = $bytes . ' bytes';
	}
	elseif($bytes == 1){
		$bytes = $bytes . ' byte';
	}
	else{
		$bytes = '0 bytes';
	}
	
	return $bytes;
}
?>
که با توجه به هدف شما، از بخش زیر می توان الگوبرداری کرد:
$bytes = number_format($bytes / 1048576, 2) . ' MB';
به این صورت مقدار مگابایت بدست می آید.
- دقیقا منظورتان از انتقال به سرور خارجی مشخص نیست!، اگر صرفا آپلود از صفحه وب شما به یک آدرس دیگر منظور است، کافی است قسمت action فرم HTML را با آدرس آن سایت تنظیم کنید (البته قاعدتا باید به آن سرور دسترسی داشته باشید یا سرور برای پذیرش فایل مهیا شده باشد)، اما اگر منظور حالت پیشرفته تری است، لطفا دقیق تر توضیح دهید تا امکان راهنمایی وجود داشته باشد.
علی
۲۲:۳۹ ۱۳۹۴/۰۶/۱۸
با سلام من صفحه دارم که در آن کاربر می تواند چندین عکس را قراردهد. سپس با انتخاب هر عکس و فشردن دکمه ذخیره عکس های انتخاب شده در دیتابیس ذخیره می شوند. سوال اینجاست چه طور می توانم عکس های انتخابی را در دیتابیس قراردهم؟
ذخیره تصاویر در دیتابیس در وب چندان توصیه نمی شود، چون برای نمایش آن (در برخی مرورگرها) ممکن است با مشکلاتی روبرو شوید و از طرفی حجم کلی پایگاه داده به میزان زیادی افزایش می یابد، بهتر است تصاویر را به صورت معمول در هارددیسک سرور ذخیره و تنها آدرس یا نام آنها را در دیتابیس ثبت کنید.
اما جهت اطلاعات بیشتر، نوع داده برای ذخیره تصاویر در MySQL نوع BLOB به معنی Binary Large OBject است که برای نمایش تصویر باید یک دستور header تنظیم کنید:
header("Content-type: image/jpeg");
echo $row['image_column'];
توجه کنید که قبل از این دستورات هیچ خروجی نباید به مرورگر ارسال شود (شامل کاراکترهای نامرئی BOM نیز می شود)، روش دیگر نمایش، استفاده از data:image و base64_encode است:
<?php echo '<img src="data:image/jpeg;base64,' . base64_encode($row['image_column']) . '">'; ?>
علی
۲۳:۰۰ ۱۳۹۴/۰۴/۰۳
سلام
میخواستم درخواست کنم که چه کدی رو میشه توی قسمت فرمت فایل قرار داد، تا مثلا بجز فایل های php هر فایلی رو بشه آپلود کرد؟ ممنون میشم پاسخ بدین
روش صحیح و ایمن این است که تنها فرمت های مجاز را تعیین کنید، به هر صورت در مورد فایل های php. بحث کمی پیچیده تر است و نباید به صرف Type فایل توجه نمود، برای این منظور بررسی اکستنشن فایل (فرمت فایل) نیز ضرورت دارد، مثال:
$file_type = $_FILES["user-file"]["type"];
$file_extension = pathinfo($_FILES["user-file"]["name"], PATHINFO_EXTENSION);
//تعیین فرمت یا اندازه مجاز و سایر پارامترها
if ($file_type != "application/download" && $file_type != "application/x-php" && $file_extension != 'php')
نخست
قبلی
1
2
3
4
5
6
7
بعدی
آخر
paged صفحه 3 از 10
more لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.



 refresh
10 × 10
5 × 5
20 × 20
=
آموزش مقدماتی | آموزش کاربردی | مهارتهای وب | تماس با ما | انتقادات و پیشنهادات | برنامه نویسی وب | پشتیبانی فنی | تبلیغات | درباره ما | حریم خصوصی | سوالات متداول | HEX RGB
copyright  محتوا در وبگو به صورت تألیفی تهیه می شود و دارای حق تألیف است، در صورت نیاز به کپی برداری لطفا ابتدا "شرایط استفاده" را مطالعه کنید.
copyright  خدمات و راه های ارتباطی ما صرفا تحت دامنه Webgoo.ir ارائه و اطلاع رسانی می شوند، صفحات یا عناوین مشابه مورد تائید نمی باشند.
© 2012 - 2025 Webgoo.ir - All Rights Reserved.