توضیحات و دانلود

استفاده از JQuery در بارگزاری چندین فایل Gmail Style با ASP.NET
0 0
استفاده از JQuery در بارگزاری چندین فایل Gmail Style با ASP.NET

با سلام در این مقاله استفاده از JQuery در بارگزاری چندین فایل Gmail Style با ASP.NET را توصیح میدهیم با ما همراه باشید

مرحله 1

پلاگین Uploadify JQuery و کتابخانه JQuery را با استفاده از لینک های زیر دانلود کنید.


دانلود جی کوئری

Uploadify را دانلود کنید

پس از دانلود، باید چهار فایل زیررا قرار دهید

1. jQuery-1.3.2.min.js

2. jquery.uploadify.js

3. uploader.fla

4. uploader.swf

 یک پوشه به نام اسکریپت در root folder در وب سایت ASP.Net ایجاد میکنیم

مرحله2

در شروع کار ویژوال استودیو،  یک وب سایت جدید ایجادکنید و کارهای زیر را انجام دهید

از فایل های زیر که قبلا در قسمت head of aspx یا صفحه اصلی دانلود کرده اید استفاده کنید

<link rel="Stylesheet" type="text/css" href="CSS/uploadify.css" />

<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>

<script type="text/javascript" src="scripts/jquery.uploadify.js"></script>

یک کنترل FileUpload ASP.Net را به تگ فرم اضافه کنید

<form id="form1" runat="server">

    <div style = "padding:40px">

        <asp:FileUpload ID="FileUpload1" runat="server" />

    </div>

</form>

اسکریپت زیر را در بخش head یا ContentPlaceHolder قرار دهید در صورتی که از Master Pages استفاده می کنید

<script type = "text/javascript">

$(window).load(

    function() {

    $("#<%=FileUpload1.ClientID %>").fileUpload({

        'uploader': 'scripts/uploader.swf',

        'cancelImg': 'images/cancel.png',

        'buttonText': 'Browse Files',

        'script': 'Upload.ashx',

        'folder': 'uploads',

        'fileDesc': 'Image Files',

        'fileExt': '*.jpg;*.jpeg;*.gif;*.png',

        'multi': true,

        'auto': true

    });

   }

);

</script>  

همانطور که می بینید ما نیاز به تنظیم برخی تنظیمات همراه با کنترل FileUploadداریم . لیست کامل تنظیمات و توضیحات آنها در اینجا موجود است

از جمله تنظیمات مهم  'script': 'Upload.ashx'  است که FileUpload را تنظیم می کند و فایل های آپلود شده را روی دیسک ذخیره می کند.

در کد زیر برای فایل Upload.ashx است

C #

<%@ WebHandler Language="C#" Class="Upload" %>

 

using System;

using System.Web;

using System.IO;

 

public class Upload : IHttpHandler {

   

    public void ProcessRequest (HttpContext context) {

        context.Response.ContentType = "text/plain";

        context.Response.Expires = -1;

        try

        {

            HttpPostedFile postedFile = context.Request.Files["Filedata"];

           

            string savepath = "";

            string tempPath = "";

            tempPath = System.Configuration.ConfigurationManager.AppSettings["FolderPath"];

            savepath = context.Server.MapPath(tempPath);

            string filename = postedFile.FileName;

            if (!Directory.Exists(savepath))

                Directory.CreateDirectory(savepath);

 

            postedFile.SaveAs(savepath + @"\" + filename);

            context.Response.Write(tempPath + "/" + filename);

            context.Response.StatusCode = 200;

        }

        catch (Exception ex)

        {

            context.Response.Write("Error: " + ex.Message);

        }

    }

 

    public bool IsReusable {

        get {

            return false;

        }

    }

}

VB.Net

<%@ WebHandler Language="VB" Class="UploadVB" %>

 

Imports System

Imports System.Web

Imports System.IO

 

Public Class UploadVB : Implements IHttpHandler

   

    Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest

        Dim postedFile As HttpPostedFile = context.Request.Files("Filedata")

 

        Dim savepath As String = ""

        Dim tempPath As String = ""

        tempPath = System.Configuration.ConfigurationManager.AppSettings("FolderPath")

        savepath = context.Server.MapPath(tempPath)

        Dim filename As String = postedFile.FileName

        If Not Directory.Exists(savepath) Then

            Directory.CreateDirectory(savepath)

        End If

 

        postedFile.SaveAs((savepath & "\") + filename)

        context.Response.Write((tempPath & "/") + filename)

        context.Response.StatusCode = 200

    End Sub

 

    Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable

        Get

            Return False

        End Get

    End Property

 

End Class

همانطور که متوجه خواهید شد که  این رویداد به راحتی فایل های پست شده را می پذیرد و فایل را در پوشه ای به نام آپلود در داخل دایرکتوری ریشه وب سایت که مسیر آن در یک کلید AppSettings در فایل Web.Config قرار دارد، ذخیره می کند. به کد زیر مراجعه کنید

<appSettings>

    <add key ="FolderPath" value ="uploads"/>

</appSettings >

 برنامه را اجرا کنید

مرور فایل

انتخاب چندین فایل به طور همزمان

آپلود چندین فایل با پیشرفت آپلود

 فایل ها هنگام آپلود خودکار آپلود می شوند اگر شما نمی خواهید این ویژگی را انتخاب کنید، می توانید تنظیمات خودکار را به false تنظیم کنید . اما در این صورت باید با قرار دادن یک دکمه آپلود، ماژول آپلود فایل ها را در تعامل با کاربر فراهم کنید

برای اولین بار باید تنظیم Auto Upload را به false منتقل کنید

<script type = "text/javascript">

$(window).load(

    function() {

        $("#<%=FileUpload1.ClientID%>").fileUpload({

        'uploader': 'scripts/uploader.swf',

        'cancelImg': 'images/cancel.png',

        'buttonText': 'Browse Files',

        'script': 'Upload.ashx',

        'folder': 'uploads',

        'fileDesc': 'Image Files',

        'fileExt': '*.jpg;*.jpeg;*.gif;*.png',

        'multi': true,

        'auto': false

    });

   }

);

</script>

سپس لینک زیر را اضافه کنید که باعث آپلود می شود

<a href="javascript:$('#<%=FileUpload1.ClientID%>').fileUploadStart()">Start Upload</a>

این تا زمانی که کاربر روی لینک بالا آپلود فایلها کلیک کند، انجام نمی شود. اکنون از زمانی که کاربر آپلود شده است، کاربر میتواند یک پیوند اضافی برای پاک کردن فایلهای مرور شده در یک حرکت عالی داشته باشد

<a href="javascript:$('#<%=FileUpload1.ClientID%>').fileUploadClearQueue()">Clear</a>

 


دانلود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

ارسال نظر
ارسال پیام به :