当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. Java邮件开发（JavaMail）

    Sun发布的用来处理email的API,它可以方便地执行一些常用的邮件传输.JavaMail API是Sun公司为方便Java开发人员在应用程序中实现邮件发送和接收功能而提供的一套标准开发包,它支持一 ...

  2. Android-adb shell 读取手机系统文件

    1.首先保证手机是root 状态 2.运行 adb shell 页面以后 su root 3.ls 就会发现目录结构可以显示了

  3. POJ 3107

    #include<iostream> #include<cstdio> #include<cstring> #include<string> #incl ...

  4. Web性能测试基本性能指标

    Web性能测试的部分概况一般来说,一个Web请求的处理包括以下步骤: (1)客户发送请求 (2)web server接受到请求,进行处理: (3)web server向DB获取数据: (4)webse ...

  5. leetcode reverse integer&&Palindrome Number

    public class Solution { public int reverse(int x) { int ret=0; while(x!=0) { int t=x%10; ret=ret*10+ ...

  6. 【转】tmux入门指南

    按照官方说明,tmux是一个终端复用软件.我接触tmux也就是这几天的事情,但已经发现其强大.作为一个文艺程序员,有必要向大家分享一下,这么好的东东怎敢藏着掖着. 先用起来再说 假设你已经装好tmux ...

  7. Area - POJ 1654（求多边形面积）

    题目大意:从原点开始,1-4分别代表,向右下走,向右走,向右上走,向下走,5代表回到原点,6-9代表,向上走,向左下走,向左走,向左上走.求出最后的多边形面积. 分析:这个多边形面积很明显是不规则的, ...

  8. android3.2以上切屏禁止onCreate()

    一般切屏禁止onCreate()方法需要将activity加上属性: android:configChanges=”orientation|keyboardHidden” 但是在3.2以上就不起作用了 ...

  9. 解析xlsx文件---Java读取Excel2007

    关于Java读取Excel2007的文章在Google.百度上搜索一下,没有太好的例子,实现的也不算太好.查看了一下Poi,最新的 POI 3.5 beta 4 支持读写 Excel2007和PPT2 ...

  10. 微软Office与金山WPS Office有何私密关系？

    新浪科技讯,9月1日午间消息,国家工商总局在其官网公布消息称.对微软公司副总裁陈实进行反垄断调查询问,要求微软就其综合情况以及企业反映的微软公司Windows操作系统和Office办公软件相关信息没有 ...