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" 选择图片后预览的更多相关文章

  1. input file选择图片后 预览

    很多前端都选择用插件来实现图片预览,这个小功能也可以很简单的用jQuery来实现 简单的jQuery实现input file选择图片后,可以预览图片的效果 简单的HTML代码: <div> ...

  2. js实现FileUpload选择图片后预览功能

    当asp.net的FileUpload选择一个图片后不需要上传就能显示出图片的预览功能, 代码: <%@ Page Language="C#" AutoEventWireup ...

  3. html选择图片后预览,保存并上传

    html代码:------------------添加-------------------------- accept="image/gif,image/jpeg,image/jpg,im ...

  4. input type=file 选择图片并且实现预览效果的实例

    为大家带来一篇input type=file 选择图片并且实现预览效果的实例. 通过<input />标签,给它指定type类型为file,可提供文件上传: accept:可选择上传类型, ...

  5. Input File选择图片后,未保存预览

    今天实现上传图片到服务器 简单的jQuery实现input file选择图片后,可以预览图片的效果 简单的HTML代码: <div> <img src="" cl ...

  6. 巧用weui.gallery(),点击图片后预览图片

    要在页面需要加载的JS文件: <script src="../js/libs/weui.min.js"></script> 可以去weui的文档中下载,这是 ...

  7. input type=file 选择图片并且实现预览效果

    通过<input />标签,给它指定type类型为file,可提供文件上传: accept:可选择上传类型,如:只要传图片,且不限制图片格式,为image/*: multiple:规定是否 ...

  8. html input type=file 选择图片,图片预览 纯html js实现图片预览

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 在Vue项目中 选择图片并预览

    最近开始使用vue做项目 在这个过程中,碰到了大多数做前端肯定经历的一个问题,就是文件上传预览 花了点时间解决,因此分享一下预览功能的解决方案 页面: <div class="sele ...

随机推荐

  1. Nginx 配置支持C++

    1.在auto/make脚本里添加新的编译器和链接器: #LINK = $LINK                         #原25行附近注释掉原链接器CXX=g++             ...

  2. 数据分析:中国高校更名历史 Python

    上周领了新任务,做国内高校改名历史的统计,这个挺有意思,以下是我任务完成过程,和大家分享. 一. 数据收集 数据需求:目前已有高校校名,各高校改名历史记录 高校校名数据来源:尝试从高校排名网站(iPI ...

  3. centos 安装beanstalkd

    You need to have the EPEL repo (http://www.servermom.org/2-cents-tip-how-to-enable-epel-repo-on-cent ...

  4. git下载教程

    1.git for windows的下载链接 1.*的版本   https://github.com/msysgit/msysgit/releases 2.*的版本   https://github. ...

  5. HTML5,jQuery,ajax基础面试

    简要描述HTML5中的本地存储 答案: 很多时候我们会存储用户本地信息到电脑上,例如:比方说用户有一个填充了一半的长表格,然后突然网络连接断开了,这样用户希望你能存储这些信息到本地,当网络回复的时候, ...

  6. 初识Linux-3

    1,find 目录 条件 [处理命令]-默认是print操作 2,find d6 -name "*cpp" -exec rm{} ";"(或者‘;’或者/;都是 ...

  7. Xcode8更新CocoaPods报错解决办法

    Apple发布了iPhone7同时也发布了xcode8,第一时间升级,并且用Xcode8集成cocoapods但是打开工程,会报一大堆错误解决这个问题
由于OSX的安全解决方案,所以默认路径不能安装, ...

  8. Servlet页面登录的数据库验证程序(二)

    这个程序在原来的程序基础上加入了密码验证. 一.增加一个error.jsp页面,用于跳转出现用户名和密码错误显示信息. <%@ page language="java" im ...

  9. 解决MongoDB磁盘IO问题的三种方法

    1.使用组合式的大文档 我们知道MongoDB是一个文档数据库,其每一条记录都是一个JSON格式的文档.比如像下面的例子,每一天会生成一条这样的统计数据: { metric: "conten ...

  10. Linux常用的安全工具 转自https://yq.aliyun.com/articles/52540?spm=5176.100239.blogcont24250.8.CfBYE9

    摘要: 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://chenguang.blog.51cto.com/350944/85790 ...