ps：我數據庫使用的pgsql，看我的修改。javascript
代碼asp.net 的，使用了mootools框架,裏面包含了bootstrap上傳圖片，查看預覽，還加了個上傳任意文件的FileUpload。（界面隨便弄的）css
沒有mootools的，本身去下html
下載那裏貌似有點小問題，若有啥問題，歡迎留言~~java
前臺代碼部分：jquery
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="file_up.aspx.cs" Inherits="file_up" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="stylesheet" href="css/BootstrapCSS/bootstrap.css"/> <link rel="stylesheet" type="text/css" href="/css/ShouYe/style.css" /> <script type="text/javascript" src="js/jquery.3.2.1.js"></script> <script src="js/BootstrapJS/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> <script src="map7api/mootools-core-1.4.1-full-compat.js" type="text/javascript" charset="utf-8"></script> <script src="js/BootstrapJS/fileinputJS/fileinput.js"></script> <link rel="stylesheet" href="css/BootstrapCSS/fileinputCSS/fileinput.min.css" /> <script src="js/BootstrapJS/bootstrap3-dialog/bootstrap-dialog.js"></script> <link rel="stylesheet" href="css/BootstrapCSS/bootstrap3-dialogCss/bootstrap-dialog.css" /> <link rel="stylesheet" href="js/js_image/jquery.mmenu.all.css" /> <link rel="stylesheet" href="js/js_image/slick.css" /> <link rel="stylesheet" href="js/js_image/reset.css" /> <link href="js/js_image/viewer.css" rel="stylesheet" /> <script src="js/js_image/viewer.js" type="text/javascript" charset="utf-8"></script> <script src="js/js_image/main.js" type="text/javascript" charset="utf-8"></script> <title>文件上傳</title> <style> .nav_left li{ list-style-type:none; } .div_property{ margin: 10px 0px; } #div_page{ margin:0 auto; text-align:center; width:200px; } #div_page li { list-style:none; /* 將默認的列表符號去掉 */ float:left; /* 往左浮動 */ margin:10px 10px; padding:2px 5px; background-color:#f8f8f8; border:1px solid #e8e8e8; } #div_page .active{ padding:2px 5px; background-color:#4c9ed9; border:1px solid #e8e8e8; } #div_page .active a{ color:#fff; } #div_btn { /*float:right;*/ display:none; position:fixed;right:0px;top:200px; } #div_btn img{ width:30px; } </style> </head> <body> <form id="form1" runat="server"> <div style="height:200px; width:1000px; margin:0 auto; text-align:center;"> <div style=" margin-top:50px;"> <p style="font-size:24px">上傳圖片</p></br> <input class="btn btn-success" type="button" data-toggle="modal" data-target="#myModal" data-id='1' value="添加" /> <input class="btn btn-success" type="button" data-toggle="modal" data-target="#myModal" data-id='2' value="修改" /> <input class="btn btn-success" type="button" value="刪除" onclick="del();" /> </div> </div> <hr /> <div style="margin-top:20px; margin:0 auto;" > <p style="font-size:24px;text-align:center;">上傳文件</p></br> <div style="margin-left:420px;"> <asp:FileUpload ID="FileUpload1" runat="server" /> <asp:Button ID="Button1" runat="server" Text="上傳" OnClick="Button1_Click" /> <asp:Button ID="Button2" runat="server" Text="下載" OnClick="Button2_Click" /><br /> <!-- <asp:ListBox ID="lb_FileList" runat="server" AutoPostBack="True" Width="300px" Height="300px" OnSelectedIndexChanged="lb_FileList_SelectedIndexChanged"> <asp:ListItem Value="文件列表："></asp:ListItem> </asp:ListBox> <br />--> <asp:GridView ID="GridView1" runat="server" Width="700px" AutoGenerateColumns="False" CellPadding="4" ForeColor="#333333" GridLines="None"> <AlternatingRowStyle BackColor="White" /> <Columns> <asp:BoundField DataField="fileid" HeaderText="fileid" /> <asp:BoundField DataField="filename" HeaderText="文件名稱" /> <asp:BoundField DataField="filelength" HeaderText="文件大小" /> <asp:BoundField DataField="filetype" HeaderText="文件類型" /> <asp:TemplateField HeaderText="資源下載" > <ItemTemplate> <asp:LinkButton ID="lbtnDown" runat="server" OnCommand="lbtnDown_Click" CommandArgument='<%#Eval("filepath").ToString() %>'>下 載</asp:LinkButton> </ItemTemplate> </asp:TemplateField> </Columns> <EditRowStyle BackColor="#2461BF" /> <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" /> <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" /> <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" /> <RowStyle BackColor="#EFF3FB" /> <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" /> <SortedAscendingCellStyle BackColor="#F5F7FB" /> <SortedAscendingHeaderStyle BackColor="#6D95E1" /> <SortedDescendingCellStyle BackColor="#E9EBEF" /> <SortedDescendingHeaderStyle BackColor="#4870BE" /> </asp:GridView></br> <asp:Label ID="Label1" runat="server" Text=""></asp:Label> <asp:Label ID="lab_FileDescription" runat="server" Text=""></asp:Label> </div> </div> </form> <div id="div_moreInfo"> <ul class="honor_ul clearfix" id="ul_proList" style="list-style:none;"> </ul> </div> <div id="div_page"></div> <div> <input id="input_page" style="width:25px;margin-left:50px;"/> <a href="javascript:#" onclick="changePage(limit, limitPage, document.getElementById('input_page').value, total);" >跳轉</a> </div> <!-- 模態框（Modal） --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> ×</button> <h4 class="modal-title" id="myModalLabel"> 添加 </h4> </div> <div class="modal-body div_property"> <input id="f_upload" name="input2" type="file" class="file" multiple data-show-upload="false" data-show-caption="true" data-show-preview="true" data-allowed-file-extensions='["jpg","png"]'> <div class="input-group div_property"> <span class="input-group-addon">名稱</span> <input id="input_name" type="text" class="form-control" placeholder="twitterhandle"> </div> <div class="form-group div_property"> <label for="name">描述</label> <textarea id="textarea_description" class="form-control" rows="5"></textarea> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal"> 關閉 </button> <button type="button" class="btn btn-primary" onclick="submit();"> 提交 </button> </div> </div><!-- /.modal-content --> </div><!-- /.modal --> </div> </body> </html>
運行界面：sql
後臺代碼部分：數據庫
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using Npgsql; using System.Data; using System.IO; using FrameWork; using System.Configuration; public partial class file_up : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if(!IsPostBack){ init(); } } protected void Button1_Click(object sender, EventArgs e) { if(FileUpload1.PostedFile.FileName==string.Empty){ Response.Write("<script>alert('請選擇要上傳的文件！');</script>"); } else { //獲取要上傳的文件的信息 //獲取要上傳的文件的信息 string filepath = FileUpload1.PostedFile.FileName;//文件路徑 string oldfilename = filepath.Substring(filepath.LastIndexOf("/") + 1);//文件名 string FileExtension = Path.GetExtension(oldfilename); //文件的擴展名 int filelength = (int)oldfilename.Length;//文件名長度 //隨機生成文件名 Random Rnd = new Random(); int strRnd = Rnd.Next(1, 99); string newfilename = DateTime.Now.Year.ToString() + DateTime.Now.Month.ToString() + DateTime.Now.Day.ToString() + DateTime.Now.Hour.ToString() + DateTime.Now.Minute.ToString() + DateTime.Now.Second.ToString() + strRnd.ToString() + FileExtension.ToLower(); //將文件上傳到以當前日期命名的文件夾中 string UpLoadName = DateTime.Now.Year.ToString() + "-" + DateTime.Now.Month.ToString() + "-" + DateTime.Now.Day.ToString(); bool FileUploadPathExists = File.Exists(Server.MapPath("UpLoad" + "/" + UpLoadName)); //指定文件夾不存在，若是不存在就建立該文件夾 if (!FileUploadPathExists) { Directory.CreateDirectory(Server.MapPath("UpLoad" + "/" + UpLoadName)); } //保存上傳的文件 string savapath = Server.MapPath("UpLoad" + "/" + UpLoadName);//保存路徑 string savapath1 = "UpLoad" + "/" + UpLoadName + "/" + newfilename;//保存路徑 FileUpload1.PostedFile.SaveAs(savapath + "/" + newfilename); //鏈接數據庫字符串 string connectionString1 = "Server=localhost; Port=5432;Database=city;User ID=postgres;Password=postgres"; NpgsqlConnection conn = new NpgsqlConnection(connectionString1); conn.Open(); //conn.Close(); string sql = "insert into u_file(FileName,FileLength,FileType,FilePath) values('" + newfilename + "','" + filelength + "','" + FileExtension + "','" + savapath1 + "')"; //conn.Open(); NpgsqlCommand cmd = new NpgsqlCommand(sql, conn); try { //int count = Convert.ToInt32(cmd.ExecuteScalar()); // string.Format Response.Write("<script>alert('鏈接成功')</script>"); cmd.ExecuteNonQuery(); //刷新頁面 Response.AddHeader("Refresh", "0"); //顯示信息 //NpgsqlDataAdapter da = new NpgsqlDataAdapter(sql,connectionString1); //System.Text.StringBuilder strMsg = new System.Text.StringBuilder(); //strMsg.Append("<font color=green>文件被成功添加到數據庫中，詳細信息以下所示：<br>"); //strMsg.Append("上傳的文件的類型爲：" + this.FileUpload1.PostedFile.ContentType.ToString() + "<br>"); //strMsg.Append("客戶端文件的地址爲：" + filepath + "<br>"); //strMsg.Append("上傳文件的文件名爲：" + newfilename + "<br>"); //strMsg.Append("文件上傳到服務器的路徑爲：" + savapath + "<br>"); //strMsg.Append("上傳文件的擴展名爲：" + FileExtension + "<br>"); //strMsg.Append("上傳文件的大小爲：" + FileUpload1.PostedFile.ContentLength + "個字節</font>"); //this.Label1.Text = strMsg.ToString(); } catch (Exception error) { Response.Write(error.ToString()); } finally { conn.Close(); } } } private void init() { //鏈接數據庫字符串 string connectionString1 = "Server=localhost; Port=5432;Database=city;User ID=postgres;Password=postgres"; NpgsqlConnection conn = new NpgsqlConnection(connectionString1); conn.Open(); //conn.Close(); string sql = "select fileid,filename,filelength,filetype,filepath from u_file"; //conn.Open(); NpgsqlCommand cmd = new NpgsqlCommand(sql, conn); NpgsqlDataAdapter da = new NpgsqlDataAdapter(cmd); DataSet ds = new DataSet(); da.Fill(ds,"table"); this.GridView1.DataSource = ds; this.GridView1.DataBind(); //NpgsqlDataReader dr = cmd.ExecuteReader(); /* while(dr.Read()){ this.lb_FileList.Items.Add(new ListItem(dr.GetString(1), dr.GetInt32(0).ToString())); }*/ //dr.Close(); conn.Close(); } //下載 protected void lbtnDown_Click(Object sender, CommandEventArgs e){ // 定義文件路徑 string url = ""; // 定義文件名 string fileName = ""; // 獲取文件在服務器的地址 url = e.CommandArgument.ToString(); //Response.Write(e.CommandArgument.ToString()); // 取得地址中的文件名 // 判斷傳輸地址是否爲空 if (url == "") { // 提示「該文件暫不提供下載」 // Page.ClientScript.RegisterStartupScript(Page.GetType(), "message", "<script defer>alert('該文件暫不提供下載！');</script>"); Response.Write("<script>alert('該文件暫不提供下載！')</script>"); return; } // 判斷獲取的是否爲地址，而非文件名 if (url.IndexOf("/") > -1) { // 獲取文件名 fileName = url.Substring(url.LastIndexOf("/") + 1);//獲取文件名 } else { // url爲文件名時，直接獲取文件名 fileName = url; } // 流方式下載文件 try { // 定義服務器路徑 string urlServer = Server.MapPath(url); // 以字符流的方式下載文件 FileStream fileStream = new FileStream(urlServer, FileMode.Open); byte[] bytes = new byte[(int)fileStream.Length]; fileStream.Read(bytes, 0, bytes.Length); fileStream.Close(); Response.ContentType = "application/octet-stream"; // 通知瀏覽器下載而不是打開 Response.AddHeader("Content-Disposition", "attachment; filename=" + HttpUtility.UrlEncode(fileName, System.Text.Encoding.UTF8)); Response.BinaryWrite(bytes); Response.Flush(); Response.End(); } catch (Exception) { } } protected void lb_FileList_SelectedIndexChanged(object sender, EventArgs e) { //從config中讀取文件上傳路徑 //string strFileUploadPath = ConfigurationManager.AppSettings["FileUploadPath"].ToString(); //從列表框控件中讀取選擇的文件名 //string strFileName = lb_FileList.SelectedValue; //組合成物理路徑 //string strFilePhysicalPath = Server.MapPath(strFileUploadPath + strFileName); //根據物理路徑實例化文件信息類 //FileInfo fi = new FileInfo(strFilePhysicalPath); //得到文件大小和建立時間並賦值給標籤 //lab_FileDescription.Text = string.Format("文件大小：{0} 字節<br><br>上傳時間：{1}<br>", fi.Length, fi.CreationTime); //把文件名賦值給重命名文本框 //tb_FileNewName.Text = strFileName; } protected void Button2_Click(object sender, EventArgs e) { Response.Write("<script>alert('點個錘子！')</script>"); } }
下載界面：bootstrap
關於api
作得很差，但願有用。瀏覽器