获取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 ...
随机推荐
- 有关R6034错误的思考
作者:朱金灿 来源:http://blog.csdn.net/clever101 我们有时会遇到R6034错误,工程明明编译通过,但是运行时却出现: 网上的解决办法很多,但是有效的不多,特别是对阐述这 ...
- Yeslab华为安全HCIE七门之-防火墙UTM技术(5篇)
课程目录: 华为安全HCIE-第四门-防火墙UTM技术(5篇)\1_内容安全_内容过滤.avi 华为安全HCIE-第四门-防火墙UTM技术(5篇)\2_内容安全-url过滤.avi 华为安全H ...
- Git 远程仓库默认权限问题的解决
多人共同开发维护一个项目时,对整个项目文件互有拉取.推送等行为.为防止操作时文件权限出现冲突,可有以下2种方法解决: 1. 本地git的远端设置中,连接远程仓库时多人使用同一个用户名,该用户名为git ...
- Swift学习笔记(14)--方法
1.分类 方法分为实例方法和类型方法 实例方法(Instance Methods):与java中的类似,略 类型方法(Type Methods):与java.oc中的类方法类似.声明类的类型方法,在方 ...
- LeetCode 223 Rectangle Area(矩形面积)
翻译 找到在二维平面中两个相交矩形的总面积. 每一个矩形都定义了其左下角和右上角的坐标. (矩形例如以下图) 如果,总占地面积永远不会超过int的最大值. 原文 分析 这题前天试过,写了一堆推断.终究 ...
- HTML5吃豆豆游戏开发实战(一)使用Canvas绘制游戏主角
近期在学习HTML5.爱因斯坦曾说过,"最好的学习就是自己去经历". 于是.我想在学习HTML5的同一时候.做一款简单的小游戏,这样学习起来也会非常有趣的.我想做的是曾经小时候玩儿 ...
- CRSF Defense Using Content Injection Support By ModSecurity
The most advanced and imaginative use of the content injection feature is that devised byRyan C. Bar ...
- amaze ui响应式辅助
amaze ui响应式辅助 响应式辅助 就是不同的显示屏幕,或者手机的横竖屏,你可以控制栏目的显影,还是挺有帮助的 视口大小 .am-[show|hide]-[sm|md|lg][-up|-down| ...
- javascript变量类型及作用域
javascript变量类型及作用域 一.简介 变量类型 ECMAScript变量可能包含两种不同类型的数据值:基本类型和引用类型. 基本类型 基本类型指的是简单的数据段,5种基本数据类型:undef ...
- Scott Hanselman的问题-3
.Net程序员面试 中级篇 (回答Scott Hanselman的问题) 继<.Net 程序员面试 C# 语言篇 (回答Scott Hanselman的问题)>跟<.Net程序员 ...