我在网上看到好多人问如何使用FileUpload上传之前，先预览图片，前提条件，不允许先上传到服务器上！因为大多搜索的结果实现的方法都是先上传到服务器上，然后显示，如果不确定上传，就删除，这样的风险太大，性能也消耗很大！下面的代码告诉大家我们不需要先把图片上传到服务器上就可以预览了，是不是很酷！不说了，上代码！

Code
<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Preview Image In FileUpload</title>
    <style type="text/css">
        #newPreview
        {
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
        }
    </style>
</head>
<body>

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

</script>

<form id="form2" runat="server">
    <div>
        <asp:FileUpload ID="FileUpload1" runat="server" onchange="PreviewImg(this)" />
    </div>
    <div id="newPreview">
    </div>
    <input type="file" onchange="document.getElementById('img').src=this.value" />
    <img id="img">
    </form>
</body>
</html>

转载于:https://www.cnblogs.com/OceanChen/archive/2009/01/13/1375003.html

【原】 图片预览 Image preview相关推荐

  1. VSCode图片预览插件 Image preview

    VSCode前端开发图片预览插件 Image preview(支持css预览 支持svg格式) 一款提高前端开发效率的插件 ,代码中hover直接预览图片 先上效果图 不仅html中可以预览 js代码 ...

  2. vue实现移动端图片预览

    vue实现移动端图片预览 1.安装插件 2.main引入 3.使用 注意 扩展 通过使用vue-photo-preview插件,实现移动端图片的预览,全屏等功能. 1.安装插件 npm install ...

  3. dw按钮图片滚动js_使用 React Hooks 实现仿石墨的图片预览插件（巨详细）

    点击上方"前端教程",选择"星标" 每天前端开发干货第一时间送达! 作者:DARRELL https://juejin.im/post/5e9bf299f265 ...

  4. 实现一个vue的图片预览插件

    vue-image-swipe 基于photoswipe实现的vue图片预览组件 安装 1 第一步 npm install vue-image-swipe -D 2 第二步 vue 入口文件引入 im ...

  5. js实现移动端图片预览：手势缩放， 手势拖动，双击放大...

    原文:js实现移动端图片预览:手势缩放, 手势拖动,双击放大... 前言 本文将介绍如何通过js实现移动端图片预览,包括图片的 预览模式,手势缩放,手势拖动,双击放大等基本功能: 扫码查看示例效果: ...

  6. pc 图片预览放大 端vue_安利一款简单好用的Vue图片预览插件

    在项目中因为要经常用到图片预览效果,自己写的话麻烦死啦(懒) vue-photo-preview 一个基于 photoswipe 的 vue 图片预览插件,支持移动端和PC端,支持各种手势操作,放大缩 ...

  7. h5 img js 点击图片放大_H5实现移动端图片预览：手势缩放， 手势拖动，双击放大......

    查看示例效果: 一.功能介绍 图片预览主要有以下几个功能点组成:监听图片点击事件,进入图片预览模式 自定义手势事件, (双指缩放,滑动,双击...) 监听图片手势事件,通过 transform-mat ...

  8. JS魔法堂之实战：纯前端的图片预览

    一.前言 图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了.在这之前,我曾经通过订阅input[type=file]元素的 onchange事件,一旦更改路径则将图片上传至 ...

  9. html5 双指缩放图片,js实现移动端图片预览：手势缩放， 手势拖动，双击放大......

    查看示例效果: 一.功能介绍 图片预览主要有以下几个功能点组成:监听图片点击事件,进入图片预览模式 自定义手势事件, (双指缩放,滑动,双击...) 监听图片手势事件,通过 transform-mat ...

最新文章

  1. 在SAP BW中使用ABAP
  2. 一起学nRF51xx 11 -  ficr
  3. urllib库添加headers的一般方法
  4. 吴恩达 coursera AI 专项四第一课总结+作业答案
  5. 基于LSTM的序列预测: 飞机月流量预测
  6. python读写kafka集群(转载+自己验证)
  7. QT中图表类QChart之各种缩放/平移
  8. java 手机网站 cookie操作_java操作cookie问题
  9. python绘制图像的参数_图像绘制.draw.line（）：系统错误：新样式getargs格式，但参数不是tup...
  10. JEECG Online Coding 开发操作图解
  11. 解决Git报“OpenSSL SSL_read: Connection was reset, errno 10054”错的问题
  12. 御剑后台扫描工具下载
  13. 锐浪报表，用脚本处理字段
  14. asp长度为4的随机数字写
  15. 学习信号量 sem_init、sem_destroy、sem_post、sem_wait、sem_trywait、sem_getvalue
  16. win下安装mmcv的一些报错
  17. C# 重置IE安全等级
  18. 单链表就地逆置（Java版）
  19. 本周的数据可视化学习以及个人最近总结
  20. 支付宝小程序支付（统一收单交易创建接口）

热门文章

  1. c语言数组求出最大值,求给定数组的最大值与次大值
  2. 百度在线编辑器 显示html,UEditor百度编辑器中JS/html代码（script标签）被过滤的解决办法...
  3. echarts鼠标放上去不显示值
  4. java将图片（jpg/bmp/png）转16位bmp(RBG565)
  5. Referenced file contains errors (http://www.springframework.org/schema/context/spring-context-3.1.xs
  6. java bean状态_无状态和有状态的企业Java Bean
  7. 安装windows时loading files结束就重启_软网推荐：不用制作系统盘 也能安装新系统...
  8. css怎麽将按钮变长,CSS3 按钮边线环绕渐变缩短和伸长
  9. java求梯形面积程序_Java初级应用，计算关于梯形跟圆形的面积。该程序中有3个类：Lader、Circle和主类Test。...
  10. CentOS 7.6+mysql5.7 设置mysql开机自启动。