جستجو
زمانی که متن خود را وارد می نمایید در صورت وجود اطلاعات ، اطلاعات مورد نظر بصورت همزمان و بدون زدن هیچ دکمه ای نمایش داده می شود.
عضویت در خبرنامه
جهت لغو عضویت کلیک نمایید
شمارشگر شبکه های اجتماعی
پسندیده
0
فیسبوک
0
توییتر
0
گوگل پلاس
13
لینک ادین
11
نمودار بازدید از موضوع ها
نویسنده : admin تعداد بازدید : ۷۶۲ تاریخ : پنجشنبه,۱۸ دی ۱۳۹۳
آپلود چند فایل بصورت Drag and Drop بوسیله  Jquery  و Html5
امتیاز دهید
تعداد رای 0 امتیاز 0

اگر شما می خواهید فایل های خود را بوسیله کشیدن و رها کردن آپلود کنید می توانید نگاهی به این پست بندازید.شما می توانید با استفاده از jquery و php چندین فایل را روی سرور آپلود نمایید.این اسکریپت به شما کمک می کند که برنامه های کاربردی خود را غنی تر بسازید. این کد تنها در مرورگرهای مدرن چون Crome, Firefox و  Safariبه خوبی کار می کند.

شما باید ابتدا کتابخانه multiupload.js را به ابتدا کد خود اضافه نمایید.

کد جاوااسکریپت

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="js/multiupload.js"></script>
<script type="text/javascript">
var config = {
// Valid file formats
support : "image/jpg,image/png,image/bmp,image/jpeg,image/gif", 
form: "demoFiler", // Form ID
dragArea: "dragAndDropFiles", // Upload Area ID
uploadUrl: "upload.php" // Server side file url
}
//Initiate file uploader.
$(document).ready(function()
{
initMultiUploader(config);
});
</script>

صفحه Upload.php

 

if($_SERVER["REQUEST_METHOD"] == "POST")
{
if(move_uploaded_file($_FILES["file"]["tmp_name"], "uploads/".$_FILES["file"]["name"]))
{
echo($_POST["index"]); // to validate 
}
exit;
}

کد HTML5 

فرم Html5 برای درگ اند دراپ

<div id="dragAndDropFiles" class="uploadArea">
<h1>Drop Images Here</h1>
</div>
<form name="demoFiler" id="demoFiler" enctype="multipart/form-data">
<input type="file" name="multiUpload" id="multiUpload" multiple />
<input type="submit" name="submitHandler" id="submitHandler" value="Upload" />
</form>
<div class="progressBar">
<div class="status"></div>
</div>

comments powered by Disqus
تبلیغات
آخرین تصاویر
شهر تاریخی جیزد باغ شازده ماهان عمارت و باغ نشاط (سالار) تقی آباد غار پرده رستم کاروانسرای شاه عباس یونسی حلزون اسب در کوهستان بچه پنگوئن بچه میمون ديگو کاستا دنی آلوز میامی هیت پیرلو فرانچسکو توتی لیونل مسی طوطی دریا جاده زمستانی گورخر ... ... پل کلبه ببر
وضعیت آب و هوا
  • یزد
  • ارومیه
  • اصفهان
  • البرز
  • مشهد
  • شیراز
  • تبریز
  • تهران
  • زاهدان
  • اهواز
  • زنجان
  • رامسر
  • بابلسر
  • کرمانشاه
  • بندرعباس
  • کرمان
  • گرگان
  • یاسوج
  • همدان
  • آبادان
  • مکه
موضوعات مشابه