asp.net上傳圖片，儲存檔名和路徑，並利用javascript顯示圖片預覽

阿新 • • 發佈：2019-01-15

<script type="text/javascript">
         function show(id)
        {
             document.getElementById("Image1").src=id;
        }
    </script>

下面程式碼用於顯示縮圖的地方：

</div>
   <div id="divview" WIDTH: 166px; HEIGHT: 190px">
   </div>

下面顯示縮圖的js程式碼

  <script type="text/javascript">

        function show1(upimg)
        {
             var dd=document.getElementById("divview");
            dd.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = upimg;
            dd.style.width = 166;
            dd.style.height = 190;
            dd.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = 'scale';
        }
       </script>

完整的aspx檔案

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="檔案上傳.aspx.cs" Inherits="檔案上傳" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
     <asp:FileUpload ID="FileUpload1" runat="server" onpropertychange="show1(this.value)" />
    <asp:Button ID="Button1" runat="server" onclick="Button1_Click"  OnClientClick="checkType()" Text="上傳" />
     <script type="text/javascript">
         function show(id)
        {
             document.getElementById("Image1").src=id;
        }
    </script>
    <script type="text/javascript">

        function show1(upimg)
        {
             var dd=document.getElementById("divview");
            dd.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = upimg;
            dd.style.width = 166;
            dd.style.height = 190;
            dd.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = 'scale';
        }
       </script>
     <script type="text/javascript" language="javascript">
         function checkType() {

             //得到上傳檔案的值   
             var fileName = document.getElementById("FileUpLoad1").value;

             //返回String物件中子字串最後出現的位置.   
             var seat = fileName.lastIndexOf(".");

             //返回位於String物件中指定位置的子字串並轉換為小寫.   
             var extension = fileName.substring(seat).toLowerCase();

             //判斷允許上傳的檔案格式   
             //if(extension!=".jpg"&&extension!=".jpeg"&&extension!=".gif"&&extension!=".png"&&extension!=".bmp"){   
             //alert("不支援"+extension+"檔案的上傳!");   
             //return false;   
             //}else{   
             //return true;   
             //}   

             var allowed = [".jpg", ".gif", ".png", ".bmp", ".jpeg"];
             for (var i = 0; i < allowed.length; i++) {
                 if (!(allowed[i] != extension)) {
                     return true;
                 }
             }
             alert("不支援" + extension + "格式");
             return false;
         }  
     </script>
    </div>
   <div>
    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
   </div>
   <div>
   <asp:Image ID="Image1" runat="server" />
   </div>
   <div id="divview" WIDTH: 166px; HEIGHT: 190px">
   </div>
    </form>
</body>
</html>

完整的ASPX.CS檔案

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
public partial class 檔案上傳 : System.Web.UI.Page
{
    SqlConnection con;
    protected void Page_Load(object sender, EventArgs e)
    {
       
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        string constr = ConfigurationManager.ConnectionStrings["SqlConnection"].ConnectionString;
        con = new SqlConnection(constr);
        
        if (this.FileUpload1.HasFile)
        {
//              
//           string strName = FileUpload1.PostedFile.FileName; //使用FileUpload控制元件獲取上傳檔案的檔名，FileUpload1為控制元件的ID
//           if (strName != "") //如果檔名存在
//          {         
//                int i = strName.LastIndexOf(".");//獲取“.“的索引順序號
//                string ext = strName.Substring(i);//獲取副檔名
//                string newName = Guid.NewGuid().ToString();//生成新的檔名，保證唯一性
//                string relativePath = "admin\\images";//設定檔案相對網站根目錄的儲存路徑
//                string absolutePath = Server.MapPath("~\\admin\\images");  //得到檔案儲存絕對路徑 
                  //if (!Directory.Exists(absolutePath))//如果images不存在，就建立
                  //{
                  //     Directory.CreateDirectory(absolutePath);//建立檔案images
                  //}
                  //    string newFileName = absolutePath + "\\" + newName + ext;//得到帶新檔名的完整物理路徑
                  //   fileUpload.PostedFile.SaveAs(newFileName);//圖片儲存到伺服器
                  //   txtImageUrl.Text = relativePath + "\\" + newName + ext;//包含相對路徑的圖片名
    
//           }
            //判斷檔案是否小於10Mb
            if (this.FileUpload1.PostedFile.ContentLength < 10485760)
            {
                try
                {
                    //上傳檔案並指定上傳目錄的路徑   
                    this.FileUpload1.PostedFile.SaveAs(Server.MapPath("~/Img/")
                        + this.FileUpload1.FileName);
                    /*注意->這裡為什麼不是:FileUpLoad1.PostedFile.FileName  
                    * 而是:FileUpLoad1.FileName?  
                    * 前者是獲得客戶端完整限定(客戶端完整路徑)名稱  
                    * 後者FileUpLoad1.FileName只獲得檔名.  
                    */

                    //當然上傳語句也可以這樣寫(貌似廢話):   
                    //FileUpLoad1.SaveAs(@"D:\"+FileUpLoad1.FileName);   
                    
                     this.Label1.Text = "上傳成功!";
                     string sql = string.Format("insert into Img(ImgUrl,ImgSize,ImgName) values('{0}','{1}','{2}')", Server.MapPath("~/Img/") + this.FileUpload1.FileName, this.FileUpload1.PostedFile.ContentLength, this.FileUpload1.FileName);
                     SqlCommand cmd = con.CreateCommand();
                     cmd.CommandText = sql;
                     con.Open();
                     SqlTransaction tran = con.BeginTransaction();
                     cmd.Transaction = tran;
                     int i=0;
                     try
                     {
                        i= cmd.ExecuteNonQuery();
                         tran.Commit();
                     }
                     catch(Exception ex)
                     {
                         tran.Rollback();
                     }
                     finally
                     {
                         con.Close();
                     }
                     if (i == 1)
                     {
                         this.Response.Write("<Script Language='JavaScript'>window.alert('上傳團片" + i.ToString() + "張')</script>");
                     }
                }
                catch (Exception ex)
                {
                    this.Label1.Text = "出現異常,無法上傳!";
                    //lblMessage.Text += ex.Message;   
                }

            }
            else
            {
                this.Label1.Text = "上傳檔案不能大於10MB!";
            }
        }
        else
        {
            this.Label1.Text = "尚未選擇檔案!";
        }  
    }
}

asp.net上傳圖片，儲存檔名和路徑，並利用javascript顯示圖片預覽

Asp.net 上傳圖片，儲存路徑到資料庫

本方法相對獨立，直接放到頁面中，呼叫即可，返回上傳後圖片的路徑，圖片名稱已經修改為純數字+字尾名 /// <summary> /// 上傳檔案，返回儲存的路徑/檔名 /// </summary> /// <

asp.net上傳圖片並能實現實時預覽

前臺aspx： <script type="text/javascript"> //下面用於圖片上傳預覽功能 function setImagePreview(avalue) { document.getE

ASP.NET上傳檔案到遠端伺服器（HttpWebRequest）

/// <summary> /// 檔案上傳至遠端伺服器 /// </summary> /// <param name="url">遠端服務地址</param> /// <param name="pos

ASP.NET上傳大檔案404報錯

報錯資訊： Failed to load resource: the server responded with a status of 404 (Not Found) 嘗試1：僅修改Web.config中system.web的值 <system.web&

ASP net 上傳整個資料夾

HTML部分 <%@ Page language="c#" Codebehind="UpLoad.aspx.cs" AutoEventWireup="false" Inherits="WebPortal.Upload" %> <!DOCTYP

設定webconfig解決ASP.NET上傳檔案大小限制

使用webconfig的設定解決大小限制對於asp.net,預設只允許上傳4M檔案,增加如下配置,一般可以自定義最大檔案大小. <httpRuntime executionTimeout="800" maxRequestLength="40960" useFul

C# ASP.NET上傳控制元件fileupload的使用

程式碼實現了簡單的圖片上傳功能（改一下也可以上傳其他的），沒有做圖片大小和格式的判斷，主要是熟悉fileupload控制元件介面程式碼： <%@ Page Language="C#" Aut

超級吐血的鬱悶問題 asp.net 上傳限制

最近做了個寶馬專案，碰到一個上傳檔案的大小問題，用的是ckedit和ckfinder上傳，這個編輯器確實功能強悍。但是上傳檔案大小始終為4兆，不管怎麼除錯編輯器，都是這樣。後來原來是asp .net 本身的限制問題，吐血外加鬱悶。一天多時間全在除錯編輯器。希望後來者警戒。在<

ASP.NET上傳時間超過4M失敗（超時）的解決方法

在web.config中的<system.web></system.web>內加入如下程式碼：<httpRuntime executionTimeout="600" ma

解決ASP.Net上傳大檔案超時或錯誤的問題

　　.Net 裡上傳大檔案時，會遇到超時或HTTP500錯誤，解決的辦法有兩種：一種是修改配置，另一種就是用第三方控制元件。這裡介紹一下修改配置的。需要修改的是在 C:/WINDOWS/Microsoft.NET/Framework/v1.1.4322/CONFIG目錄裡，

ASP.NET上傳控制元件——FileUpload控制元件和File控制元件

FileUpload控制元件<?XML:NAMESPACE PREFIX = O /> FileUpload Control 應用程式中經常需要允許使用者把檔案上傳到web伺服器。儘管在ASP.NET 1.X也可以完成該功能，但在ASP.NET 2.0中使用Fil

ASP.NET 上傳檔案最大值調整

首先，最容易找到的是web.config下面配置：  <httpRuntime targetFramework="4.5.2" maxRequestLength="51200"/> 這麼設定會將請求的

ASP.NET——上傳檔案超過了最大請求長度

IIS預設最大的URL長度為：4kb；當我們上傳附件時，URL請求被IIS過濾，發現大於4M就拒絕請求，所以導致我們大於4kb無法上傳並丟擲錯誤。解決方法一：在IIS裡面，開啟我們站點——請求篩選

asp.net 上傳大檔案解決方案

這次在專案中，用到了大檔案上傳，要上傳的檔案有100多m，於是研究現在國內使用的大檔案上傳的元件發現用的比較多的有兩個控制元件AspnetUpload 2.0和Lion.Web.UpLoadModule，另外還有思歸在它的部落格堂中所說的辦法 http://blog.joyc

c#,Asp.net,dtcms上傳大檔案失敗,錯誤程式碼:http，Http error 404 解決方案

第一步：修改系統上傳配置：控制面板》系統設定》檔案上傳設定第二步：修改web.config

Android中相機拍攝照片，以及相簿選擇圖片壓縮上傳(壓縮後儲存進SD中)(可用於修改頭像等)

這個功能借鑑了多個大神的，然後整合起來。 Android中相機拍攝照片，以及相簿選擇圖片壓縮上傳(壓縮後儲存進SD中)(可用於修改頭像等) 第一步： privat

ASP.NET_上傳圖片,並把圖片路徑儲存到資料庫中

//html頁面程式碼<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %><!DOCTYPE html><

在ThinkPHP5框架下引入Ueditor並實現向七牛雲物件儲存上傳圖片同時將圖片資訊儲存到MySQL資料庫，同時實現lazyload懶載入

這是我花了很多天的時間才得以真正實現的一組需求。文章後面有完整Demo的GitHub連結。一、需求描述 1. 應用是基於ThinkPHP5開發的； 2. 伺服器環境是LNMP，PHP版本是7.2，資料庫是MySQL5.6； 3. 由使用者（包括管理員）上傳的圖片一類的媒體檔案不能直接上傳到應用

vcenter 6.5上傳檔案至儲存卷：提示不信任證書，導致無法上傳

故障現象：chrome瀏覽器瀏覽器上傳鏡至vcenter 6.5 儲存卷提示：由於不確定的原因,操作失敗。通常,當瀏覽器不信任證書時會發生此問題。解決方法：（1）登入https://vcenter.com //也就是vcenter管理頁面（2）下載好CA證書解壓CA證書，即可獲得linux/win/

asp.net上傳圖片，儲存檔名和路徑，並利用javascript顯示圖片預覽

相關推薦