آپلود فایل با استفاده از ASP.NET بر روی هاست یکی از مواردی هست که زیاد استفاده می شود که در آموزش آپلود فایل در ASP.NET سعی شده به ساده ترین شکل ممکن به شما عزیزان آموزش داده شود.
آپلود فایل در ASP.NET به دو طریق می تواند باشد
- ASP controler
- HTML controler
که اگر تعداد فایلهایی که قرار است آپلود شود، مشخص باشد بهترین گزینه ASP controler و اگر نامشخص باشد از html controler استفاده میکنیم.
ASP.NET Controler
ابتدا در سمت طراحی موارد زیر را اضافه میکنیم که شامل FileUploder و Button برای ذخیره فایل می باشد
<body>
<form id="form1" runat="server">
<div>
<asp:FileUpload runat ="server" ID="fileUploader"/>
<asp:Button ID="btnSave" OnClick="btnSave_Click" runat="server" Text="Save"/>
</div>
</form>
</body>
نکته: به هر تعداد که نیاز باشد آپلودر اضافه می کنیم.
سپس وارد سمت کد می شویم
protected void btnSave_Click(object sender, EventArgs e) {
if (fileUploader.HasFile) {
fileUploader.SaveAs(MapPath("/files/" + fileUploader.FileName));
}
}
HTML Controler
در این قسمت در سمت طراحی دو کنترلر با نوع file و Button به صفحه میکنیم که این file ها میتوانند از طریق javascript اضافه شوند
<body> <form id="form1" runat="server" enctype="multipart/form-data"> <div> <input type="file" name="upfile"/> <input type="file" name="upfile"/> <asp:Button ID="btnSave" OnClick="btnSave_Click" runat="server" Text="Save"/> </div> </form> </body>
نکته: به قسمت bold شده در form توجه نمایید. این قسمت در asp controler نوشته نمی شود ولی در html controler مهم است، چون مقدار فایل را NULL برمی گرداند.
نکته: قسمت bold شده در input نشان دهنده این است که نام آپلودرها می تواند همنام هم باشد و مثل asp controler باعث خطا نمی شود.
حال وارد سمت کد می شویم
protected void btnSave_Click(object sender, EventArgs e) { HttpFileCollection files = Request.Files; for (int counter = 0; counter < files.Count; counter++) { HttpPostedFile fileUpload = files[counter]; if (fileUpload != null && fileUpload.ContentLength > 0) { fileUpload.SaveAs(MapPath("/files/" + fileUpload.FileName)); } } }
نحوه افزودن File Uploder در html controler با استفاده از Javascript
کافی است سمت طراحی را به صورت زیر تغییر دهیم
<form id="form1" runat="server" enctype="multipart/form-data"> <div> <div id="divFile"> <input type="file" name="upfile"/> </div> <div> <a href="#" onclick="addFunc()" id="btnAdd">Add Uploder</a> </div> <asp:Button ID="btnSave" OnClick="btnSave_Click" runat="server" Text="Save"/> </div> <script> function addFunc(){ node = document.getElementById("divFile"); node.insertAdjacentHTML("beforeend","<input type=\"file\" name=\"upfile\"/>"); } </script> </form>
که با کلیک کردن بر روی Add Uploder در قسمت مربوطه uploder ها اضافه خواهند شد.