Asp.Net 自定義控件實現圖片的上傳，瀏覽，Delete功能
4月的時候公司比較閒，就想着本身作點東西，其實主要是爲了更加熟悉.Net，畢竟接觸的時間不長，趁着有時間想提升提升。不過當我作到圖片上傳這個功能的時候，就有些停滯不前了，連續寫了兩天也達不到本身想要的標準。後來公司來活，而後就沒有而後了，然而作事總不能半途而廢吧~時隔一個多月，趁着這個週末，我再次拾起了這個項目，而首要工做就是攻破這個圖片上傳控件。css
下面說說個人標準是什麼子的吧~html
一、最多能夠上傳三張圖片，超過三張有提示。數據庫
二、點擊圖片小圖，有圖片放大功能，再次點擊，圖片恢復原來尺寸。c#
三、在圖片數量範圍內，可對圖片任意添加，Delete。服務器
看似都是很普通的功能吧，確實如此，只是對.Net自帶的FileUpload進行了小小的擴展。不過我就是在第3條上遇到了問題，主要仍是對頁面刷新機制不瞭解和沒有肯定好實現的方法以及不太熟悉自定義控件，不過如今問題都解決了。在給大夥兒說說實現方法以前，先看看效果，沒有美化，單看功能。ide
一、初始狀態this
二、選擇文件url
三、上傳圖片spa
四、查看圖片3d
五、Delete圖片
六、從新添加
七、提示狀況
Html代碼：
<div> <asp:FileUpload ID="fuImage" runat="server" /> </div> <div> <asp:Button ID="btnUpload" runat="server" Text="上傳" onclick="btnUpload_Click" /> </div> <div class="img_label"> <asp:Image ID="imgUploadImage1" Visible="false" runat="server" style="height:20px;width:20px" /> <asp:Button ID="button_ImgDelete1" runat="server" Text="***" onclick="button_ImgDelete1_Click" Visible="false" /> <asp:Image ID="imgUploadImage2" Visible="false" runat="server" style="height:20px;width:20px"/> <asp:Button ID="button_ImgDelete2" runat="server" Text="***" onclick="button_ImgDelete2_Click" Visible="false" /> <asp:Image ID="imgUploadImage3" Visible="false" runat="server" style="height:20px;width:20px"/> <asp:Button ID="button_ImgDelete3" runat="server" Text="***" onclick="button_ImgDelete3_Click" Visible="false" /> </div> <div id="outerDiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;"> <div id="innerDiv" style="position:absolute;"> <img id="bigImg" style="border:5px solid #fff;" src="" /> </div> </div>
Js代碼：
$(function () {
/*
* 針對上傳文件按鈕選擇完文件判斷是否選擇合法文件
*/
$("input[type=file]").change(function () {
var fileName = $(this).val();
var suffixRegExp = /\.jpg$|\.jpeg$|\.gif$|\.png$/i;
if (suffixRegExp.test(fileName)) {
$(this).next("img").attr("src", fileName);
}
else {
$(this).val("");
alert("容許上傳圖片格式:GIF|JPG|GIF|.");
}
});
/*
* 點擊圖片能夠放大進行圖片預覽，再點擊恢復
*/
$("img[id*=UploadImage]").click(function () {
$("#bigImg").attr("src", $(this).attr("src")).load(function () {
var windowW = $(window).width();
var windowH = $(window).height();
var realWidth = this.width;
var realHeight = this.height;
var imgWidth, imgHeight, scale = 0.8;
if (realHeight > windowH * scale) {
imgHeight = windowH * scale;
imgWidth = imgHeight / realHeight * realWidth;
if (imgWidth > windowW * scale) {
imgWidth = windowW * scale;
}
}
else if (realWidth > windowW * scale) {
imgWidth = windowW * scale;
imgHeight = imgWidth / realWidth * realHeight;
}
else {
imgWidth = realWidth;
imgHeight = realHeight;
}
$(this).width(imgWidth);
$(this).height(imgHeight);
var w = (windowW - imgWidth) / 2;
var h = (windowH - imgHeight) / 2;
$("#innerDiv").css({ "top": h, "left": w });
$("#outerDiv").fadeIn("fast");
});
});
/*
* 再次點擊放大的圖層，使圖層消失
*/
$("#outerDiv").click(function () {
$(this).fadeOut("fast");
})
/*
* 點擊上傳按鈕以前須要先判斷是否選擇了圖片，若是選擇的圖片數量大於3，提示不能繼續添加
*/
$(btn_UploadImage).click(function () {
var count = 0;
$("div.img_label img[src*=Upload]").each(function () {
if ($(this).attr("src") != null) {
count++;
}
})
if (count == 3) {
alert("最多添加3張圖片，如想繼續添加，請先***圖片");
return false;
}
})
}
C#代碼：
怎麼說呢？最初想的是用jQuery實現Delete這塊的功能，Delete圖片的思路其實就是給img的src屬性賦空值，而後將其隱藏掉，可是不知道爲何當再次點擊【上傳】按鈕的時候，後臺又能夠獲取到刪掉了的圖片src屬性的先前的值，這是讓我百思不得其解的地方。不過有時候問題總會有那麼一個點，很簡單可是又很難讓人注意到，我原本就是在後臺靠判斷img的url有無值，而後再給其賦值的，那麼我Delete的時候就能夠直接給想Delete的img賦空值啊，何須用jQuery呢？不知道我說的大夥兒能不能懂，就是當時的一個想法，結果致使遲遲解決不了這個問題。
另外想說說關於.Net自定義控件，感受真的蠻實用的，其實咱們在寫的時候就把其當成普通控件就好，能夠給其加一些控件屬性，而這些控件屬性其實就是這個自定義控件類的屬性（成員參數）了，固然，咱們還能夠把它純看成一個類，好比有數據庫交互的時候，咱們就能夠在其內部寫一個公開的Save方法，將控件內部的數據單獨保存起來，當整個頁面Save的時候，咱們只要在適當的位置調用一個自定義控件的Save方法就OK了。
public partial class ImageUploadControl : System.Web.UI.UserControl
{
private string _relativePath;
private string _value = "$$##";
public string Value
{
get { return _value; }
set { _value = value; }
}
private BmsContextDataContext bcDataCXD = new BmsContextDataContext();
private bool flag = false;//點擊上傳按鈕時，若是給Image賦值，flag置true，說明這次上傳結束，上傳按鈕點擊一次只能給一個Image賦值
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Init();
}
}
public void Init()
{
if (!string.IsNullOrEmpty(_value))
{
string[] sep = { "$$##" };
string[] imgList = _value.Split(sep, StringSplitOptions.RemoveEmptyEntries);
foreach (string img in imgList)
{
if (string.IsNullOrEmpty(imgUploadImage1.ImageUrl))
{
imgUploadImage1.ImageUrl = img;
imgUploadImage1.Visible = true;
button_ImgDelete1.Visible = true;
}
else if (string.IsNullOrEmpty(imgUploadImage2.ImageUrl))
{
imgUploadImage2.ImageUrl = img;
imgUploadImage2.Visible = true;
button_ImgDelete2.Visible = true;
}
else if (string.IsNullOrEmpty(imgUploadImage3.ImageUrl))
{
imgUploadImage3.ImageUrl = img;
imgUploadImage3.Visible = true;
button_ImgDelete3.Visible = true;
}
}
}
}
public void Save()
{
_value = "$$##";
if (!string.IsNullOrEmpty(imgUploadImage1.ImageUrl))
{
_value = _value + imgUploadImage1.ImageUrl + "$$##";
}
if (!string.IsNullOrEmpty(imgUploadImage2.ImageUrl))
{
_value = _value + imgUploadImage2.ImageUrl + "$$##";
}
if (!string.IsNullOrEmpty(imgUploadImage3.ImageUrl))
{
_value = _value + imgUploadImage3.ImageUrl + "$$##";
}
}
protected void btnUpload_Click(object sender, EventArgs e)
{
//點擊上傳按鈕,將圖片加載到第一個未加載圖片的Image控件上
_relativePath = this.ImageUpload(fuImage);
_value = "$$##";//每次點擊上傳按鈕，都是對當前控件的狀態進行遍歷，從新進行組串
if (string.IsNullOrEmpty(imgUploadImage1.ImageUrl) && !flag )
{
//當Image中無url，同時flag爲false
imgUploadImage1.ImageUrl = _relativePath;
_value = _value + _relativePath + "$$##";
imgUploadImage1.Visible = true;
button_ImgDelete1.Visible = true;
flag = true;
}
else
{
if (!string.IsNullOrEmpty(imgUploadImage1.ImageUrl))
{
_value = _value + imgUploadImage1.ImageUrl + "$$##";
}
}
if (string.IsNullOrEmpty(imgUploadImage2.ImageUrl) && !flag)
{
imgUploadImage2.ImageUrl = _relativePath;
_value = _value + _relativePath + "$$##";
imgUploadImage2.Visible = true;
button_ImgDelete2.Visible = true;
flag = true;
}
else
{
//加if是緣由，若是是由於flag爲true而進入這個分支，則判斷Image的url是否爲空
if (!string.IsNullOrEmpty(imgUploadImage2.ImageUrl))
{
_value = _value + imgUploadImage2.ImageUrl + "$$##";
}
}
if (string.IsNullOrEmpty(imgUploadImage3.ImageUrl) && !flag)
{
imgUploadImage3.ImageUrl = _relativePath;
_value = _value + _relativePath + "$$##";
imgUploadImage3.Visible = true;
button_ImgDelete3.Visible = true;
flag = true;
}
else
{
if (!string.IsNullOrEmpty(imgUploadImage3.ImageUrl))
{
_value = _value + imgUploadImage3.ImageUrl + "$$##";
}
}
}
private string ImageUpload(FileUpload fileUpload)
{
//若是FileUpload控件中有文件
if (fileUpload.HasFile)
{
string timeStamp = DateTime.Now.Ticks.ToString();//時間戳
string savePath = Server.MapPath("~/Upload/Images");//上傳路徑
//若是不存在此路徑,則建立一個新路徑
if (!Directory.Exists(savePath))
{
Directory.CreateDirectory(savePath);
}
savePath = savePath + "\\" + timeStamp + "_" + fileUpload.FileName;//重組文件名,加上對應的時間戳
fileUpload.SaveAs(savePath);//將圖片上傳到服務器
return "/Upload/Images/" + timeStamp + "_" + fileUpload.FileName; //返回圖片的名稱,相對路徑的
}
else
{
Utility.Show(this.Page, "未選擇圖片");
}
return null;
}
protected void button_ImgDelete1_Click(object sender, EventArgs e)
{
if (!string.IsNullOrEmpty(imgUploadImage2.ImageUrl))
{
imgUploadImage1.ImageUrl = imgUploadImage2.ImageUrl;
}
else
{
imgUploadImage1.ImageUrl = "";
imgUploadImage1.Visible = false;
button_ImgDelete1.Visible = false;
}
if (!string.IsNullOrEmpty(imgUploadImage3.ImageUrl))
{
imgUploadImage2.ImageUrl = imgUploadImage3.ImageUrl;
imgUploadImage3.ImageUrl = "";
imgUploadImage3.Visible = false;
button_ImgDelete3.Visible = false;
}
else
{
imgUploadImage2.ImageUrl = "";
imgUploadImage2.Visible = false;
button_ImgDelete2.Visible = false;
}
}
protected void button_ImgDelete2_Click(object sender, EventArgs e)
{
if (!string.IsNullOrEmpty(imgUploadImage3.ImageUrl))
{
imgUploadImage2.ImageUrl = imgUploadImage3.ImageUrl;
imgUploadImage3.ImageUrl = "";
imgUploadImage3.Visible = false;
button_ImgDelete3.Visible = false;
}
else
{
imgUploadImage2.ImageUrl = "";
imgUploadImage2.Visible = false;
button_ImgDelete2.Visible = false;
}
}
protected void button_ImgDelete3_Click(object sender, EventArgs e)
{
imgUploadImage3.ImageUrl = "";
imgUploadImage3.Visible = false;
button_ImgDelete3.Visible = false;
}
}
總結一下此次的控件開發，其實在寫這種自定義控件的時候，實現某些功能，咱們要儘可能去琢磨用後臺來直接實現，而不是上來就用js，最後弄的代碼的功能實現極爲分散，也容易將本身搞糊塗。總之就是一句話，上手以前必定要先計劃好。
最後但願你們給予更多更好的建議，我會繼續作擴展。也但願能有朋友給加上好看的樣式，咱們一塊兒玩玩~
新浪微博：http://weibo.com/zhouhongyu1989 歡迎圍觀~！
相關文章
- 1. Asp.Net 自定義控件實現圖片的上傳，瀏覽，Delete功能
- 2. vue自定義圖片上傳預覽功能
- 3. ASP.NET MVC4實現TinyMCE 4.0.20自定義上傳功能
- 4. Angular6自定義指令實現多圖片上傳預覽
- 5. 在asp.Net中使用fileuplod控件實現上傳圖片的功能
- 6. web端上傳圖片，實現預覽圖片功能
- 7. Android實現圖片瀏覽功能（圖片器原理實現）
- 8. uploadPreview js插件實現圖片上傳預覽功能原理
- 9. Qt編寫自定義控件36-圖片瀏覽器
- 10. node實現圖片的上傳功能
- 更多相關文章...
- • 自定義TypeHandler - MyBatis教程
- • PHP 文件上傳 - PHP教程
- • RxJava操作符（十）自定義操作符
- • SpringBoot中properties文件不能自動提示解決方法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 安裝cuda+cuDNN
- 2. GitHub的使用說明
- 3. phpDocumentor使用教程【安裝PHPDocumentor】
- 4. yarn run build報錯Component is not found in path 「npm/taro-ui/dist/weapp/components/rate/index「
- 5. 精講Haproxy搭建Web集羣
- 6. 安全測試基礎之MySQL
- 7. C/C++編程筆記：C語言中的複雜聲明分析，用實例帶你完全讀懂
- 8. Python3教程(1)----搭建Python環境
- 9. 李宏毅機器學習課程筆記2：Classification、Logistic Regression、Brief Introduction of Deep Learning
- 10. 阿里雲ECS配置速記
歡迎關注本站公眾號,獲取更多信息
