当asp.net的FileUpload选择一个图片后不需要上传就能显示出图片的预览功能，

代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!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 selected(obj) {

                                    var str = "carpoolpic";

                                    str = str + obj.value;

                                    var imgSrc = document.getElementById(str).value;

                                    if (imgSrc == "" || imgSrc == null) {

                                        alert("此项没有图片");

                                        obj.checked = false;

                                    }

                                    changesrc(str);

                                }

                                var flag = true;

                                function changesrc(sender) {

                                    if (isFirefox = navigator.userAgent.indexOf("Firefox") > 0) {

                                        var imgSrc = document.getElementById(sender).value;

                                        var t = document.getElementById(sender);

                                        if (imgSrc == "") {

                                            flag = false;

                                            return false;

                                        }

                                        if (/(.*?)\.jpg$/.test(imgSrc.toLowerCase()) == false) {

                                            document.getElementById(sender).value = "";

                                            alert("只能选择jpg格式!");

                                            flag = false;

                                            return false;

                                        } else {

                                            var imgs = document.createElement("img");

                                            imgs.src = imgSrc;

                                            if (imgs.fileSize > 50 * 1024) {

                                                alert("图片大小不能超过 50 KB!");

                                                flag = false;

                                                return false;

                                            }

                                            flag = true;

                                        }

                                        document.getElementById("upImg").src = window.URL.createObjectURL(t.files[0]);

                                    } else {

                                        document.getElementById(sender).select();

                                        var imgSrc = document.selection.createRange().text;

                                        if (imgSrc == "") {

                                            flag = false;

                                            return false;

                                        }

                                        if (/(.*?)\.jpg$/.test(imgSrc.toLowerCase()) == false) {

                                            document.getElementById(sender).value = "";

                                            alert("只能选择jpg格式!");

                                            flag = false;

                                            return false;

                                        } else {

                                            var imgs = document.createElement("img");

                                            imgs.src = imgSrc;

                                            flag = true;

                                        }

                                        document.getElementById("upImg").src = imgSrc;

                                    }

                                }

                                function checkpic() {

                                    var raFlag = false;

                                    var obj = document.getElementsByName("select");

                                    for (var i = 0; i < obj.length; i++) {

                                        if (obj[i].checked) {

                                            raFlag = true;

                                            break;

                                        } else {

                                            raFlag = false;

                                        }

                                    }

                                    if (raFlag == false && flag == true) {

                                        alert("请选择最新的照片");

                                    }

                                    var subFlag = false;

                                    subFlage = flag && raFlag;

                                    flag = false;

                                    return subFlage;

                                }

                            </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>  

<asp:FileUpload ID="fupweb_image" runat="server" class="chenck_upload left" onchange="changesrc(this.id)" /></span>

   <img id="upImg" runat="server" src=" "   />

    </div>

    </form>

</body>

</html>

js实现FileUpload选择图片后预览功能的更多相关文章

  1. input file选择图片后 预览

    很多前端都选择用插件来实现图片预览,这个小功能也可以很简单的用jQuery来实现 简单的jQuery实现input file选择图片后,可以预览图片的效果 简单的HTML代码: <div> ...

  2. html选择图片后预览，保存并上传

    html代码:------------------添加-------------------------- accept="image/gif,image/jpeg,image/jpg,im ...

  3. type="file" 选择图片后预览

    function setImagePreview(avalue) { var docObj = document.getElementById("doc"); var imgObj ...

  4. 巧用weui.gallery()，点击图片后预览图片

    要在页面需要加载的JS文件: <script src="../js/libs/weui.min.js"></script> 可以去weui的文档中下载,这是 ...

  5. 在Vue项目中 选择图片并预览

    最近开始使用vue做项目 在这个过程中,碰到了大多数做前端肯定经历的一个问题,就是文件上传预览 花了点时间解决,因此分享一下预览功能的解决方案 页面: <div class="sele ...

  6. javascript实现 京东淘宝等商城的商品图片大图预览功能

    在京东和淘宝等购买东西的时候,我们会经常预览左侧商品展示图片,把鼠标放到原图,右侧就会有个大图显示出细节.本文将带领大家写一个这样简单的功能! 一.实现原理 当鼠标移入某一图片内部时,图片上部会出现一 ...

  7. javascript实现 京东淘宝等商城的商品图片大图预览功能（图片放大器）

      在京东和淘宝等购买东西的时候,我们会经常预览左侧商品展示图片,把鼠标放到原图,右侧就会有个大图显示出细节.本文将带领大家写一个这样简单的功能! 一.实现原理 当鼠标移入某一图片内部时,图片上部会出 ...

  8. Java实现图片裁剪预览功能

    在项目中.我们须要做些类似头像上传,图片裁剪的功能,ok看以下文章! 须要插件:jQuery Jcrop 后端代码: package org.csg.upload; import java.awt.R ...

  9. 为Dynamics CRM注释的图片附件做个预览功能

    关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复163或者20151017可方便获取本文,同时可以在第一时间得到我发布的最新的博文信息,follow me! Dynamics CRM中注释可 ...

随机推荐

  1. linux上怎么切换不同版本的arm-linux-gcc？只需改一行函数

    linux上怎么切换不同版本的arm-linux-gcc?只需改一行函数 ln -s /usr/local/arm/3.4.1/bin/arm-linux-gcc /usr/bin/arm-linux ...

  2. bzoj2553

    似乎挂精度了,不过这是一道好题 很明显看题知算法,知道这道题肯定是AC自动机上矩阵乘法 首先要明确一点,对一个字符串,怎样划分禁忌串最多 根据求最多不相交线段可知,从头到尾能划分出禁忌串就划分 根据这 ...

  3. Redis 入门第一发

    Redis 官网:http://redis.io/ 中文:http://www.redis.cn/topics/replication.html         http://www.redis.cn ...

  4. CSS实现Div透明，而显示在上面的文字不透明，但也可看到显示在下面的图片内容

    CSS实现Div透明,而显示在上面的文字不透明,但也可看到显示在下面的图片内容,DiV透明其实挺简单,主要是为background定义opacity属性,一般这个是最大值是1,数值越接近1,则越不透明 ...

  5. 【转】qtp安装时问题

    1.安装qtp后要重启机器. 2.插件选择错误, 处理方式:重新启动QTP,勾选 WEB插件; 3.在安装QTP后,或者禁用IE浏览器里的一些ActiveX控件后,正常录制QTP时,对象识别不了;(保 ...

  6. js怎样生成json的数据

    var row1 = {};row1.name = 'david';row1.age = '20'; //或者var row2 = {name: 'peter', age: '23'}; var da ...

  7. LRU 缓冲池 （不考虑多线程）

    lru:(转)LRU算法的实现 什么是LRU算法? LRU是Least Recently Used的缩写,即最近最少使用页面置换算法,是为虚拟页式存储管理服务的.关于操作系统的内存管理,如何节省利用容 ...

  8. 格式化URL

    //格式化url查询参数为json function formatUrl(url){ var reg=/(?:[?&]+)([^&]+)=([^&]+)/g; var data ...

  9. jvm参数优化

    一.HotSpot JVM 提供了三类参数 现在的JVM运行Java程序(和其它的兼容性语言)时在高效性和稳定性方面做的非常出色.例如:自适应内存管理.垃圾收集.及时编译.动态类加载.锁优化等.虽然有 ...

  10. hdoj 2816 I Love You Too

    I Love You Too Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...