js实现FileUpload选择图片后预览功能
当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选择图片后预览功能的更多相关文章
- input file选择图片后 预览
很多前端都选择用插件来实现图片预览,这个小功能也可以很简单的用jQuery来实现 简单的jQuery实现input file选择图片后,可以预览图片的效果 简单的HTML代码: <div> ...
- html选择图片后预览,保存并上传
html代码:------------------添加-------------------------- accept="image/gif,image/jpeg,image/jpg,im ...
- type="file" 选择图片后预览
function setImagePreview(avalue) { var docObj = document.getElementById("doc"); var imgObj ...
- 巧用weui.gallery(),点击图片后预览图片
要在页面需要加载的JS文件: <script src="../js/libs/weui.min.js"></script> 可以去weui的文档中下载,这是 ...
- 在Vue项目中 选择图片并预览
最近开始使用vue做项目 在这个过程中,碰到了大多数做前端肯定经历的一个问题,就是文件上传预览 花了点时间解决,因此分享一下预览功能的解决方案 页面: <div class="sele ...
- javascript实现 京东淘宝等商城的商品图片大图预览功能
在京东和淘宝等购买东西的时候,我们会经常预览左侧商品展示图片,把鼠标放到原图,右侧就会有个大图显示出细节.本文将带领大家写一个这样简单的功能! 一.实现原理 当鼠标移入某一图片内部时,图片上部会出现一 ...
- javascript实现 京东淘宝等商城的商品图片大图预览功能(图片放大器)
在京东和淘宝等购买东西的时候,我们会经常预览左侧商品展示图片,把鼠标放到原图,右侧就会有个大图显示出细节.本文将带领大家写一个这样简单的功能! 一.实现原理 当鼠标移入某一图片内部时,图片上部会出 ...
- Java实现图片裁剪预览功能
在项目中.我们须要做些类似头像上传,图片裁剪的功能,ok看以下文章! 须要插件:jQuery Jcrop 后端代码: package org.csg.upload; import java.awt.R ...
- 为Dynamics CRM注释的图片附件做个预览功能
关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复163或者20151017可方便获取本文,同时可以在第一时间得到我发布的最新的博文信息,follow me! Dynamics CRM中注释可 ...
随机推荐
- warning: push.default is unset;
git push warning questions This warning was introduced in Git 1.7.11 along with the simple style of ...
- c语言开源项目--SQLite学习资料总结
同行博客: 1.http://www.cnblogs.com/hustcat/category/175618.html; 2.http://blog.csdn.net/zhoudaxia/articl ...
- Centos6.4 为用户添加sudo功能
sudo即super user do,以超级管理员的方式运行命令.使用时,只需在命令最前面加上sudo即可. 要为用户添加sudo功能,需要修改sudo的配置文件: vi /etc/sudoers ( ...
- Ajax在PC端可以使用但在手机端不能使用
ajax代码如下,仔细看看也没有什么错,电脑端可以调用并正确的返回结果,手机端却不可以 function GetSumData(time) { var device = "Phone&quo ...
- HDOJ/HDU 5686 Problem B(斐波拉契+大数~)
Problem Description 度熊面前有一个全是由1构成的字符串,被称为全1序列.你可以合并任意相邻的两个1,从而形成一个新的序列.对于给定的一个全1序列,请计算根据以上方法,可以构成多少种 ...
- ldr指令总结
LDR/STR字和无符号字节加载/存储 1,LDR Rd,[Rn] 2, LDR Rd,[Rn,Flexoffset] 3, LDR Rd,[Rn],Flexoffset 4, LDR Rd,la ...
- java数据类型和运算优先级
一.数据类型 1.基本数据类型: . 布尔类型:boolean(true,false) . 整型:byte(-128,127).short(-32768,32767).int(-2147483648, ...
- patch与diff的恩怨
一.概述 diff和patch是一对相辅相成的工具,在数学上来说,diff类似于对两个集合的差运算,patch类似于对两个集合的和运算.diff比较两个文件或文件集合的差异,并记录下来,生成一个dif ...
- Nginx+tomcat负载均衡并动静态分离
Nginx使用正则表达式配置location,指定某些后缀的文件直接从文件路径中找(如*.jpg直接去C:/XX/XX/XX/img下找),其他的请求转发给tomcat 同时可以配置多个tomcat ...
- java-mina(nio 框架)
mina是对nio的具体实现.是目前比较高效和流行的nio框架了. 下面是对使用mina进行通讯的一个简单demo,后面再用mina写一个RPC的简单框架. mina主要包括: (使用的mina版 ...