آپلود فایل با Ajax در ASP.net mvc بوسیله File Upload

در این مقاله، آپلود فایل با Ajax در ASP.net mvc بوسیله File Upload خواهیم پرداخت که چگونه می‌توانیم بدون refresh کردن صفحه، فایل را بارگذاری کنیم. همانطور که می دانیم، در MVC، کنترلر سرور وجود ندارد، این مثال، برای آنکه ما بخواهیم فایل ها را بدون refresh کردن صفحه بارگذاری کنیم، مفید خواهد بود.

پلاگین مورد نیاز برای آپلود فایل با Ajax

• ابتدا نیاز است پلاگین jquery.form.js را از اینجا دانلود کنید.
• این پلاگین BeginForm را به راحتی تبدیل به فرم ایجکسی می‌کند.
• در این مثال ما از زبان VB.net استفاده کردیم. شما به راحتی می‌توانید برای سی شارپ هم از آن ایده بگیرید.

 طراحی صفحه View :

• Jquery  مورد نیاز و کتابخانه فرم را در یک Section یا در هدر خود اضافه کنید.

@section Scripts { 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js">
</script> <script src="https://malsup.github.com/jquery.form.js"></script> 
}

•  Html.BeginForm، را مانند خط اول کد زیر تغییر دهید.
• یک input از نوع file و یک دکمه در فرم اضافه کنید.
• کلاس های بکار رقته در کد زیر برای زیباسازی است و مورد بحث آموزش ما نیست.

@Using (Html.BeginForm("myupload", "fm_Gallery", FormMethod.Post, New With {.enctype = "multipart/form-data", .id = "myUploadForm"}))
         @Html.AntiForgeryToken()

          @<div class="Row_2col_50 center width_90">
         
              <div class="form-element">
                 <input type="file" id="input-file" name="files" data-label="Select files" data-multiple-caption="{n} files selected" multiple />
                 </div>
                 <p><input type="button" id="formsubmit" value="بارگذاری" class="btn btn-success"></p> 
           </div>
End Using

• کد زیر پروگرس بار یا نوار پیشرفت آپلود فایل است.

<div class="progress">
    <div class="progress-bar">
        ۰ %
    </div>
</div>
<div id="status">
</div>

• حالا کدهای زیر را به تگ Script اضافه کنید.
• به id = "myUploadForm" در خط اول  Html.beginform و همچنین در خط ۸ کد زیر دقت کنید که چگونه فرم مورد نظر انتخاب شده است.

<script>
    (function () {
        var bar = $('.progress-bar');
        var percent = $('.progress-bar');
        var status = $('#status');
 
        $('myUploadForm').ajaxForm({
            beforeSend: function () {
                status.empty();
                var percentVal = '0%';
                bar.width(percentVal)
                percent.html(percentVal);
            },
            uploadProgress: function (event, position, total, percentComplete) {
                var percentVal = percentComplete + '%';
                bar.width(percentVal)
                percent.html(percentVal);
            },
            success: function () {
                var percentVal = '100%';
                bar.width(percentVal)
                percent.html(percentVal);
            },
            complete: function (xhr) {
                status.html(xhr.responseText);
            }
        });
 
    })();
</script>

طراحیAction  :

• فایل درخواست post شده به متد  Action به نام files ارسال خواهد شد.
• در MVC ، کلاس HttpPostedFileBase برای بازیابی فایل های Post شده استفاده می‌شود.
• در زیر مثالی از متد Action به نام myupload می باشد.

        <HttpPost>
        <ValidateAntiForgeryToken>
        Function myupload(files As IEnumerable(Of HttpPostedFileBase)) As ActionResult

            Try

                If (Not (files) Is Nothing) Then

                    For Each u In files

                        ' Verify that the user selected a file
                        If ((Not u Is Nothing) _
                                AndAlso (u.ContentLength > 0)) Then

                            '۱- Get and Check File Extention
                            If Path.GetExtension(u.FileName).
                            ContainsAny(".jpeg", ".jpg", ".png", ".gif",
                                        ".mp4", ".mp3", ".wma", ".wav",
                                        ".۷z", ".zip", ".rar", ".csv",
                                        ".xlsx", ".xls", ".doc", ".docx",
                                        ".txt", ".pdf", ".pptx") = False Then

                                Return msgR.Noty("پسوند فایل غیر قابل قبول است.", "success", "bottom right")
                                Exit For
                                Exit Function

                            ElseIf (u.ContentLength / 1024 / 1024) > 512 Then

                                Return msgR.Noty("حداکثر حجم فایل ۵۱۲ MB است.", "success", "bottom right")
                                Exit For
                                Exit Function

                            End If



                            ' extract only the fielname
                            Dim fileName = Path.GetFileName(u.FileName)

                            '۵- Check File Exist And if (True) Generate new name
                            While (System.IO.File.Exists(Server.MapPath(current_path) & "\\" & fileName))
                                fileName = Path.GetFileNameWithoutExtension(u.FileName) + "_" + Date.Now.Second.ToString + Path.GetExtension(u.FileName)
                            End While


                            ' TODO: need to define destination
                            Dim pathh = Server.MapPath(current_path) + "\" + fileName
                            u.SaveAs(pathh)

                        End If

                    Next

                End If

            Catch ex As Exception

            End Try

            Return msgR.Noty("اپلود انجام شد", "success", "bottom right")

        End Function

متد content arrey که در کد بالا استفاده شده است یک اکستنشن متد است که برای آشنایی بیشتر لطفا این مطلب را مشاهده کنید.