استفاده از JQuery و ASP.Net در انتخاب و آپلود فایل ها در Gmail
با سلام در این مقاله نحوه استفاده از JQuery و ASP.Net در انتخاب و آپلود فایل ها در Gmail را در چند مرحله به شما نشان میدهیم .امیدواریم مورد استفاده شما عزیزان قرار بگیرد .
مرحله 1 :
پلاگین Uploadify JQuery و کتابخانه JQuery را با استفاده از لینک های زیر دانلود کنید.
دانلود جی کوئری
دانلود Uploadify
پس از دانلود، باید چهار فایل زیر را در یک پوشه به نام اسکریپت در پوشه root وب سایت قرار دهید :
1. jQuery-1.3.2.min.js
2. jquery.uploadify.js
3. uploader.fla
4. uploader.swf
مرحله 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 را به تگ فرم اضافه کنید .
<form id="form1" runat="server">
<div style = "padding:40px">
<asp:FileUpload ID="FileUpload1" runat="server" />
</div>
</form>
اسکریپت زیر را در صورتی که از صفحه Master استفاده می کنید در بخش head یا ContentPlaceHolder قرار دهید .
<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 داریم . لیست کامل تنظیمات و توضیحات آنها در اینجا موجود است .
تنظیمات مهم برای اشاره کردن 'اسکریپت' : '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
handler به راحتی فایل های پست شده را می پذیرد و فایل را در پوشه ای به نام آپلود در داخل دایرکتوری root وب سایت که مسیر آن در یک کلید 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>