获取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 ...
随机推荐
- hight charts
hight charts http://www.hcharts.cn/resource/index.php http://www.hcharts.cn/api/index.php
- C++中全局变量的声明和定义
原文链接:http://blog.csdn.net/candyliuxj/article/details/7853938 (1)编译单元(模块) 在VC或VS上编写完代码,点击编译按钮准备生成exe文 ...
- 【RHEL7/CentOS7服务控制之systemctl命令】
Systemd对于Linux来说,就是一个init程序,可以作为sysVinit和Upstat的替代. RHEL7监控和控制Systemd的主要命令是systemctl,该命令可查看系统状态和管理系统 ...
- eclipse 安装javaEE插件 和html\xml\jsp编辑器
1 在Eclipse中菜单help选项中选择install new software选项 2 在work with 栏中输入 http://download.eclipse.org/releases/ ...
- 【Henu ACM Round#14 C】Duff and Weight Lifting
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 2^y可以由两个2^(y-1)相加得到. 则有一个贪心的策略. 就是2^x尽量都变成2^(x+1) (即能够凑就尽量凑) 如果x还有 ...
- sparkR处理Gb级数据集
spark集群搭建及介绍:敬请关注 数据集:http://pan.baidu.com/s/1sjYN7lF 总结:使用sparkR进行数据分析建模相比R大致有3-5倍的提升 查看原始数据集:通过iri ...
- Java程序猿的JavaScript学习笔记(6——面向对象模拟)
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- iOS Core Animation具体解释(四)AutoLayout中的动画
原创blog.转载请注明出处 blog.csdn.net/hello_hwc 欢迎关注我的iOS SDK具体解释专栏 http://blog.csdn.net/column/details/huang ...
- mysql异常Lock wait timeout exceeded; try restarting transaction
mysql中使用update语句更新数据报错: Lock wait timeout exceeded; try restarting transaction. 这是由于你要更新的表的锁在其它线程手里. ...
- .net运行项目的几种形式
1.通过配置IIS 2.通过VS运行项目 3.发布到测试服务器 不同于PHP的发布,直接把相关的类文件传入ftp即可. .net的发布是编译好dll文件,将dll文件传入即可. 比如改了某个文件,就把 ...