当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. 【转】如何单独编译Android源代码中的模块--不错

    原文网址:http://blog.csdn.net//article/details/6566662/ 第一次下载好Android源代码工程后,我们通常是在Android源代码工程目录下执行make命 ...

  2. （转载）C++中将构造函数或析构函数定义为private

    (转载)http://www.blogjava.net/fhtdy2004/archive/2009/05/30/278971.html C++中将构造函数或析构函数定义为private 很多情况下要 ...

  3. 有7g和2g的砝码各一个，怎样称可以3次把140g东西分为50g和90g？？？？？？？

    第一次:等分 50和90为   70 70 2.   7g 和2g  ,取出一个70中的9g   ,  61   70 3.利用 9g和2g砝码,取出61中的11克,前面的9 和 11 都放进70

  4. RHEL7磁盘分区挂载和格式化

    安装大数据平台,每台机器需要挂载10个磁盘,用JBOD模式,操作系统为RHEL7.2. 写了两个脚本,format_disk.sh和mount_disk.sh实现磁盘自动分区格式化以及挂载,修改fst ...

  5. 转载:Python中的new style class机制实现

    1.Python中的对象模型python中所有东西都是对象 class对象:表示Python内置的类型和定义的类型instance对象(实例对象):表示由class对象创建的实例 1.1 对象间的关系 ...

  6. Yii框架tips（转）

    yii的一些小的技巧 http://www.yiichina.com/topic/151 db组件 'schemaCachingDuration'=>3600, 为什么不起做用?需要开缓存 如何 ...

  7. 【JAVA - SSM】之MyBatis开发DAO

    在SSM框架中的DAO层就是MyBatis中的Mapper,Mapper分为两部分:Mapper接口(JAVA文件)和Mapper映射文件(XML文件).DAO开发(Mapper开发)有两种方式:原始 ...

  8. Sublime_text3怎么运行php代码

    开发神奇sublime写代码真的好爽,之前听说是神器,但是没去用,觉得用eclipse写php代码,用dw写html够用了,用了一下sublime,哈哈,爽爆了. 除了写前端代码外,还需要写php代码 ...

  9. JSP版（utf8编码）的Ueditor百度文章编辑器配置以及使用说明

    二话不说,先上图: 我配置好的效果大致是这些功能:基本的文字编辑功能.图片上传功能.附件上传功能.百度/谷歌地图搜索截图.视/音频发布功能.这个插件是现今我用过觉得最舒服的编辑器,功能齐全强大,稍微修 ...

  10. UVa 567: Risk

    这是一道很简单的图论题,只要使用宽度优先搜索(BFS)标记节点间距离即可. 我的解题代码如下: #include <iostream> #include <cstdio> #i ...