获取input file 选中的图片,并在一个div的img里面赋值src实现预览
代码如下利用html5实现:几乎兼容所有主流浏览器,当然IE必须是IE 6以上
【jquery代码】$(function() { $("#file_upload").change(function() { var $file = $(this); var fileObj = $file[0]; var windowURL = window.URL || window.webkitURL; var dataURL; var $img = $("#preview"); if(fileObj && fileObj.files && fileObj.files[0]){ dataURL = windowURL.createObjectURL(fileObj.files[0]); $img.attr('src',dataURL); }else{ dataURL = $file.val(); var imgObj = document.getElementById("preview"); // 两个坑: // 1、在设置filter属性时,元素必须已经存在在DOM树中,动态创建的Node,也需要在设置属性前加入到DOM中,先设置属性在加入,无效; // 2、src属性需要像下面的方式添加,上面的两种方式添加,无效; imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"; imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL; } });});【html代码】:<input id="file_upload" type="file" /><div class="image_container"><img id="preview" width="60" height="60"></div>获取input file 选中的图片,并在一个div的img里面赋值src实现预览的更多相关文章
- 简单获取input file 选中的图片,并在一个div的img里面赋值src实现预览图片
html代码: <input id="file_upload" type="file" /> <div class="image_c ...
- 怎么简单获取input file 选中的图片,并在一个div的img里面赋值src实现预览?
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs ...
- js获取input file完整路径的方法
function getPath(){ //判断浏览器 var Sys = {}; var obj = document.getElementById("headImg"); ...
- js获取input file文件二进制码
<html> <body> <img id="image"src=""/> <br/> <input ty ...
- layui 图片与表单一起提交 + layer.photos图片层预览
HTML基本结构: <form class="layui-form" action="" id="feedBackForm"> ...
- js获取 input file 图片缩略图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery如何获取input(file)控件上传的图片名称,即"11111.jpg"
html代码:<input name=file" type="file" id="file"/> Jquery代码:var file;$( ...
- js 获取input file路径改变图像地址
html代码 <img id="newImage" alt="100x100" src="__PUBLIC__/img/1.jpg" ...
- Js/Jquery获取input file的文件名
html代码: <input type="file" name="file" id="file" class="in ...
随机推荐
- Google Nexus 5x Android 7.0 Root
很久没有写东西了,准备重新养成这个好习惯.因为自己一直在用Nexus,前段时间自己的Nexus5老的不行了,所以买了台5x,一直没时间root,今天有时间终于有时间弄一下. 在这里整理分享一下. 开始 ...
- 关于viewport详解
- libc.so.6: version GLIBC_2.14 not found
https://blog.csdn.net/heylun/article/details/78833050
- PHP如何去掉多维数组的重复值
1.定义函数 function array_unique_new($arr){ $t = array_map('serialize', $arr);//利用serialize()方法将数组转换为以字符 ...
- 【VC++学习笔记四】MFC应用程序中框架类的获取
一.文档类中 获取视图: 先获取主窗体,在根据主窗体获取视图 pMain->GetActiveDocument();注意类型转换 由于文档中可能包含多个视图,可以按照下面函数获取: CView* ...
- Json技术
JSON语法是一种用于传输和生成数据的协定,很类似于C家族的语言,所以很容易被C家族的语言所解析.对象:对象包含再{}之间属性:采用Key-Value对来表示.属性之间使用逗号分开. string ...
- 一次失败的PHP扩展开发之旅
一次失败的PHP扩展开发之旅 By warezhou 2014.11.19 缘起 经过不断的持续迭代.我们部门的协程版网络框架(CoSvrFrame)最终出炉了!这本来是件喜大普奔的事情.可是随着新业 ...
- vim 基础学习之插入模式
插入模式1.字符编码,插入特殊字符 <C-v>{3位} 如,你想输入A,你可以在输入模式下<C-v>065(必须是3位) <C-v>u{4位} 如,你想输入¿,你可 ...
- Typedef和#define之间的区别
Typedef和define都可以用来给对象取一个别名,但是两者却有着很大不同. 1. 首先,二者执行时间不同 关键字typedef在编译阶段有效,由于是在编译阶段,因此typedef有类型检查的功能 ...
- 小白算法之路-非确定性多项式(non-deterministic polynomial,缩写NP)
前端小白的算法之路 时隔多日终于解决了埋在心头的一道难题,霎时云开雾散,今天把一路而来碰到的疑惑和心得都记录下来,也算是开启了自己探索算法的大门. 问题背景 曾经有一个年少轻狂的职场小白,在前端圈 ...