1398/11/27
1 نظر
توسط احسان بابائی

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