【Javascript Demo】无刷新预览所选择的图片
1.效果如下,可测试

2.代码如下
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
//本地图片预览
function setImagePreview(fieldupload, image, imagediv) {
var docObj = document.getElementById(fieldupload);
var imgObjPreview = document.getElementById(image);
if (docObj.files && docObj.files[0]) {
//火狐下,直接设img属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '150px';
imgObjPreview.style.height = '150px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();
//火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
} else {
//IE下,使用滤镜
docObj.select();
var imgSrc = document.selection.createRange().text;
var localImagId = document.getElementById(imagediv);
//必须设置初始大小
localImagId.style.width = "150px";
localImagId.style.height = "150px";
//图片异常的捕捉,防止用户修改后缀来伪造图片
try {
localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"; localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
} catch (e) {
alert("您上传的图片格式不正确,请重新选择!");
return false;
}
imgObjPreview.style.display = 'none';
document.selection.empty();
}
return true;
}
</script>
</head> <body>
<div id="localImag"> <img id="preview" width="150px" height="150px" src="http://images.cnblogs.com/cnblogs_com/yc-755909659/559257/o_%e6%9a%82%e6%97%a0%e5%9b%be%e7%89%87.gif" alt="" /></div>
<div>
<input type="file" onchange="javascript:setImagePreview('upload','preview','localImag');" id="upload" />
</div>
</body>
</html>
【Javascript Demo】无刷新预览所选择的图片的更多相关文章
- hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images
hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images, 本例子主要是使用HTML5 的File API,建立一個可存取到该file的url, 一个空的img标签,ID为img0,把 ...
- ajax+FormData+javascript实现无刷新表单信息提交
ajax+FormData+javascript实现无刷新表单信息提交 原理: dom收集表单信息,利用FormData快速收集表单信息 ,实例化表单数据对象 同时收集fm的表单域信息. var f ...
- ajax+FormData+javascript 实现无刷新上传附件
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- ajax+FormData+javascript 实现无刷新表单注册
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 网站中集成jquery.imgareaselect实现图片的本地预览和选择截取
imgAreaSelect 是由 Michal Wojciechowski开发的一款非常好用的jquery插件,实现了图片的截取功能.其文档和Demo也是很详尽的.大家可以到http://odynie ...
- JavaScript 实现打印,打印预览,打印设置
WebBrowser是IE内置的浏览器控件,无需用户下载. 一.WebBrowser控件 <object ID='WebBrowser' WIDTH=0 HEIGHT=0 CLASSID='CL ...
- JavaScript实现无刷新评论及在IE下的剪切板访问(学习)
1.无刷新评论 tips: appendChild:将新元素作为父元素的最后一个子元素进行添加. insertBefore:在一个指定的子节点之前插入一个节点 实现: <!DOCTYPE htm ...
- 如何使用JavaScript直接上传并预览粘贴板的图片?
(题图:梵高-橄榄树) 提出需求 因为工作原因,现在有一个需求就是需要用户使用QQ或者微信复制一张截图后,在div中直接粘贴这张图片,而不是采用上传的方式.类似我们在使用QQ微信时直接粘贴截图的操作, ...
- JavaScript实现拖拽预览,AJAX小文件上传
本地上传,提前预览(图片,视频) 1.html中div标签预览显示,button标签触发上传事件. <div id="drop_area" style="bord ...
随机推荐
- BZOJ 2333: [SCOI2011]棘手的操作 可并堆 左偏树 set
https://www.lydsy.com/JudgeOnline/problem.php?id=2333 需要两个结构分别维护每个连通块的最大值和所有连通块最大值中的最大值,可以用两个可并堆实现,也 ...
- iOS录音后播放声音小,AudioSessionInitialize failed,AudioQueueStart failed (-50)
方法1: UInt32 audioRoute = kAudioSessionOverrideAudioRoute_Speaker; AudioSessionSetProperty(kAudioSess ...
- INTEL SSD SMART 性能 E8 E9 转
如题今天研究了一下怎么看Intel SSD Toolbox里边显示的Smart信息.首先说,查看Intel SSD smart信息最好最方便的当然就是自家的工具箱,用其他工具查看不是不可以,但是很多数 ...
- MYSQL 慢日志
http://blog.chinaunix.net/uid-9950859-id-122259.html
- 报错: LINQ to Entities 不识别方法“Int32 Parse(System.String)
断点调试发现报错的语句为: public ActionResult SomeMethod(string someId) { var temp = SomeService.LoadEntities(a ...
- 在没有界面的类中,实现弹出UIAlertView || 在没有界面的类中,刷新程序界面 思路
+(DisplayErrorMsg *)sharedDisplayErrorMsg { static DisplayErrorMsg *instance = nil; @synchronized(in ...
- 用宏判断程序当前的运行模式(debug or release)
例子 #if defined (DEBUG) && DEBUG == 1 // 如果当前处于debug 模式 //to do #else //to do #endif
- 转 UITextField
//初始化textfield并设置位置及大小 UITextField *text = [[UITextField alloc]initWithFrame:CGRectMake(20, 20, 130, ...
- python文本 字符串开头或者结尾匹配
python文本 字符串开头或者结尾匹配 场景: 字符串开头或者结尾匹配,一般是使用在匹配文件类型或者url 一般使用startwith或者endwith >>> a='http:/ ...
- appium+python自动化61-中文输入乱码问题解决
前言 在夜神模拟器上输入中文,发现是乱码,将unicodeKeyboard和resetKeyboard参数设置为True了,发现还是没法解决. 打开手机设置语言和输入法,发现找不到Appium And ...