کانال تلگرام پورتال پادرا

آپلود چند فایل بصورت Drag and Drop بوسیله Jquery و Html5

آپلود چند فایل بصورت Drag and Drop بوسیله Jquery و Html5 - جی کوئری


تاریخ : یکشنبه,۱۹ دی ۱۳۹۵ تعداد بازدید :589

اگر شما می خواهید فایل های خود را بوسیله کشیدن و رها کردن آپلود کنید می توانید نگاهی به این پست بندازید.شما می توانید با استفاده از 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">
<h2>Drop Images Here</h2>
</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>


منبع: پورتال پادرا

برچسب ها :





این مقاله را دوست داشتید؟ آنرا به اشتراک بگذارید




دیدگاه




در ارتباط با همین مطلب بخوانید