当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. System.Windows.Forms中的Message Structure

    结构用途说明Implements a Windows message. Properties 1.public IntPtr HWnd { get; set; } Gets or sets the w ...

  2. React入门1

    React教程 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...

  3. 【转】.NET 三层架构 中 DAL+IDAL+Model+BLL+Web

    其实三层架构是一个程序最基本的 在.Net开发中通常是多层开发 比如说 BLL 就是business Logic laywer(业务逻辑层) 他只负责向数据提供者也就是DAL调用数据 然后传递给 客户 ...

  4. 《C语言程序设计现代方法》第4章 表达式

    C语言的一个特点就是它更多地强调表达式而不是语句,表达式是表示如何计算值的公式. 当表达式包含两个或更多个相同优先级的运算符时,运算符的结合性(associativity)开始发挥作用.如果运算符是从 ...

  5. 2D游戏编程4—Windows事件

    windows消息传来的参数分解: Message: WM_ACTIVATE Parameterization: fActive      = LOWORD(wParam);       // act ...

  6. （转载）TRS的WCM6漏洞权限绕过以及绕过密码的登陆方式

    转载于:http://www.2cto.com/Article/201302/191261.html 1.由来:建立在 TRS的WCM6可直接获取管理员密码 漏洞的基础上   2.首先访问wcm目录, ...

  7. linux 多线程基础3

    一．线程属性 线程具有属性,用pthread_attr_t表示,在对该结构进行处理之前必须进行初始化,在使用后需要对其去除初始化.我们用pthread_attr_init函数对其初始化,用pthrea ...

  8. Hadoop--map/reduce实现单词计数

    import org.apache.hadoop.fs.Path; import org.apache.hadoop.io.*; import org.apache.hadoop.mapred.*; ...

  9. Android中实现控件圆角边框

    首先,在drawable文件夹下新建一个xml文件: <?xml version="1.0" encoding="utf-8"?> <shap ...

  10. linux内核--几个上下文(context)

    为了控制进程的执行,内核必须有能力挂起正在CPU上运行的进程,并恢复以前挂起的某个进程的执行,这种行为叫进程切换(process switch),任务切换(task switch)或上下文切换(con ...