در این مقاله قصد داریم، نحوه آپلود عکس با استفاده از jQuery ajax در ASP.Net را توضیح دهیم.

این مقاله نحوه استفاده از jQuery ajax برای آپلود عکس را نشان می دهد. به عنوان مثال، آپلود یک عکس از سمت کلاینت با استفاده از jQuery ajax، به این معنی که ما می توانیم عکسی را بدون Refresh کردن صفحه و یا هیچ poostbackای با استفاده از Generic handler (فایل ashx) در #ASP.Net C آپلود کنیم.

مراحل انجام کار:

1. دانلود و اضافه کردن (include) فایل کتابخانه jQuery

2. اضافه کردن تگ Input File

3. سمت کلاینت: فراخوانی یک متد jQuery ajax

4. سمت سرور: اضافه کردن Generic handler (فایل ashx) برای مدیریت کد سمت سرور مثلا C# برای ذخیره سازی فایل آپلود شده

دانلود و اضافه کردن فایل jQuery:

قبل از نوشتن هر کدی، در ابتدا آخرین نسخه فایل jQuery را دانلود و include می کنیم. می توانید فایل jQuery را روی سرور خود میزبانی کنید و یا آن را از سایت Google-hosted استفاده نمایید.

بنابراین، تگ head ما به شکل زیر درمی آید:

<script src="latestJs_1.11/jquery.min.js"></script>

HTML:

در این مرحله، یک تگ input از نوع file (کنترل آپلود فایل)  و یک تگ image به صفحه اضافه می کنیم.

یک کنترل Browse برای انتخاب فایل، زمانی که عکس آپلود شد، مسیر آن روی کنترل image ما که در حال حاضر در صفحه asp.net خود اضافه کردیم، تنظیم می شود.

در نهایت، HTML ما به شکل زیر در می آید:

<input type="file" class="upload"  id="f_UploadImage"><br />
<img id="myUploadedImg" alt="Photo" style="width:180px;" />

فراخوانی متد jQuery ajax:

حال، تابع ()sendFile را می سازیم که در آن، محتوای فایل را به مجموعه FormData collection اضافه می کنیم و فراخوانی jQuery Ajax انجام می شود.

توجه داشته باشید که مقدار contentType و processData حتما باید False باشد.

حال این تابع را در change رویداد مربوط به کنترل آپلود فایل، فراخوانی می کنیم. مثلا هروقت که کاربر عکسی را برای آپلود انتخاب کرد، تابع ()sendFile فراخوانی می شود. کد آن به شکل زیر است:

var _URL = window.URL || window.webkitURL;
$("#f_UploadImage").on('change', function () {
 
    var file, img;
    if ((file = this.files[0])) {
        img = new Image();
        img.onload = function () {
            sendFile(file);
        };
        img.onerror = function () {
            alert("Not a valid file:" + file.type);
        };
        img.src = _URL.createObjectURL(file);
    }
});

اگر دقت کنید، می بینید که در کد متد jQuery ajax، آدرس  url را روی fileUploader.ashx تنظیم کرده ایم که همان Generic handler  است. با استفاده از این فایل، می توانیم فایل های خود را در سمت سرور آپلود کنیم. این کار را با کدهای سمت کلاینت انجام دادیم، در ادامه به سراغ کد سمت سرور می رویم.

اضافه کردن Generic holder:

در ابتدا، فضای نام System.Io را مانند شکل زیر به کد اضافه می کنیم:

using System.IO;

کد زیر را کپی می کنیم، این کد فایل ها را از سمت کلاینت گرفته، نام عکس را با یک نام یکتا جایگزین کرده و آن را در فولدر MediaUploader ذخیره می کند.

using System;
using System.Web;
using System.IO;
public class fileUploader : IHttpHandler {
 
    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        try
        {
            string dirFullPath = HttpContext.Current.Server.MapPath("~/MediaUploader/");
            string[] files;
            int numFiles;
            files = System.IO.Directory.GetFiles(dirFullPath);
            numFiles = files.Length;
            numFiles = numFiles + 1;
            string str_image = "";
 
            foreach (string s in context.Request.Files)
            {
                HttpPostedFile file = context.Request.Files[s];
                string fileName = file.FileName;
                string fileExtension = file.ContentType;
 
                if (!string.IsNullOrEmpty(fileName))
                {
                    fileExtension = Path.GetExtension(fileName);
                    str_image = "MyPHOTO_" + numFiles.ToString() + fileExtension;
                    string pathToSave_100 = HttpContext.Current.Server.MapPath("~/MediaUploader/") + str_image;
                    file.SaveAs(pathToSave_100);
                }
            }
            //  database record update logic here  ()
            
            context.Response.Write(str_image);
        }
        catch (Exception ac) 
        { 
        
        }
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }
 
}

که این فولدری است که قرار است تمام عکس های آپلودشده در آن ذخیره شوند.