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 ...
随机推荐
- (实用篇)php支付宝接口用法分析
本文实例讲述了php支付宝接口用法.分享给大家供大家参考.具体分析如下: 现在流行的网站支持平台,支付宝当仁不让的老大了,现在我们就来告诉你如何使用支付宝api来做第三方支付,把支付宝放到自己网站来, ...
- CLR via C# 3rd - 04 - Type Fundamentals
1. System.Object The runtime requires every type to ultimately be derived from the System.Obj ...
- java虚拟机之垃圾收集器
serial收集器: 最基本的,是一个单线程收集器,只会使用一个CPU或者一条收集线程去完成垃圾收集, 更重要的是 在进行垃圾收集时,其他任务线程必须停止,serial收集器任然是client模式下的 ...
- ionic中的service简单写法
在service中写服务 服务名叫feedService .service('feedService',function($ionicLoading,$q,$http){ return{ //获取反馈 ...
- Java控制台中输入中文输出乱码的解决办法
Run---Run Configurations---Common---Encoding---Other---GBK Run Configurations里的Common中将编码方式改成GBK就正常了
- java 中List.subList 总结
今天,维护以前的代码,看到了List.subList这个方法,以前没接触过,对这个就是个小白,今天学习下: java.util.List中有一个subList方法,用来返回一个list的一部分的视图. ...
- C#中页面之间跳转方法比较
一直以来,各种跳转方法混用,浑浑噩噩没有仔细去了解过每个跳转方法的区别 1.<a herf="default.asp"></a> 超链接跳转 2.< ...
- ActiveMQ的初夜
Producer Flow Control mq自己实现了Flow Control(流量控制,默认开启),在mq的版本中,4.x和5.x流量控制实现原理并不相同,前者通过 TCP Flow Contr ...
- IOS 二维码的实现
1.首先导入Coreimage框架. //创建滤镜对象 CIFilter *filter = [CIFilter filterWithName:@"CIQRCodeGenerator&quo ...
- NPOI读取Excel
项目环境:Webform framework4.0 dll版本:NPOI2.0 dotnet2.0版本 这两天要做个excel导入的功能,想到以前用过NPOI,感觉很给力,今天写了个DEMO,写的时 ...