type="file" 选择图片后预览
function setImagePreview(avalue) {
var docObj = document.getElementById("doc"); var imgObjPreview = document.getElementById("preview");
if(docObj.files &&docObj.files[]){
/*//火狐下,直接设img属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '150px';
imgObjPreview.style.height = '180px';
//imgObjPreview.src = docObj.files[0].getAsDataURL(); //火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);*/ $("#localImag").html('<img id="preview" src='+window.URL.createObjectURL(docObj.files[])+' style="display: block; width: 192px; height: 144px;" />');
}
else
{
//IE下,使用滤镜
docObj.select();
docObj.blur();
var imgSrc = document.selection.createRange().text;
var localImagId = document.getElementById("localImag");
//必须设置初始大小
localImagId.style.width = "192px";
localImagId.style.height = "144px";
//图片异常的捕捉,防止用户修改后缀来伪造图片
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;
}
type="file" 选择图片后预览的更多相关文章
- input file选择图片后 预览
很多前端都选择用插件来实现图片预览,这个小功能也可以很简单的用jQuery来实现 简单的jQuery实现input file选择图片后,可以预览图片的效果 简单的HTML代码: <div> ...
- js实现FileUpload选择图片后预览功能
当asp.net的FileUpload选择一个图片后不需要上传就能显示出图片的预览功能, 代码: <%@ Page Language="C#" AutoEventWireup ...
- html选择图片后预览,保存并上传
html代码:------------------添加-------------------------- accept="image/gif,image/jpeg,image/jpg,im ...
- input type=file 选择图片并且实现预览效果的实例
为大家带来一篇input type=file 选择图片并且实现预览效果的实例. 通过<input />标签,给它指定type类型为file,可提供文件上传: accept:可选择上传类型, ...
- Input File选择图片后,未保存预览
今天实现上传图片到服务器 简单的jQuery实现input file选择图片后,可以预览图片的效果 简单的HTML代码: <div> <img src="" cl ...
- 巧用weui.gallery(),点击图片后预览图片
要在页面需要加载的JS文件: <script src="../js/libs/weui.min.js"></script> 可以去weui的文档中下载,这是 ...
- input type=file 选择图片并且实现预览效果
通过<input />标签,给它指定type类型为file,可提供文件上传: accept:可选择上传类型,如:只要传图片,且不限制图片格式,为image/*: multiple:规定是否 ...
- html input type=file 选择图片,图片预览 纯html js实现图片预览
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 在Vue项目中 选择图片并预览
最近开始使用vue做项目 在这个过程中,碰到了大多数做前端肯定经历的一个问题,就是文件上传预览 花了点时间解决,因此分享一下预览功能的解决方案 页面: <div class="sele ...
随机推荐
- 基于云计算Iaas平台的ZStack
2015年4月,一家全新的基础架构即服务的软件产品ZStack面世.ZStack的主创人员是自在海外云计算公司的中国人.ZStack是基于Java语言,结合了OpenStack和CloudStack上 ...
- 关于对CSS尺寸单位'em'的长期误解
一直以来认为'em'是相对于父元素的字体大小. 直到今天学习移动WEB开发,重新复习css的尺寸大小时,惊奇发现:对em深深的误解了!!! 在CSS官网对em的解释实例是: a. h1{line-he ...
- Android之ProgressBar初步应用
这里利用 ProgressBar 即时显示下载进度. 途中碰到的问题: 1.主线程中不能打开 URL,和只能在主线程中使用 Toast 等 2.子线程不能修改 UI 3.允许网络协议 4.暂停下载和继 ...
- echarts图表标签(axisLabel)折行
在项目中遇到了一个echarts图表标签过长需折行的需求,so引出这篇总结,啦啦啦有帮助就多多支持啦,撒花撒花撒花~~~~ 在此不对echarts其他用法做解释,详细见echarts文档(点击前往) ...
- python 后台爆破工具
sys:使用sys模块获得脚本的参数 queue模块,创建一个“队列”对象 time 模块 Python time time() 返回当前时间的时间戳(1970纪元后经过的浮点秒数). fin ...
- 第五章——搭建S3C6410开发板的测试环境
搭建S3C6410开发板的测试环境 通过本章的学习学会了如何在开发板上安装Android.开发板是学习和开发嵌入式技术的主要硬件设备,想要顺利的通过linux驱动访问硬件,是不能在PC板上模拟的,需要 ...
- Ext.Window 的常见属性
Ext.Window 的常见属性: plain:true,(默认不是) resizable:false,(是否可以改变大小,默认可以) maximizable:true,(是否增加最 ...
- AngularJS + Java---前台网页与后台数据库传递数据 基本结构
第一个关于这两种语言的项目,以下只是我自己的理解,欢迎指教:) 基本对应关系 1. controller .jsp(.html) ng-controller="controllerTest ...
- 深度|OpenAI 首批研究成果聚焦无监督学习,生成模型如何高效的理解世界(附论文)
本文经机器之心(微信公众号:almosthuman2014)授权转载,禁止二次转载,原文. 选自 Open AI 作者:ANDREJ KARPATHY, PIETER ABBEEL, GREG BRO ...
- kuangbin_SegTree M (HDU 4553)
put my gezi这句话不得不说我看了好几秒才反应过来什么意思(你咋不上天呢 目测了一下也是区间合并 但是是成段更新的区间合并 但是!我终于!自己!写出来了! 嗯还算是比较顺利的 query的地方 ...