
در مقاله های آشنایی باajaxو آموزشajaxباjqueryبا تکنولوژیajaxآشنا شدیم، و در مقاله ی ارسال اطلاعات باajaxیاد گرفتیم که چگونه اطلاعات را از سمت کلاینت به سرور توسطajaxارسال کنیم. در این مقاله قصد داریم نحوه ارسال فایل باajaxرا آموزش دهیم.
ایجاد فرم HTML برای ارسال فایل با ajax
فرم درhtmlرابطی است که کاربر از طریق آن داده ها را انتخاب و برای ارسال آماده می کند. نکته مهم این است که برای ارسال فایل باید حتما از متدPOSTدر فرم استفاده کنیم وenctypeفرم را برابرmultipart/form-dataتنظیم کنیم. و برای انتخاب فایل هم یکinputباtype=’file’باید به فرم اضافه کنیم.
کد زیر را برای ساخت فرم آپلود فایل در سندhtml بنویسید.
<form id="form" method="post" enctype="multipart/form-data">
<input id="file" type="file" accept="image/*" name="image" />
<input type="submit" value="Upload">
</form>
سپس برای استفاده ازjquery بایدcdnاین کتابخانه را در تگheadفایلhtmlقرار دهیم. لینک زیر را به صفحه خود در تگheadاضافه کنید
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
و در ادامه کدjquery زیر را به صفحهhtml اضافه کنید.
<script type="text/javascript">
$(document).ready(function (e) {
$("#form").on('submit', (function (e) {
e.preventDefault();
var fileUpload = $("#file").get(0);
var files = fileUpload.files;
var formData = new FormData();
formData.append('file', files[0]);
$.ajax({
url: "files/upload",
type: "POST",
data: formData,
contentType: false,
cache: false,
processData: false,
success: function (data) {
if (data == false) {
// invalid file format.
$("#preview").html(data).fadeIn();
alert("فایل آپلود نشد")
}
else {
// view uploaded file.
alert("فایل با موفقیت آپلود شد")
$("#form")[0].reset();
}
},
error: function (e) {
//error
alert("error : "+ e.statusText);
}
});
}));
});
</script>
در این تکه کدjqueryکه پس از سابمیت شدن فرم ارسال می شود اجرا می شود فایل را از تگinputمربوط به انتخاب فایل دریافت می کنیم و در یکformDataقرار می دهیم. و سپس با متدajaxفایل را بهurlمشخص شده در سمت سرور ارسال می کنیم. با متدajaxدر مقاله ی ارسال اطلاعات باajaxآشنا شدیم برای مطالعه بیشتر می توانید به این مقاله مراجعه کنید.
آپلود فایل در asp.net core با ajax
در سمت سرور هم برای دریافت این فایل باasp.net coreمی توانید ازaction زیر استفاده کنید.
[HttpPost]
public IActionResult Upload(IFormFile file)
{
return Ok(true);
}
آپلود همزمان چند فایل در asp.net and ajax
اگر بخواهیم چندین فایل را توسط انتخاب گر فایل انتخاب و با یک درخواست ارسال کنیم تغییرات زیر را در کدhtmlوjqueryرا اعمال کنید.
<input id="file" type="file" accept="image/*" name="image" multiple />
و در کدjqueryنیز یک حلقهforایجاد می کنیم تا تمامی فایل های انتخاب شده را به دیتای ما اضافه کند برای ارسال به سرور.
for (var i = 0; i < files.length; i++) {
formData.append('file', files[i]);
}
و درactionمربوط بهasp.net coreتغییرات زیر را برای دریافت همزمان چندین فایل انجام دهید.
[HttpPost]
public IActionResult Upload(IEnumerable<IFormFile> file)
{
foreach (var item in file)
{
;//select file
}
return Ok(true);
}
در زبانphpهم به همین صورت می توانید فایل های ارسال شده توسطajaxرا دریافت کنید.
جدیدترین ویدئوهای آموزشی
در بخش TV باگتو، آموزش های کوتاه و جدید را مشاهده نمایید
برای ارسال نظر باید وارد حساب کاربری خود شوید
ورود به حساب کاربری ثبت نام
سلام
اگه امکان دریافت خروجی PDF مقالات هم باشه خیلی بهتره.
با تشکر