[.ashx檔?泛型處理常式?]基礎入門#2....FileUpload上傳前,預覽圖片(兩種作法--ashx與JavaScript)

摘要:[.ashx檔?泛型處理常式?]基礎入門#2....FileUpload上傳前,預覽圖片
(兩種作法--ashx與JavaScript)




 

 

 

有了上一篇文章的觀念,也見識過 .ashx檔案的格式

[.ashx檔?泛型處理常式?]基礎入門#1....能否用中文教會我?別說火星文?

 

我們將介紹另一位 DotBlogs的網友,Y2J前輩的大作:

[ASP.NET] 在頁面上顯示上傳的圖片

http://www.dotblogs.com.tw/aquarius6913/archive/2013/04/26/102317.aspx?fid=56777

 

這個範例裡面, Y2J網友先把「圖片預覽」的程式碼,寫在網頁的後置程式碼(稱為:方法一

然後把這段程式 "抽離"出來,寫到 .ashx檔裡面(稱為:方法二

 

兩種作法任選其一,便能做出 FileUpload控制項,在檔案上傳以前,先進行圖片預覽

 

因為Y2J前輩使用 Session來傳遞,所以 .ashx程式裡面會多出兩段程式,務必動手自己加入喔!

(點選下面圖片,會連結到 Y2J前輩的文章。  完整程式碼也有公開)

 

另外,我也找到這些相關文章,希望對大家有幫助。

也可以搭配書本「上集」  Ch,18  FileUpload這一章一起學習

 

 

==== 實作給您看 =======================================

範例來源  http://www.cnblogs.com/travelcai/archive/2007/09/25/904767.html  

 

首先,在畫面上,使用一個ASP.NET的 Image控制項

      

 

接下來,後置程式碼很簡單,一句話完工!(這樣的程式碼,不需要附上VB版吧?)

    protected void Page_Load(object sender, EventArgs e)
    {
        Image1.ImageUrl = "test_01.ashx";
    }

 

當然,重點就是 .ashx檔,由他來把圖片展示出來(程式碼都在 .ashx裡面了)

完整程式碼,可以在此下載  http://www.cnblogs.com/travelcai/archive/2007/09/25/904767.html

    (點選下圖,也可以超連結過去......這篇文章的教學非常淺顯!大推~)

      

2013/11/30補充:使用 VS 2013的話,上面的範例會出現錯誤(請用Chrome瀏覽器才能發現)

                      點選檔案之後,按下按鈕。會一直出現「未點選檔案」因而無法看見成果。

 

範例下載:Book_1_Ch18_ASHX.rar

 

 

 

 

這篇文章也很讚!

 

 

 

 

最後補上 JavaScript的語法(上傳前,圖片預覽)

 

因為瀏覽器版本推陳出新,對安全的要求也日趨嚴格

十年前我用的語法已經失效了,下面提供一份(我測試過)正常可用的版本

      上傳之前,先用 JavaScript預覽圖片
 
      只有 Chrome / FireFox / IE 10(標準模式)有效
 
 
 
 
另一種 JavaScript的圖片預覽(源自  微軟認證教材)
 

    請選取圖片檔(二進位):<input type="file" id="theBinaryFile" onchange="onLoadBinaryFile()" />

    <br /><br />

    圖片預覽:<img id="theImage" />

    <script type="text/javascript">
        function onLoadBinaryFile() {
            var theFile = document.getElementById("theBinaryFile");

            // 確定選取了一個二進位檔案,而非其他格式。
            if (theFile.files.length != 0 && theFile.files[0].type.match(/image.*/)) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    var theImg = document.getElementById("theImage");
                    theImg.src = e.target.result;
                };
                reader.onerror = function (e) {
                    alert("例外狀況,無法讀取二進位檔");
                };

                // 讀取二進位檔案。
                reader.readAsDataURL(theFile.files[0]);
            }
            else {
                alert("請選取一個二進位檔");
            }
        }
    </script>

 

 
 
 
 
 
 
 
本系列的 .ashx 教學文章,請看 第三篇:
 
 
 
 
 
 
 

我將思想傳授他人, 他人之所得,亦無損於我之所有;

猶如一人以我的燭火點燭,光亮與他同在,我卻不因此身處黑暗。----Thomas Jefferson

寫信給我--  mis2000lab (at) yahoo.com.台灣  或是  school (at) mis2000lab.net

................   facebook社團   https://www.facebook.com/mis2000lab   ......................

................   Google+   https://plus.google.com/100202398389206570368/posts ........

................  YouTube (ASP.NET) 線上教學影片  http://goo.gl/rGLocQ

*********************************************************************************************

*** 第一天 的 ASP.NET MVC線上課程 免費看(5.5小時)*** 

************************************************************(歡迎索取,免費申請)*****

 

ASP.NET遠距教學、線上課程(Web Form + MVC)第二門 課程「四折」-- 以MVC課程作為優惠。

第一天完整課程,提供 "完整" 試聽。  如不滿意 全額退費!

 

 

Blog文章 "附的範例" 無法下載,請看 這裡 ...... https://dotblogs.com.tw/mis2000lab/2016/03/14/2008_2015_mis2000lab_sample_download

請看我們的「售後服務」範圍(嚴格認定)

......................................................................................................................................................

...................................................................................................................................................... 

[遠距教學、教學影片] ASP.NET (Web Form) 課程 上線了!MIS2000Lab.主講

事先錄製好的影片,並非上課時側錄!   觀看影片時,有如我「一對一」跟您面對面講課

 

    MIS2000 Lab.  線上教學影片(YouTube) **免費觀賞**