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. win10 mysql 5.7.13 服务无法启动 3534

    自己也百度了很多方法都不管用(我用的MySQL是免安装版,直接解压缩的那种) 基本上都是说没有设置data目录,没有 初始化,我很郁闷的是都按照那些步骤处理了,到最后还是不行. 后来把配置文件里面的 ...

  2. 过滤emoji表情

    str=str.replace(/\ud83c[\udf00-\udfff]|\ud83d[\udc00-\ude4f]|\ud83d[\ude80-\udeff]/g, "");

  3. 根据url地址单个或批量下载图片

    我们在java开发的时候会遇到通过url地址下载图片的情况.方便起见,我把通过url地址下载图片封装了tool工具类,方便以后使用 1.根据如:http://abc.com/hotels/a.jpg  ...

  4. [llvm] Call the LLVM Jit from c program

    stackoverflow: http://stackoverflow.com/questions/1838304/call-the-llvm-jit-from-c-program Another t ...

  5. JSPatch – 动态更新iOS APP

    原文:http://blog.cnbang.net/works/2767/ JSPatch是最近业余做的项目,只需在项目中引入极小的引擎,就可以使用JavaScript调用任何Objective-C的 ...

  6. PowerBuilder 简介及应用 - 数据库系统原理

    PowerBuilder 是一种企业级数据库前端应用和多层体系结构开发工具,友好的用户界面,功能强大的数据窗口,是一个集成开发环境. PB 的特点 采用面向对象的编程方法和事件驱动的工作原理. 支持跨 ...

  7. edgesForExtendedLayout,automaticallyAdjustsScrollViewInsets, extendedLayoutIncludesOpaqueBars的影响

    在IOS7以后 ViewController 开始使用全屏布局的,而且是默认的行为通常涉及到布局 就离不开这个属性 edgesForExtendedLayout,它是一个类型为UIExtendedEd ...

  8. 自动运维:Ansible -ansible tower

    文档主页:http://docs.ansible.com/参考文档:http://docs.ansible.com/ansible/参考文档:http://docs.ansible.com/ansib ...

  9. sokite

    <?php interface Proto { //连接 function conn($url); //发送get请求 function get(); //发送post请求 function p ...

  10. tp根据数据库动态创建微信菜单

    喻可伟的博客   tp根据数据库动态创建微信菜单 $button = array();$class = M('ucenter_menu')->limit(3)->select();//取出 ...