当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. warning: push.default is unset;

    git push warning questions This warning was introduced in Git 1.7.11 along with the simple style of ...

  2. c语言开源项目--SQLite学习资料总结

    同行博客: 1.http://www.cnblogs.com/hustcat/category/175618.html; 2.http://blog.csdn.net/zhoudaxia/articl ...

  3. Centos6.4 为用户添加sudo功能

    sudo即super user do,以超级管理员的方式运行命令.使用时,只需在命令最前面加上sudo即可. 要为用户添加sudo功能,需要修改sudo的配置文件: vi /etc/sudoers ( ...

  4. Ajax在PC端可以使用但在手机端不能使用

    ajax代码如下,仔细看看也没有什么错,电脑端可以调用并正确的返回结果,手机端却不可以 function GetSumData(time) { var device = "Phone&quo ...

  5. HDOJ/HDU 5686 Problem B(斐波拉契+大数~)

    Problem Description 度熊面前有一个全是由1构成的字符串,被称为全1序列.你可以合并任意相邻的两个1,从而形成一个新的序列.对于给定的一个全1序列,请计算根据以上方法,可以构成多少种 ...

  6. ldr指令总结

    LDR/STR字和无符号字节加载/存储 1,LDR Rd,[Rn]   2, LDR Rd,[Rn,Flexoffset] 3, LDR Rd,[Rn],Flexoffset 4, LDR Rd,la ...

  7. java数据类型和运算优先级

    一.数据类型 1.基本数据类型: . 布尔类型:boolean(true,false) . 整型:byte(-128,127).short(-32768,32767).int(-2147483648, ...

  8. patch与diff的恩怨

    一.概述 diff和patch是一对相辅相成的工具,在数学上来说,diff类似于对两个集合的差运算,patch类似于对两个集合的和运算.diff比较两个文件或文件集合的差异,并记录下来,生成一个dif ...

  9. Nginx+tomcat负载均衡并动静态分离

    Nginx使用正则表达式配置location,指定某些后缀的文件直接从文件路径中找(如*.jpg直接去C:/XX/XX/XX/img下找),其他的请求转发给tomcat 同时可以配置多个tomcat ...

  10. java-mina(nio 框架)

    mina是对nio的具体实现.是目前比较高效和流行的nio框架了. 下面是对使用mina进行通讯的一个简单demo,后面再用mina写一个RPC的简单框架.   mina主要包括: (使用的mina版 ...