در این مقاله نحوه ارسال فایل به سرور را فقط با کشیدن و رها کردن فایل در ASP.NET با استفاده از jQuery, Ajax ، متد وب (WebMethod) و مدیریت وب (WebHandler ) میخوانیم.

در این مقاله نحوه ارسال فایل به سرور را فقط با کشیدن و رها کردن فایل (Drag & Drop) فایل در ASP.NET میخوانیم.

پیش نیازها:

1- متد وب در ASP.NET

2- جاوا اسکریپت

jQuery -3

jQuery UI -4

Ajax -5 با استفاده از jQuery

HTML -6

در این مقاله میخواهیم نحوه ارسال فایل به سرور را با استفاده از jQuery, Ajax ، متد وب (WebMethod) و مدیریت وب (WebHandler ) را شرح دهیم. برای درک بهتر مطلب مقاله را به 5 بخش زیر تقسیم کرده ایم.

HTML -1

2- استفاده از jQuery-UI

3- مدیریت وب (WebHandler)

4- متد وب (WebMethod)

5- به کار بردن رویدادهای Drag and Drop در جاوا اسکریپت

1. HTML

در ایجا از تگ div#dropzone به عنوان شمارنده تمام تصاویری که میخواهیم رها و سپس ارسال کنیم استفاده میکنیم.

div#MSG مانند یک popup عمل میکند که نشان دهنده این است که فایل  ارسال شده است. به صورت پیش فرض این popup مخفی است و فقط زمانی که فایل ارسال شد نمایش داده می شود.

<div id="MSG">  
   <img src="loading.gif" alt="Uploading File" />  
</div>  
   <div id="dropzone">  
</div> 

2. استفاده از jQuery-UI

jQuery-UI حاوی یک تابع برای مرتب سازی است که به مرتب سازی فایل ها با رها کردن آنها به مکانی که شما تمایل دارید کمک میکند.

تابع disableSelection انواع انتخاب ها را غیرفعال میکند، در واقع در این مقاله نیازی به آن نداریم ولی دانستن آن مفید است. جایی که میخواهید متنی را کشیده و رها کنید، متوجه خواهید شد که مرورگر رها کردن متن را با انتخاب متن اشتباه میگیرد.

نکته: تابع sortable() نمیتواند div#dropzone مرتب شده را ایجاد کند، اما عنصر Child در آن وجود دارد.

$("#dropzone").sortable();  
$("#dropzone").disableSelection();  

3. مدیریت وب (WebHandler)

در اینجا به یک WebHandler برای ارسال فایل نیاز داریم، اساسا مدیریت، مسئولیت سنگینی بر عهده دارد. WebHandler یک تابع با نام ProcessRequest دارا می باشد، در واقع این یک بخش از مدیریت وب نیست، بلکه بازنویسی عنصر مدیریت برای رابط IHttpHandler است. تابع ProcessRequest حاوی یک پارامتر از نوع  HttpContext است، هدف از کلاس HttpContext فراهم کردن منبعی برای اشیاء سرور است، مانند درخواست، پاسخ، Session و  Server در دسترس با درخواست HTTP. در کد زیر مشاهده می کنید که از GUID برای ایجاد یک ID خاص و الحاق آن با یک نام برای فایل، زیرا در بسیاری موارد کاربر ممکن است تعدادی تصاویر را با یک اسم ارسال نماید، در نتیجه آن باید بازنویسی شود. وقتی فایل ذخیره شد، متد یک Text به عنوان پاسخ برای مشتری ارسال میکند. ما از آن برای زمانی که ارسال فایل با موفقیت انجام شود استفاده میکنیم، در غیر اینصورت پیغام خطا نمایش دهد.

  public void ProcessRequest(HttpContext context)
    {
        try
        {
            if (context.Request.Files.Count > 0)
            {
                string FileName = "";
                CommonFunction comFun = new CommonFunction();
                HttpFileCollection files = context.Request.Files;
                for (int i = 0; i < files.Count; i++)
                {
                    HttpPostedFile file = files[i];
                    Guid id = Guid.NewGuid();
                    FileName = id + "__" + file.FileName;
                    string fName = context.Server.MapPath("Images/" + FileName);
                    file.SaveAs(fName);
                }
                context.Response.ContentType = "text/plain";
                context.Response.Write("Success");
            }
        }
        catch (Exception ex)
        {
            context.Response.ContentType = "text/plain";
            context.Response.Write(ex.Message);
        }

    }

4. متد وب (WebMethod)

در اینجا از 2 متد با نامهای GetFileList و DeleteImage استفاده میکنیم. با اعلام تابع به عنوان یک WebMethod، ما نشان میدهیم که تابع سمت سرور مانند تابعی است که از سمت مشتری فراخوانی شده است.

 [WebMethod]
    public static string GetFileList()
    {
        CommonFunction com = new CommonFunction();
        string[] filePaths = Directory.GetFiles(HttpContext.Current.Server.MapPath("Images/"));
        DataTable dt = new DataTable();
        dt.Columns.Add("File");
        foreach (string file in filePaths)
        {
            dt.Rows.Add(Path.GetFileName(file));
        }
        return com.ConvertDataTabletoString(dt);
    }

    [WebMethod]
    public static string DeleteImage(string fileName)
    {
        try
        {
            File.Delete(HttpContext.Current.Server.MapPath("Images/") + fileName);
            return "Success";
        }
        catch (Exception)
        {
            return "Failed";
        }
    }

5. به کار بردن رویدادهای Drag and Drop در جاوا اسکریپت

در اینجا بهترین بخش از مقاله را می بینید. به کار بردن رویدادها برای پی بردن به Drag and Drop. برای این کار مرورگرها تعدادی رویداد فراهم می کنند، مانند:

Ondragenter: تشخیص عناصر کشیده شده ورودی به مکان موردنظر

Ondragover: تشخیص عناصر کشیده شده بروی مکان موردنظر

Ondragleave: تشخیص عناصر قرار داده شده در مکان موردنظر

Ondrop: تشخیص عناصر کشیده شده و قرار داده شده در مکان موردنظر

var dz = document.querySelector('#dropzone');
            dz.addEventListener('dragenter', handleDragEnter, false);
            dz.addEventListener('dragover', handleDragOver, false);
            dz.addEventListener('dragleave', handleDragLeave, false);
            dz.addEventListener('drop', handleDrop, false);

در اینجا از تابع handleDrop() برای مدیریت رویداد Drop استفاده میکنیم. این توابع با استفاده از jQuery Ajax بر روی Client-Side و WebHandler برروی Server-Side، فایلهای کشیده شده را به سرور ارسال میکنند. برای این کار به ابزاری نیاز دارم که در کد زیر خواهید دید.

کد کامل شده:

 $(document).ready(function () {
            var dz = document.querySelector('#dropzone');
            dz.addEventListener('dragenter', handleDragEnter, false);
            dz.addEventListener('dragover', handleDragOver, false);
            dz.addEventListener('dragleave', handleDragLeave, false);
            dz.addEventListener('drop', handleDrop, false);

            GetFileDetails();

            $("#dropzone").sortable();
            $("#dropzone").disableSelection();
        });

        function handleDragOver(e) {
            if (e.preventDefault) {
                e.preventDefault(); 
            }
            this.classList.add('over');

            return false;
        }

        function handleDragEnter(e) {
            
            this.classList.add('over');


        }

        function handleDragLeave(e) {
           
            e.preventDefault();
            this.classList.remove('over');

        }


        
        function handleDrop(e) {
            e.preventDefault();
            if (e.dataTransfer.files.length == 0) {
                this.classList.remove('over');
                return;
            }
            var files = e.dataTransfer.files;
            var data = new FormData();
            for (var i = 0, f; f = files[i]; i++) {
                data.append(files[i].name, files[i]);
            }
            
            this.classList.remove('over');
            var options = {};
            options.url = 'FileUploader.ashx';  
            options.type = 'post';//متد پست
            options.data = data;
            options.async = false;  
            options.contentType = false;
            options.processData = false;
            options.beforeSend = function () {
                ShowPopup();
            };
            options.error = function () {
                alert('Problem uploading file');
                HidePopup();
            };
            options.complete = function (response) {
                HidePopup();//وقتی فرایند پایان یافت popup مخفی میشود
                GetFileDetails();
            };
            $.ajax(options);


        }


        var overlay = $('<div id="overlay"></div>');
        function ShowPopup() {
            overlay.appendTo(document.body);
            $('#MSG').show();
        }
        function HidePopup() {
            $('#MSG').hide();
            overlay.appendTo(document.body).remove();
        }

        var imgControl = '<div class="imageControl">\
                                <a href="javascript:deleteImage(\'||FILENAME||\');">\
                                    <img src="delete.png" />\
                                </a>\
                                <img src="Images/||FILENAME||" />\
                             </div>';
        
        function GetFileDetails() {
            var options = {};
            options.type = "POST",
            options.url = 'Default.aspx/GetFileList',  
            options.data = '{}',
            options.async = false,  
            options.contentType = "application/json; charset=utf-8",
            options.dataType = "json",
            options.complete = function (response) {  
                var resp = JSON.parse(response.responseText);
                var filesList = JSON.parse(resp.d);
                var imageControlList = '';
                for (var i = 0; i < filesList.length; i++) {
                    imageControlList += imgControl.replace('||FILENAME||', filesList[i].File).replace('||FILENAME||', filesList[i].File);
                }
                $('#dropzone').html(imageControlList);
            };
            $.ajax(options);

        }
        function deleteImage(fileName) {
            var options = {};
            options.type = "POST",
            options.url = 'Default.aspx/DeleteImage',
            options.data = '{ fileName :"' + fileName + '" }',
            options.async = false,
            options.contentType = "application/json; charset=utf-8",
            options.dataType = "json",
            options.complete = function (response) {
                GetFileDetails();
            };
            $.ajax(options);
        }