1. 程式人生 > >ASP.NET控制元件上傳圖片

ASP.NET控制元件上傳圖片

使用asp.net控制元件上傳圖片是一種比較簡單的方式,直接在後臺就可以得到圖片流,並對流進行上傳操作。

控制元件上傳圖片

前端頁面

第一種方式,使用asp控制元件

<asp:FileUpload runat="server" ID="image1"/> 
<asp:Button runat="server" ID="button1" Text="上傳圖片" onclick="button1_Click" />

第二種方式,使用html標籤並加入css樣式

由於file控制元件的樣式比較難看,所以加入了a標籤,來更改樣式,使file控制元件的長度和按鈕長度一樣,前面的文字框只是為了顯示上傳的檔案,和file控制元件的樣式保持一致。

HTML部分

<input type="text" id="text1" readonly="readonly" class="text_1" />
<a href="javascript:;" class="a-upload">
   <input type="file" runat="server" id="file1" autocomplete="off" accept="image/*" onchange="fileChange(this,'text1');" style="width: 100px;"/>瀏覽 
</a>

javasprict

function fileChange(p,v){
    if (p != null && v != null) {
        var va = document.getElementById(v);
        va.value = p.value;
        va.focus();
    }
}

CSS樣式

    <style type="text/css">
        .text_1{ width: 477px; height: 18px; line-height: 18px; border: 1px solid #ccc
; padding: 5px; color: #333; font-size: 14px;vertical-align: middle;}
.a-upload {padding: 4px 28px;height: 20px;line-height: 20px;letter-spacing:4px;font-size:14px;position: relative; cursor: pointer;color: #444;background: #eee;border: 1px solid #ddd;border-radius: 4px;display: inline-block; text-decoration:none;display: inline;zoom: 1} .a-upload input {position: absolute;font-size: 40px;right: 0;top: 0;opacity: 0;filter: alpha(opacity=0);cursor: pointer} .a-upload:hover {color: #111;background: #aaa;border-color: #ccc;text-decoration: none}
</style>

後臺部分

後臺部分程式碼在接收圖片的時候,直接使用伺服器控制元件接收即可。

        protected void button1_Click(object sender, EventArgs e)
        {
            try
            {
                HttpPostedFile file=image1.PostedFile;//對應前端file控制元件的id
                if (file != null && file.ContentLength > 0)
                {
                    string fileName = file.FileName;
                    string fileSize = file.ContentLength.ToString();
                    string fileType = file.ContentType;
                    string fileExtension = Path.GetExtension(fileName);
                    if (fileExtension == null || fileExtension.Trim() == "")
                    {
                        fileExtension = "";
                    }
                    else
                    {
                        if (fileExtension.IndexOf('.') == -1)
                        {
                            fileExtension = "." + fileExtension;
                        }
                    }
                    string filePath = "/image1"+"/"+Guid.NewGuid().ToString()+fileExtension;
                    Stream stream = file.InputStream;//檔案流
                    //FileUploadClass upload = new FileUploadClass();//上傳類,自己寫就可以
                    //upload.UploadFile(stream, filePath);//上傳檔案
                    stream.Close();
                }
            }
            catch (Exception ee)
            {
            }
        }