当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. 【HDOJ】3496 Watch The Movie

    二维费用背包. #include <stdio.h> #include <string.h> #define mymax(a, b) (a>b) ? a:b ][]; ] ...

  2. hud1520Anniversary party(树形DP）

    链接 第一道树形DP 根据左儿子 右兄弟 将多叉树转化成二叉树 结构体里保存取这个节点和不取这个节点的最大值 #include <iostream> #include<cstdio& ...

  3. 解决MySQL服务启动时报1067错误

    工具/原料 MySQL_5.6.24_win32 方法/步骤 当我们安装完Mysql时,如果在服务当中(可以在“运行”-->"service.msc"打开并查看)无法看到My ...

  4. 【转】Xcode7.1环境下上架iOS App到AppStore 流程 -- 不错！！

    原文网址:http://www.jianshu.com/p/a8bd16be122f 1.官网地址 Apple Developer 地址:https://developer.apple.com/mem ...

  5. HDOJ --- 2151 Worm

    Worm Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  6. 树的最大深度 leecode java

    秒杀/** * Definition for binary tree * public class TreeNode { * int val; * TreeNode left; * TreeNode ...

  7. Spring框架整合Struts2

    1,用Spring架构,及Struts2-spring-plugin插件 导入Spring的dist全部所需的jar包 Struts2的spring插件 struts2-spring-plugin.X ...

  8. 在Dubbo中开发REST风格的远程调用（RESTful Remoting）

    rest 在Dubbo中开发REST风格的远程调用(RESTful Remoting)

  9. 【Java重构系列】重构31式之封装集合

    2009年,Sean Chambers在其博客中发表了31 Days of Refactoring: Useful refactoring techniques you have to know系列文 ...

  10. hdoj 5137 How Many Maos Does the Guanxi Worth【最短路枚举+删边】

    How Many Maos Does the Guanxi Worth Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 512000/5 ...