圖片及檔案上傳和下載

來源:互聯網
上載者:User
上傳|下載 本文簡單介紹ASP.NET 2.0中將圖片或檔案上傳到伺服器或儲存到資料庫的方法,以及儲存後如何顯示和下載。 1.圖片及檔案儲存到伺服器 1.1 上傳本樣本構造一個能將檔案上傳到伺服器指定目錄的頁面。(1)       建立一個ASP.NET網站,增加web.config設定檔。(2)       在方案總管中,在網站名稱上單擊滑鼠右鍵,增加一個檔案夾,取名為Images,作為上傳檔案的路徑。(3)       進入default.aspx的設計模式,從工具箱的標準選項卡中,拖一個FileUpload控制項到頁面上,預設ID為“FileUpload1”。該控制項負責選中一個檔案。(4)       拖一個Button到頁面上,Text屬性設定為“上傳”,ID設定為btnUpload。點擊該按鈕後,上傳檔案。(5)       為上傳按鈕增加Click事件。(6)       在Click事件中,增加以下代碼:    protected void btnUpload_Click(object sender, EventArgs e)    {        // 是否選中了檔案,如果沒有選中,提示並返回        if (FileUpload1.FileName == "")        {            Response.Write("<script language='javascript'>alert('請先選中一個檔案再點擊上傳按鈕!');</script>");            return;        }         /* 為防止上傳的檔案重名,將上傳時間追加到檔案名稱之後          * 擷取新檔案名稱開始     */         // 取得上傳檔案名稱,注意這樣得到的是完整路徑+檔案名稱        string strFileName = FileUpload1.FileName;         // 得到最後一個“\”的位置        int nIndex = strFileName.LastIndexOf('\\');         // 得到真正的檔案名稱        strFileName = strFileName.Substring(nIndex + 1);         // 得到檔案尾碼前的“.”所在位置        nIndex = strFileName.LastIndexOf('.');         // 將“檔案名稱.尾碼”改為“檔案名稱+時間.尾碼”(那個加號表示串連)        strFileName = strFileName.Substring(0, nIndex) + DateTime.Now.ToString("yyyyMMddHHmmss") + strFileName.Substring(nIndex);        /* 擷取新檔案名稱結束 */         // 將上傳檔案的虛擬目錄映射為伺服器絕對路徑        string strPath = Server.MapPath("./Images/" + strFileName);         // 上傳檔案        FileUpload1.PostedFile.SaveAs(strPath);}(7)       運行,選中一個檔案並上傳,看一下是否上傳到了Images目錄。如果不選中檔案直接點上傳,看是否有提示。 1.2 檔案的使用上傳檔案的目的是為了使用它,一般在上傳檔案過程中,我們把新的檔案名稱記入資料庫。在使用時,可以用超級串連<a href=’./Images/新檔案名稱’>顯示文本</a>。點擊這個超級連結,如果是圖片,則會直接開啟;如果是檔案,則會彈出一個對話方塊,提示是儲存還是直接開啟。如果上傳的是圖片,要把它嵌入到網頁的固定位置,可以使用<img src=’./Images/新檔案名稱’ />標籤或使用Image控制項。 1.3 優缺點檔案儲存到伺服器的優點是使用比較簡單。缺點是,如果要刪除一個檔案,必須在Images上建立一個可寫的虛擬目錄,或者直接將發表的虛擬目錄設定為可寫的。將虛擬目錄設定為可寫的有嚴重的安全缺陷,因為任何人都可以寫這個虛擬目錄,無法杜絕別有用心的人寫入一個惡意檔案。因此一般伺服器不允許建立可寫虛擬目錄,這樣刪除檔案就受到限制。刪除檔案可以使用FileInfo類,可以自己寫一下刪除檔案的代碼,看一下沒有建立可寫虛擬目錄時刪除是否可以,然後建立可寫虛擬目錄再試一下。 2.圖片及檔案儲存到資料庫此例我們以圖片為例,對檔案操作也是類似的。 2.1 上傳(1)            在DbTemp資料庫中,建立一個名為UpFiles的表,用來存放上傳的圖片,欄位如下:
欄位名 意義 資料類型 備忘
FileID 檔案ID int 設為欄位增長、主鍵
FileName 檔案名稱 Varchar(50)  
FileContent 上傳檔案的內容 Image  
 (2)            添加一個Web表單,名為Default2.aspx。(3)            進入頁面的設計模式,拖入一個FileUpload。(4)            拖入一個Button,Text設為“上傳”,ID為“btnUpload”。(5)            拖入一個GridView,用於顯示檔案名稱。(6)            的資料來源選擇“建立資料來源”,彈出建立資料來源嚮導。GridView(7)            資料來源類型選擇為“資料庫”,名字為SqlFileSource,確定。(8)            建立一個資料庫連接,如果忘記了怎麼做,可以參考blog中《ASP.NET2.0入門(1)——訪問資料庫》那篇文章。(9)            在配製Sql語句介面,選擇“指定自訂SQL語句或預存程序”,然後選擇“下一步”。(10)        語句設定為“SELECT FileID, FileName, FileContent FROM UpFiles ORDER BY FileID”。Select(11)        語句設定為“INSERT INTO UpFiles(FileName, FileContent) VALUES (@FileName, @FileContent)”。Insert(12)        語句設定為“DELETE FROM UpFiles WHERE (FileID = @original_FileID)”。Delete(13)        完成資料來源的建立,並啟用刪除。(14)        將SqlFileSource的OldValuesParameterFormatString屬性設定為“original_{0}”。(15)        點擊InsertQuery屬性後的按鈕,選中參數FileContent,將參數源設定為Control,ControlID設定為FileUpload1,確定。(16)        經過設定後,aspx的body內代碼如下:<body>    <form id="form1" runat="server">    <div>        <asp:FileUpload ID="FileUpload1" runat="server" Width="338px" />        <asp:Button ID="btnUpload" runat="server" Text="上傳" />        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="FileID"            DataSourceID="SqlFileSource">            <Columns>                <asp:CommandField ShowDeleteButton="True" />                <asp:BoundField DataField="FileID" HeaderText="FileID" InsertVisible="False" ReadOnly="True"                    SortExpression="FileID" />                <asp:BoundField DataField="FileName" HeaderText="FileName" SortExpression="FileName" />            </Columns>        </asp:GridView>        <asp:SqlDataSource ID="SqlFileSource" runat="server" ConnectionString="<%$ ConnectionStrings:DbTempConnectionString %>"            DeleteCommand="DELETE FROM UpFiles WHERE (FileID = @original_FileID)" InsertCommand="INSERT INTO UpFiles(FileName, FileContent) VALUES (@FileName, @FileContent)"            OldValuesParameterFormatString="original_{0}" SelectCommand="SELECT FileID, FileName, FileContent FROM UpFiles ORDER BY FileID">            <DeleteParameters>                <asp:Parameter Name="original_FileID" />            </DeleteParameters>            <InsertParameters>                <asp:Parameter Name="FileName" />                <asp:ControlParameter ControlID="FileUpload1" Name="FileContent" PropertyName="FileBytes" />            </InsertParameters>        </asp:SqlDataSource>    </div>    </form></body>(17)        為上傳按鈕增加Click事件:    protected void btnUpload_Click(object sender, EventArgs e)    {        // 是否選中了檔案,如果沒有選中,提示並返回        if (FileUpload1.FileName == "")        {            Response.Write("<script language='javascript'>alert('請先選中一個檔案再點擊上傳按鈕!');</script>");            return;        }         // 取得上傳檔案名稱,注意這樣得到的是完整路徑+檔案名稱        string strFileName = FileUpload1.FileName;         // 得到最後一個“\”的位置        int nIndex = strFileName.LastIndexOf('\\');         // 得到真正的檔案名稱        strFileName = strFileName.Substring(nIndex + 1);         // 插入資料        SqlFileSource.InsertParameters["FileName"].DefaultValue = strFileName;        SqlFileSource.Insert();}(18)        運行程式,選擇一個圖片上傳,可以看到列表中的顯示。刪除一個圖片,可以看到能直接刪除。 2.2 圖片的顯示圖片放到資料庫後,顯示有一些問題,因為我們沒有辦法直接用src或ImageUrl之類的屬性去請求它。但我們回顧一下blog中《Web繪圖(1)——伺服器端繪圖》那篇文章,就可以找到方法,那就是用一個aspx頁面將圖片取出並儲存,把這個aspx頁面轉換為圖片資料。現在我們要在那個GridView中顯示檔案名稱那一列做個超級連結,點擊超級連結顯示圖片,過程如下:(1)           在方案總管的網站名稱上單擊滑鼠右鍵,選擇“添加ASP.NET檔案夾”菜單下的“App_Code”,建立一個App_Code檔案夾。我們寫的不在aspx頁面下的代碼,以及建立的資料集等都必須放到這個檔案夾下(微軟有時候為了自己方便也是瞎搞),我們將在這個檔案夾下建立一個類型化資料集,用來讀取檔案內容。(2)           在建立的“App_Code”檔案夾上,單擊滑鼠右鍵,選擇“添加新項”菜單。(3)           彈出的對話方塊中,選擇“資料集”,名字取為“FileSet.xsd”,選擇“添加”按鈕,這時候彈出“TableAdapter配製嚮導”。(一個資料集中可以放多個表,添加第二個表時可以從工具箱中拖個TableAdapter過來,剩下的和下面的方法就一樣了)。(4)           嚮導第一步是建立連接字串,因為我們前面已經建立了一個,就不用建立了,直接選擇那個就可以了。(5)           下一步是選擇命令類型,我們選擇“使用SQL語句”,再下一步。(6)           語句輸入“SELECT FileID, FileName, FileContent FROM UpFiles WHERE (FileID = @FileID)”。SQL(7)           一直下一步到完成,這樣就建立的一個資料集,而且我們還可以看到裡面有個UpFiles表,對應的就是資料庫中的表。表下面有個UpFilesTableAdapter,這個適配器中自動產生了從資料庫讀取資料的Fill代碼,以及修改資料庫的Update代碼等(微軟這方面考慮真實周全,所有代碼都替我們寫好了)。(8)           建立一個名為“ImageShow.aspx”的Web表單,我們將在這個表單中讀出資料庫中的資料,並儲存為圖片。(9)           在該表單的Page_Load事件中,輸入如下代碼:    protected void Page_Load(object sender, EventArgs e)    {        // 建立資料集執行個體        FileSet fileSet = new FileSet();         // 建立資料配接器執行個體        FileSetTableAdapters.UpFilesTableAdapter adapter = new FileSetTableAdapters.UpFilesTableAdapter();         // 讀取資料,我們從GridView通過QueryString方式傳入參數FileID,該參數是資料庫中記錄的檔案ID        adapter.Fill(fileSet.UpFiles, int.Parse(Request["FileID"]));         // 取出二進位檔案內容,假設檔案一定存在,則第0行的FileContent欄位就是我們要取的資料        byte[] by = (byte [])fileSet.UpFiles.Rows[0]["FileContent"];         // 寫入輸出資料流        Response.BinaryWrite(by);}(10)       回到Default2.aspx的設計模式,前面GridView中我們顯示的是檔案名稱,下面改成超級連結顯示。(11)       選中GridView,點擊Columns屬性後面的按鈕,彈出顯示的欄位對話方塊。(12)       將“選定的欄位”列表框中的FileName欄位刪除。(13)       在“可用欄位”列表框中選擇“HypeLinkField”,加入到“選定的欄位”列表框。(14)       選中新增的那個“HypeLinkField”,修改如下屬性:
屬性名稱 注釋
DataNavigateUrlFields FileID 綁定的Url欄位
DataNavigateUrlFormatString ImageShow.aspx?FileID={0} Url格式,傳遞FileID參數到ImageShow.aspx
DataTextField FileName 顯示的欄位
HeaderText 檔案名稱 GridView該列的表頭
Target _blank 點超級連結後彈出一個新視窗顯示圖片
 (15)       確定後運行,看一下效果。超級連結列顯示的是檔案名稱字,點擊超級連結,會彈出一個新視窗(可不用讓你的防火牆攔截噢),新視窗中顯示的是我們上傳的圖片。 2.3 優缺點優點比較明顯,就是刪除比較容易,刪除那條記錄就可以了,沒有了可寫虛擬目錄的安全隱憂。缺點也比較明顯,就是麻煩。 3.關於檔案批量上傳有很多人詢問或企圖尋找一個實現檔案批量上傳的途徑,就是能把一批檔案一次上傳,而不用一個一個選擇。如果你真正理解了互連網,就不會再有這種想法了。想象一下吧,如果真的有一款瀏覽器能實現批量檔案上傳,就可以寫一個網站,只要別人瀏覽你的網站,就可以把別人硬碟上的檔案都讀入到你的伺服器上去,別人所有的秘密就都暴露到你的眼前了,這可是個不可原諒的安全問題。實際上,瀏覽器想實現檔案批量上傳,技術上沒有難度,但這款瀏覽器肯定沒有市場,沒人敢用它。ActiveX很容易能實現這個功能,這也是ActiveX的安全性廣受詬病的一個原因。忘掉檔案批量上傳吧,Web程式只能選擇一個檔案,上傳一個。要想同時上傳n個檔案,就要在頁面上放置n個FileUpload。

相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。