آپلود فایل به تعداد نامحدود

[arta.nasiri]

سلام

امروز یک آموزش آماده کردم که با استفاده از این آموزش میتوانید تعداد نامحدودی فایل به همراه عنوان فایل را از کاربر دریافت کرده و سمت سرور فایل ها را ذخیره کنید. ( نام و مشخصات فایل نیز در دیتابیس ذخیره میشود )

خب
یک فرم یا صفحه به اسم Upload یا هر چیز دیگری که دوست دارید ایجاد کنید.
حال در قسمت Designer's Code یا در حالت طراحی کدهای زیر را وارد کنید.

ابتدا یک تگ p با id="upload-area" ایجاد کرده و تگهای زیر را در آن قرار دهید به شکل زیر :

<p id="upload-area" style=" direction: ltr;">
<span>File 1 : </span><input id="File1" type="file" size="60" maxlength="209715200" tabindex="0" runat="server" /><span> | </span>
<span>File 1 Title : </span><input id="txt1" name="txt1" type="text" size="40" tabindex="1" runat="server" />
</p>
در بالا ما 2 تگ input به صورت پیشفرض داریم که دارای مشخصات فوق است :
maxlenght نشان دهنده حداکثر حجم مجاز برای فایل است که در اینجا من 200 مگابایت رو وارد کردم ( به بایت ).
runat که باعث میشود تگ فعلی به یک کنترل سمت سرور تبدیل شود.

حال یک تگ دیگر به شکل زیر برای نمایش پیام ایجاد کنید.

<span id="msg" runat="server"></span>
دقت کنید حتما برای هر تگ یک id انتخاب کرده باشید.

یک تگ دیگر نیز برای اضافه کردن تگهای input به صورت زیر ایجاد کنید.

<input id="btnAddMore" type="button" value="Add more..."
onclick="add()" />
نوع این تگ button است و موقع کلیک تابع جاوااسکریپت add() اجرا میشود.

و یک کنترل Button دیگر برای آپلود فایل

<asp:Button ID="btnUpload" runat="server"
Text="Upload Now" />

خب تا اینجا کارمون با ایجاد تگ ها اضافه شده.
حالا تابع جاوا اسکریپت که وظیفش ایجاد تگ های اضافی است رو به شکل زیر به صفحه اضافه کنید.
<script type="text/javascript">
function add() {
if (!document.getElementById || !document.createElement)
return false;

var uploadArea = document.getElementById("upload-area");

if (!uploadArea)
return;

var newLine = document.createElement("br");
uploadArea.appendChild(newLine);

if (!add.lastAssignedId)
add.lastAssignedId = 2;

//----------------------------------------------------
// create new span for fileupload
var fuSpan = document.createElement('span');
var fuSpanText = document.createTextNode('File ' + add.lastAssignedId + ' : ');
fuSpan.appendChild(fuSpanText);
// create new fileupload control
var newUploadBox = document.createElement('input');
// set property for input ( fileupload )
newUploadBox.type = 'file';
newUploadBox.size = '60';
// set other att
newUploadBox.setAttribute('id', 'FileUpload' + add.lastAssignedId);
newUploadBox.setAttribute('name', 'FileUpload:' + add.lastAssignedId);
newUploadBox.setAttribute('maxlength', '209715200');
newUploadBox.setAttribute('tabindex', add.lastAssignedId);

//----------------------------------------------------
// create new span for separator
var seSpan = document.createElement('span');
var seSpanText = document.createTextNode(' | ');
seSpan.appendChild(seSpanText);

//----------------------------------------------------
// create new span for title
var tiSpan = document.createElement('span');
var tiSpanText = document.createTextNode('File ' + add.lastAssignedId + ' Title : ');
tiSpan.appendChild(tiSpanText);
// create new textbox for title
var newTextBox = document.createElement('input');
// set property for input ( textbox )
newTextBox.type = 'text';
newTextBox.size = '40';
// set other att
newTextBox.setAttribute('id', 'txt' + add.lastAssignedId);
newTextBox.setAttribute('name', 'txt' + add.lastAssignedId);
newTextBox.setAttribute('tabindex', add.lastAssignedId + 1);

//----------------------------------------------------

uploadArea.appendChild(fuSpan);
uploadArea.appendChild(newUploadBox);
uploadArea.appendChild(seSpan);
uploadArea.appendChild(tiSpan);
uploadArea.appendChild(newTextBox);
add.lastAssignedId++;
}
</script>

خب حالا توضیحات کد بالا :

بررسی میکند آیا مرورگر از ایجاد المنت پشتیبانی میکند یا نه، اگر پشتیبانی نکرد نمیتوانید با این روش کار کنید.
if (!document.getElementById || !document.createElement)
return false;

المنت upload-area را در متغییر uploadArea قرار میدهیم
var uploadArea = document.getElementById("upload-area");

بررسی میکنیم آیا المنتی را که در کد بالا در متغییر uploadArea قرار دادیم وحود دارد یا خیر، اگر وجود نداشت از انجام بقیه عملیات خودداری کرده و برمیگردد.
if (!uploadArea)
return;

یک المنت br ( به خط بعد میرود ) ایجاد کرده و در newLine قرار میدهیم، سپس این المنت را به آخر uploadArea پیوند میزنیم
var newLine = document.createElement("br");
uploadArea.appendChild(newLine);

این خط یک شمارنده برای ما ایجاد میکند و با هر بار اجرای تابع فوق مقدارش یک واحد افزایش پیدا میکند. ( اول بررسی میکند اگر از قبل وجود نداشت ایجاد میکند )
دلیل اینکه مقدار اولیه هم 2 داده شده است این است که از قبل 2 تگ داریم که دارای مقدار 1 هستند.
if (!add.lastAssignedId)
add.lastAssignedId = 2;

در اینجا ما 2 المنت span و input و یک TextNode ایجاد میکنیم، سپس المنت TextNode را به المنت span پیوند میزنیم.
سپس نوع المنت input را file انتخاب میکنیم و سایز آن را 60 وارد میکنیم
newUploadBox.type = 'file';
newUploadBox.size = '60';
و بعد از آن هم att های المنت input را مشخص میکنیم
newUploadBox.setAttribute('id', 'FileUpload' + add.lastAssignedId);
newUploadBox.setAttribute('name', 'FileUpload:' + add.lastAssignedId);
newUploadBox.setAttribute('maxlength', '209715200');
newUploadBox.setAttribute('tabindex', add.lastAssignedId);

و به همین ترتیب تا آخر.
در آخر المنت های ایجاد شده را به uploadArea پیوند میزنیم و مقدار lastAssigneId یک واحد افزایش میدهیم.


کدهای صفحه به صورت کامل :

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Upload.aspx.cs" Inherits="Upload" EnableViewState="false" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Free Uploader</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<p>File Uploader</p>
<form id="form_upload" action="Upload.aspx" method="get">
<p id="upload-area" style=" direction: ltr;">
<span>File 1 : </span><input id="File1" type="file" size="60" maxlength="209715200" tabindex="0" runat="server" /><span> | </span>
<span>File 1 Title : </span><input id="txt1" name="txt1" type="text" size="40" tabindex="1" runat="server" />
</p>
<span id="msg" runat="server"></span>
<input id="btnAddMore" type="button" value="Add more..."
onclick="add()" />&nbsp;
<asp:Button ID="btnUpload" runat="server"
Text="Upload Now" />
</form>
</div>
</form>
<script type="text/javascript">
function add() {
if (!document.getElementById || !document.createElement)
return false;

var uploadArea = document.getElementById("upload-area");

if (!uploadArea)
return;

var newLine = document.createElement("br");
uploadArea.appendChild(newLine);

if (!add.lastAssignedId)
add.lastAssignedId = 2;

//----------------------------------------------------
// create new span for fileupload
var fuSpan = document.createElement('span');
var fuSpanText = document.createTextNode('File ' + add.lastAssignedId + ' : ');
fuSpan.appendChild(fuSpanText);
// create new fileupload control
var newUploadBox = document.createElement('input');
// set property for input ( fileupload )
newUploadBox.type = 'file';
newUploadBox.size = '60';
// set other att
newUploadBox.setAttribute('id', 'FileUpload' + add.lastAssignedId);
newUploadBox.setAttribute('name', 'FileUpload:' + add.lastAssignedId);
newUploadBox.setAttribute('maxlength', '209715200');
newUploadBox.setAttribute('tabindex', add.lastAssignedId);

//----------------------------------------------------
// create new span for separator
var seSpan = document.createElement('span');
var seSpanText = document.createTextNode(' | ');
seSpan.appendChild(seSpanText);

//----------------------------------------------------
// create new span for title
var tiSpan = document.createElement('span');
var tiSpanText = document.createTextNode('File ' + add.lastAssignedId + ' Title : ');
tiSpan.appendChild(tiSpanText);
// create new textbox for title
var newTextBox = document.createElement('input');
// set property for input ( textbox )
newTextBox.type = 'text';
newTextBox.size = '40';
// set other att
newTextBox.setAttribute('id', 'txt' + add.lastAssignedId);
newTextBox.setAttribute('name', 'txt' + add.lastAssignedId);
newTextBox.setAttribute('tabindex', add.lastAssignedId + 1);

//----------------------------------------------------

uploadArea.appendChild(fuSpan);
uploadArea.appendChild(newUploadBox);
uploadArea.appendChild(seSpan);
uploadArea.appendChild(tiSpan);
uploadArea.appendChild(newTextBox);
add.lastAssignedId++;
}
</script>
</body>
</html>



کار با صفحه Designer's code تمام شد، حال Code-Behind را باز کنید.

فایل هایی که از کلاینت ارسال شده اند را بدست می آورد
HttpFileCollection files = HttpContext.Current.Request.Files;

یک حلقه که به تعداد فایل های ارسال شده تکرار میشود
for (int i = 0; i < files.Count; i++)

در صورتی که فولدر files وجود نداشت آن را ایجاد میکند.
if (!Directory.Exists(Server.MapPath("~/files/")))
{
Directory.CreateDirectory(Server.MapPath("~/files/"));
}

هر بار یکی از فایل های ارسال شده را در شی HttpPostedFile قرار میدهد
HttpPostedFile file = files[i];

در صورتی که حجم فایل کمتر یا برابر 200 مگابایت باشد بقیه عملیات انجام میگیرد.
if (file.ContentLength <= 209715200)

در این خط یک رشته ترکیبی از اعداد، رشته و نام فایل ایجاد میکند و در متغییر c قرار میدهد. ( به علت وجود نام های تکراری )
string c = GetRandomFileName() + "-" + System.IO.Path.GetFileName(file.FileName).Replace(" ", "-").ToString();

مقدار عنوانی که برای فایل وارد کرده اید را در متغییر title قرار میدهد.
string _title = "txt" + (Convert.ToInt32(i.ToString()) + 1).ToString();
string title = Request.Form[_title].ToString();

پسوند فایل را بررسی میکند در صورتی که مجاز بود بقیه عملیان انجام میگیرد.
if (ValidFileType(System.IO.Path.GetFileName(file.Fil eName)))

و در این خط فایل مورد نظر با نام ترکیبی در فولدر files ذخیره میشود.
file.SaveAs(Server.MapPath("~/files/" + c));

و بقیه دستورات که مربوط به ذخیره نام و مشخصات فایل در بانک است.


تابع ValidFileType برای بررسی پسوند فایل
public static bool ValidFileType(string filename)
{
string[] filetype = new string[] { "mp3", "flv"};
string filenametype = filename.Substring(filename.LastIndexOf(".") + 1, filename.Length - filename.LastIndexOf(".") - 1);
for (int i = 0; i < filetype.Length; i++)
{
if (filenametype == filetype[i])
{
return true;
}
}
return false;
}

و تابع GetRandomFileName برای ایجاد یک رشته ترکیبی از اعداد و رشته ها
public string GetRandomFileName()
{
StringBuilder builder = new StringBuilder();
builder.Append(RandomFileName(4, true));
builder.Append(RandomNumber(1000, 9999));
builder.Append(RandomFileName(3, false));
builder.Append(RandomNumber(10, 9999));
return builder.ToString();
}

public static string RandomFileName(int len, bool lower)
{
int stringLength = len;

Random rnd = new Random((int)System.DateTime.Now.Ticks);
System.Text.StringBuilder randomText = new
System.Text.StringBuilder(stringLength);

int minValue = 65;

int maxValue = 90;

int randomRange = maxValue - minValue;

double rndValue;

for (int i = 0; i < stringLength; i++)
{
rndValue = rnd.NextDouble();

randomText.Append((char)(minValue + rndValue * randomRange));
}
if (lower)
{
return randomText.ToString().ToLower();
}
return randomText.ToString();
}

public static string RandomNumber(int min, int max)
{
Random rnd = new Random();
return rnd.Next(min, max).ToString();
}

و این دستور که باید در web.config بین المنت های <System.web></System.web> قرار گیرد.
<httpRuntime executionTimeout="720" maxRequestLength="204800"/>

این کل کار بود، در مورد نحوه ذخیره در بانک و نحوه دریافت لینک دانلود میتوانید پروژه ضمیمه را دانلود کنید.

پ . ن : در صورتی که در توضیحات اشکالی داشتم حتما بگید تا اصلاح کنم.

قسمت بعدی آموزش نحوه ایجاد لینک های غیر مستقیم می باشد.

[m4prog]

با سلام و با تشکر برای گذاشتن این برنامه من به یه مشکلی بر خوردم پایگاه داده اتچ نمی شه لطفا راهنمایی فرمایید؟

[ramin149]

من هم با پایگاه داده مشکل دارم به زحمت دوباره آپلود کنید ون صفحه Default.aspx اجرا نمی شه :لبخندساده:

[arta.nasiri]

سلام

مشکلی نداشت تست کردم، احتمالا به خاطر اینه که من از vs 2010 استفاده کردم.
من فایل ضمیمه را آپدیت کردم دوباره تست کنید.

[ramin149]

من هم vs2010 نصب گردم ولی باز هم خطا می ده پیغام خطا
The database 'C:\USERS\RAMIN\DOCUMENTS\DOWNLOADS\COMPRESSED\UPL OAD\APP_DATA\DATABASE.MDF' cannot be opened because it is version 661. This server supports version 655 and earlier. A downgrade path is not supported.
Could not open new database 'C:\USERS\RAMIN\DOCUMENTS\DOWNLOADS\COMPRESSED\UPL OAD\APP_DATA\DATABASE.MDF'. CREATE DATABASE is aborted.
An attempt to attach an auto-named database for file C:\Users\Ramin\Documents\Downloads\Compressed\uplo ad\App_Data\Database.mdf failed. A database with the same name exists, or specified file cannot be opened, or it is located on UNC share.


اگه امکان داره نام جدول و اسم فیلد ها رو بنویسید تا دیتابیس را خودمان بسازیم

[arta.nasiri]

سلام

یک جدول به اسم tbl_Files و دارای مقادیر زیر میباشد.
ID int NOT NULL Primary Key , Identity YES
Titlle nvarchar(64) NULL
FileName ntext NULL

و یک sp با نام NewFile
CREATE PROCEDURE dbo.NewFile
(
@Title nvarchar(64),
@FileName ntext
)
AS

BEGIN

INSERT INTO tbl_Files(Title,FileName)
VALUES (@Title,@FileName)

END

[neynavaz]

دمت گرممممممممممممم

[r_s1389@yahoo.com]

سلام

یک جدول به اسم tbl_Files و دارای مقادیر زیر میباشد.
ID int NOT NULL Primary Key , Identity YES
Titlle nvarchar(64) NULL
FileName ntext NULL

و یک sp با نام NewFile
CREATE PROCEDURE dbo.NewFile
(
@Title nvarchar(64),
@FileName ntext
)
AS

BEGIN

INSERT INTO tbl_Files(Title,FileName)
VALUES (@Title,@FileName)

END
عالی بید داش

[r_s1389@yahoo.com]

من این آپلود سنتر رو برای کاربران میخوام درست کنم و کار هم میکنه خوب
اگه یک کاربر وقتی فایلش رو آپلود کرد چجوری میتونم یک لینک درست کنم براش؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟ ؟؟؟؟

[ali_mnkt]

آقا یک سئوال فنی. دستور زیر از پسوند می فهمه که فایل داره ارسال می شه ؟


HttpFileCollection files = HttpContext.Current.Request.Files;

[ali_mnkt]

سلام

یک سئوال : تونستیم فایل هایی که می خواییم رو اضافه کنیم حالا فرض کنید یک فایل رو بخواییم حذف کنیم حالا چطور می شه fileupload خاص رو حذف کرد ؟

[robat7]

درود
ممنون از پست مفید شما
من میخواهم مقداری تغییر در این کد بدهم بدین ترتیب که یک کلید Delete به هر سطر اضافه شود و با فشردن این کلید آن سطر حذف گردد.
باید بگویم که در asp تازه کار هستم و نمی دانم این امر ممکن هست یا خیر

[r_s1389@yahoo.com]

درود
ممنون از پست مفید شما
من میخواهم مقداری تغییر در این کد بدهم بدین ترتیب که یک کلید Delete به هر سطر اضافه شود و با فشردن این کلید آن سطر حذف گردد.
باید بگویم که در asp تازه کار هستم و نمی دانم این امر ممکن هست یا خیر
کار نشد نداره

[raika17metal]

می توانید از کنترل های موجود در telerik استفاده کنید.