[.ashx檔？泛型处理例程？]基础入门#2....FileUpload上传前，预览图片（两种作法--ashx与JavaScript）

原文出處  http://www.dotblogs.com.tw/mis2000lab/archive/2013/08/20/ashx_beginner_02_fileupload_picture_preview.aspx

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

    （点选下图，也可以超级链接过去......这篇文章的教学非常浅显！大推~）

      

 

最后补上JavaScript的语法（上传前，图片预览）

 

因为浏览器版本推陈出新，对安全的要求也日趋严格

十年前我用的语法已经失效了，下面提供一份（我测试过）正常可用的版本

      上传之前，先用 JavaScript预览图片

 

      只有 Chrome / FireFox / IE 10（标准模式）有效

 

      资料来源：http://wangyong31893189.iteye.com/blog/1695472

 

 

  

 

 

本系列的 .ashx 教学文章，请看 第三篇：

[.ashx檔？泛型处理例程？]基础入门#3....ADO.NET 与 将DB里面的二进制图片还原