asp.netで画像をアップロードして、ファイル名とパスを保存して、javascriptを利用して画像のプレビューを表示します.

15052 ワード

FileUploadコントロール

プロパティ:FileName:アップロードされたファイル名を取得します.
HasFile:アップロードされたファイルを選択しますか?
ContentLength:ファイルのサイズを取得し、単位はバイト(byte)です.

方法:Server.MapPath():サーバ上の物理経路SaveAs():指定されたフォルダにファイルを保存する

注意:デフォルトではアップロードファイルのサイズが4 MBに制限されています.web.co nfig.com mmentsを通じて、デフォルトの設定を変更したり、web.co.nfigファイルを変更したりして、アプリケーションのアップロード制限を変更できます.

<httpRuntime maxRequestLength="10240" executionTimeout="150" enable="true"/>

要素説明:maxRequest Length:アップロードファイルのサイズを設定し、単位はkbです.

execution Timeout:要求を実行する最大秒数を許可します.この機能はComplation要素の中でDebug属性がfalseである時にのみ有効になります.

enable:現在のノードおよびサブノードレベルでアプリケーションドメインを有効化するかどうかを指定して、着信要求を受け付けます.Falseであれば、アプリケーションは実際に閉じられている.デフォルトの値はTrueです.一般的には、ユーザーがこのサイトにアクセスできるかどうか(Http要求を許可するかどうか)

注意:アップロードファイルがmaxRequest Lengthサイズを超えると、ページが表示されない場合があります.
ファイルアップロードの種類を確認します.1)クライアントチェック(Javascript実装)(コントロールでオンリークリーンを使用します. )
2)サーバ端検査

<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>

コントロールコード:

<asp:FileUpload ID="FileUpload1" runat="server" onpropertychange="show1(this.value)" />
    <asp:Button ID="Button1" runat="server" onclick="Button1_Click"  OnClientClick="checkType()" Text="  " />

アップロードボタンイベント:

 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:FileUpload ID="FileUpload1" runat="server" onpropertychange="show(this.value)"/>
        <asp:Image ID="Image1" runat="server"  />

アップロードコントロールにonpropertychange=「show(this.value)」イベントを書き込み、jsのshow関数を呼び出して自分のパラメータをjsに送る.

<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.CCファイル

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 = "      !";
        }  
    }
}

Gitエラー問題解決集合