- <%@ Page Language="C#" AutoEventWireup="true" CodeFile="PreviewImageInFileUpload.aspx.cs" Inherits="PreviewImageInFileUpload" %>
- <!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>Preview Image In FileUpload</title>
- <%--CSS--%>
- <mce:style type="text/css"><!--
- #newPreview{
- FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)
- }
- --></mce:style><style type="text/css" mce_bogus="1"> #newPreview{
- FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)
- }
- </style>
- </head>
- <body>
- <%--JavaScript--%>
- <mce:script language="javascript" type="text/javascript"><!--
- function PreviewImg(imgFile)
- {
- var newPreview = document.getElementById("newPreview");
- newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value;
- newPreview.style.width = "80px";
- newPreview.style.height = "60px";
- }
- // --></mce:script>
- <form id="form1" runat="server">
- <div>
- <%--添加 onchange事件--%>
- <asp:FileUpload ID="FileUpload1" runat="server" onchange="PreviewImg(this)" />
- </div>
- <%--建立一个div来存放预览--%>
- <div id="newPreview"></div>
- </form>
- </body>
- </html>
使用FileUpload控件上传前预览图片
最新推荐文章于 2019-06-26 10:50:00 发布