ارسال فایل با ajax

در مقاله های آشنایی با 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 را دریافت کنید.