fileupload 上传图片之前预览

最新推荐文章于 2019-02-16 20:40:35 发布
最新推荐文章于 2019-02-16 20:40:35 发布
阅读量105 收藏
点赞数
文章标签： xhtml c# javascript ViewUI

这个功能很好实现，代码如下：

<%@ Page Language="C#" CodeFile="Default7.aspx.cs" Inherits="Default7" %>

<!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>
      <script type="text/javascript">
        function showPreview() {
            var fileName = document.getElementById('<%=FupImg.ClientID%>').value;
            if (fileName != "") {
                document.getElementById('<%=imgPreview.ClientID%>').src = fileName;
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
     <div>
        <img id="imgPreview" runat="server" width="230" height="80" src="7.gif" alt="" style="width: 70px; border:1px solid red" />&nbsp;&nbsp;&nbsp;&nbsp;
        <asp:FileUpload ID="FupImg" runat="server" Width="300" οnchange="showPreview()" />
  
    </div>
    </form>
</body>
</html>

但是只能在IE6上使用，其他的需要设置一下才可以

如果还是不行，就把站点加到可信任站点中，如图

然后再相应的改一下代码就ok了

weixin_34293059
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
FileUpload 上传文件 详细参数设置 前后台代码
qq_39493425的博客
04-13 9147
html代码： &lt;div id="fileQueue"&gt;&lt;/div&gt; &lt;--进度展示--&gt; &lt;div id="uploadify" class="attch-img-btn"&gt; &lt;/div&gt;&lt;--上传按钮--&gt;
asp.net vs2012 fileupload 图片上传前预览
09-21
在本篇中，我们将深入探讨如何在VS2012中实现ASP.NET FileUpload控件的图片上传前预览功能。 首先，我们需要在Web页面上添加一个FileUpload控件和一个Image控件。FileUpload控件用于让用户选择文件，Image控件则...
FileUpload选择图片并上传
qhzhen的博客
09-23 6183
在上传按钮的事件里： //文件上传         protected void btn_Click(object sender, EventArgs e)         {               if (FileUpload1.HasFile)//判断是否存在文件             {                 string FilePath = Server....
ajaxFileUpload实现图片的上传并预览
qq_31858333的博客
03-09 1060
先来个最简单的  单图上传并预览 html: 引入js文件 头像 一个显示图片的标签，一个是文件上传的input标签（设置隐藏） js: $("#head").click(function(){ $("#img").click(); }); //异步上传头像并预览 function u
FileUpload 简单上传+小预览
weixin_30454481的博客
10-16 97
页面代码 : <form id="form1" runat="server"> <div> <asp:FileUpload ID="FileUpload1" runat="server" /> <asp:Button ID="Button1" runat="server" Text="上传" ...
javascript上传图片前预览图片兼容大多数浏览器
10-26
在JavaScript中实现上传图片前的预览功能是一项常见的需求，特别是在网页表单中，用户在上传图片之前能够看到即将上传的图片效果。这个功能通过利用HTML5的File API以及对不同浏览器的兼容性处理来实现。以下是一个...
Asp.net FileUpload控件 预览
02-22
下面将详细讨论如何使用Asp.net FileUpload控件实现不上传图片的预览功能。 首先，我们需要在ASP.NET页面上添加FileUpload控件。在.aspx文件中，可以这样声明： ```html <asp:FileUpload ID="FileUpload1" runat=...
uploadify图片上传预览删除
10-26
预览功能允许用户在正式上传之前查看选定的图片，确保图片质量符合预期，避免因上传错误图片而造成的不便。通常，Uploadify会利用HTML5的File API来读取并显示图片内容，对于不支持HTML5的浏览器，它可能依赖Flash...
多图片上传预览控件
10-24
这个组件允许用户选择并预览多张图片，提升用户体验，确保他们在上传之前能够查看和确认图片的质量和效果。本篇文章将深入探讨“多图片上传预览控件”的实现原理、相关技术以及具体应用。 首先，我们要了解的是`...
asp.net 使用FileUpload控件上传并显示图片
热门推荐
分享经验，共同进步.
08-25 1万+
在项目中经常会遇到上传图片，在点击保存按钮向数据库提交数据之前，让图片显示在Image控件中，方法如下：
使用 jquery-file-upload 插件实现图片上传功能
@必意玲
02-16 8732
获取了文件框的元素 调用fileupload函数即可 只要引入了插件 jquery对象上都会有这个函数就可以调用。这里我用的 files.pic1 接收，所以客户端必须根据 pic1 传参数到服务端。jQuery File Upload 需要引入的包。
使用FileUpload控件上传前预览图片
weixin_33972649的博客
10-12 230
&lt;table class="blue_table" cellpadding="0" cellspacing="0" border="0"&gt;            &lt;tr&gt;                &lt;th colspan="2"&gt;添加商品图片&lt;/th&gt;            &lt;/t
Web_文件的上传-FileUpload
tiantaiaiqing的专栏
09-23 593
一.Tip：上传文件的处理细节 1.中文文件乱码问题 文件名中文乱码问题，可调用ServletUpLoader的setHeaderEncoding方法，或者设置request的setCharacterEncoding属性 普通字段的乱码：   1.手工转换   2.FileItem.getString("UTF-8");获得名称的时候传一个字符集  上传文件的乱码： Ser
Asp.Net FileUpload选择图片后预览，并直接上传
满嘴地瓜腔的博客
05-22 7214
FileUpload选择图片后先预览图片，然后上传。 使用到FileUpload的onchange事件，及使用一般处理程序(.ashx)来预览图片。 function uploadFile(filePath) { if (filePath.length > 0) { __doPostBack('
使用FileUpload组件上传文件
墨宝历程
03-31 478
文件上传在web应用中非常普遍，要在jsp环境中实现文件上传功能是非常容易的，因为网上有许多用java开发的文件上传组件，本文以commons-fileupload组件为例，为jsp应用添加文件上传功能。 common-fileupload组件是apache的一个开源项目之一，可以从http://jakarta.apache.org/commons/fileupload/下载。用该组件可实现一次上...
WEB-上传文件
一纸淡然
11-29 591
实现web开发中的文件上传功能，需完成如下二步操作： •在web页面中添加上传输入项 •在servlet中读取上传文件的数据，并保存到本地硬盘中。 l如何在web页面中添加上传输入项? •标签用于在web页面中添加文件上传输入项，设置文件上传输入项时须注意： •1、必须要设置input输入项的name属性，否则浏览器将不会发送上传文件的数据。 •２、必须把form的enctype属值设
使用ajaxfileupload实现文件上传，使用FileReader实现预览效果（图片）
yangwen123222的博客
04-09 1999
ajaxfileupload 文件上传 FileReader 图片预览
Common-fileupload上传图片到数据库
最新发布
04-04
以下是一种常用的方法，使用Commons FileUpload库将图片上传到数据库： 1. 在HTML表单中添加文件上传字段。 ```html ``` 2. 在服务器端，使用Commons FileUpload库解析上传文件。 ```java // 创建一个文件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值