آپلود عکس با AJAX در جی کوئری بسیار آسان است و به راحتی می توانید پیاده سازی کنید.
در آموزش های قبلی نحوه آپلود فایل در php بدون استفاده از AJAX را دیدیم. در این مثال , چند نمونه کد jQuery برای انجام عملیات آپلود عکس با AJAX در PHP بدون لود شدن صفحه , اضافه کردیم.
ما از jQuery AJAX برای پیاده سازی قابلیت آپلود تصویر استفاده می کنم. یک فرم با input از نوع file و یک دکمه برای ارسال داریم.
با زدن دکمه submit , اسکریپت AJAX اجرا خواهد شد . در این کد , یک درخواست آپلود به فایل PHP برای آپلود عکس ارسال می شود .
کد php تصویر آپلود شده را با فولدر از پیش تعریف شده انتقال (move) و یک تگ img در HTML برای پیش نمایش تصویر در پاسخ AJAX برگشت می دهد.
فرم HTML آپلود عکس
کد زیر به شما HTML مورد نظر برای فرم آپلود تصویر را نشان می دهد .برای سابمیت کردن فرم , تابع AJAX برای ارسال درخواست آپلود عکس با AJAX در PHP , اجرا خواهد شد.
|
1 2 3 4 5 |
<form id="uploadForm" action="upload.php" method="post"> <label>Upload Image File:</label><br/> <input name="userImage" type="file" class="inputFile" /> <input type="submit" value="Submit" class="btnSubmit" /> </form> |
متد آپلود عکس با AJAX در PHP
کد زیر به شما تابع ajax() استفاده شده برای ارسال درخواست در قالب یک نمونه FormData را نشان می دهد.
در php , فایل در دایرکتری مشخصی آپلود می شود . بعد از آپلود موفق فایل , پیش نمایش تصویر در پاسخ AJAX برگشت داده می شود.
سپس , این تصویر به تگ DIV برای نمایش به کاربر اضافه خواهد شد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script type="text/javascript"> $(document).ready(function (e){ $("#uploadForm").on('submit',(function(e){ e.preventDefault(); $.ajax({ url: "upload.php", type: "POST", data: new FormData(this), contentType: false, cache: false, processData:false, success: function(data){ $("#targetLayer").html(data); }, error: function(){} }); })); }); </script> |
خروجی آپلود عکس با AJAX در PHP
بعد از آپلود تصویر با AJAX , پیش نمایش را بصورت زیر به کاربر نشان می دهیم.
امیدوارم از آموزش آپلود عکس با Ajax در PHP استفاده مفید را برده باشید.
برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق و پیروز باشید.
سلام
ممنون ولی کد php چی هست؟
سلام. از دانلود باکس زیر پست دریافت کنید
ممنون عالی بود
سلام. خوشحالیم که مفید واقع شده.
موفق باشید
سلام
یک سوال داشتیم اگر بخوایم در کد بالا ارسال داده با روش GET باشه باید method و type در کد بالا به get تغییر بدیم و در صفحه upload.php با get داده دریافت کنیم؟(البته میخوام به جای عکس متن ارسال کنم برای همین سوال برسیدم)
اگر به این شکل باشه من اینکار کردم ولی کار نکرد…
محبت می کنید یک راهنمایی در این زمینه بکنید.
سلام. اگر قصد ارسال متن دارید پس باید آموزش دیگری مشاهده کنید چرا که این آموزش برای آپلود عکس است.
ایجکس در جی کویری
موفق باشید.
یک سوال
وقتی دکمه submit میزنم در صفحه index.php و اطلاعات به صفحه upload.php ارسال میکنه و نتیجه نمایش میده میخوام وقتی نتیجه نمایش داد متنی که در صفحه index.php و با عنوان(یک متن تستی می باشد.) هست نمایش نده و فقط نتیجه نمایش بده.
لینک کد:
http://rozup.ir/download/2925767/index.txt
منظورم همون نوشته ای که در کد لینک بالا در زیر فرم قرار دادم(
یک متن تستی می باشد.
)
خب کافیه اون متن رو در کد حذف کنید
مشکل حل کردم میخواستم وقتی که داده نمایش میده خودکار حذف بشه
اگر هم دقت کنید خودتون داخل کد همیین امکان قرار دادید.
در هر صورت بابت مطلب عالتون تشکر میکنم
سلام خسته نباشید
من داخل سایتم یک بخش آپلودسنتر درست کردن حجم بالا با کد php ارور ۵۰۳ میده به پشتیبانی هاستم گفتم, گفت با php تا ۵۰m میتونی آپلود کنی و برای حجم آپلود بالا باید از ajax استفاده کنی برای آپلود فایل با حجم بالا باید چیکار کنم؟
اگر بشه انتقال آپلود فایل با حجم بالا از طریق لینک هم باشه مشکل برطرف میکنه
سلام ممنون. همین آموزش رو میتونید استفاده کنید
درود
لطفا کد های فایل upload.php هم قرار دهید
سپاس 🙂
سلام. در سورس کامل که از باکس دانلود قابل دریافت است, تمام فایل های مورد نیاز از جمله upload.php موجود است.
موفق باشید.
خیلی عالی بود
سلام. خوشحالم که مفید واقع شده.
موفق باشید.