获取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 ...
随机推荐
- python 协程学习
协程 协程,又称微线程,纤程.英文名Coroutine.一句话说明什么是线程:协程是一种用户态的轻量级线程. 协程拥有自己的寄存器上下文和栈.协程调度切换时,将寄存器上下文和栈保存到其他地方,在切回来 ...
- BZOJ2690: 字符串游戏(平衡树动态维护Dfs序)
Description 给定N个仅有a~z组成的字符串ai,每个字符串都有一个权值vi,有M次操作,操作分三种: Cv x v':把第x个字符串的权值修改为v' Cs x a':把第x个字符串修改成a ...
- caioj 1066 动态规划入门(一维一边推4:护卫队)(分组型dp总结)
很容易想到f[i]为前i项的最优价值,但是我一直在纠结如果重量满了该怎么办. 正解有点枚举的味道. 就是枚举当前这辆车与这辆车以前的组合一组,在能组的里面取最优的. 然后要记得初始化,因为有min,所 ...
- Mysql学习总结(3)——MySql语句大全:创建、授权、查询、修改等
一.用户创建.权限.删除 1.连接MySql操作 连接:mysql -h 主机地址 -u 用户名 -p 用户密码 (注:u与root可以不用加空格,其它也一样) 断开:exit (回车) 打开cmd, ...
- VM虚拟机全屏显示
在虚拟机中使用全屏界面会有更强的用户体验.在编辑该文章的时候就是在使用虚拟机windows2008 R2系统.我的笔记本是苹果双系统.虚拟机安装在win7 64位系统下 1.首先查看主机的屏幕分辨率 ...
- vim 技巧之用宏命令批量处理文件
今天遇到了一种情况,就是我需要同时修改34个文件中的某些字符串的内容,如果一个个打开需改的话,那也太麻烦了.后来就想着能不能通过vim的宏命令来修改呢?现在就总结下关于宏在文件列表中的应用1.首先,我 ...
- Android圆形图片不求人,自定义View实现(BitmapShader使用)
在很多APP当中,圆形的图片是必不可少的元素,美观大方.本文将带领读者去实现一个圆形图片自定View,力求只用一个Java类来完成这件事情. 一.先上效果图 二.实现思路 在定义View 的onMea ...
- 2.Maven之(二)Maven生命周期
转自:https://blog.csdn.net/u012152619/article/details/51473404 我们在开发项目的时候,不断地在编译.测试.打包.部署等过程,maven的生命周 ...
- vue -- config index.js 配置文件详解
此文章介绍vue-cli脚手架config目录下index.js配置文件 此配置文件是用来定义开发环境和生产环境中所需要的参数 关于注释 当涉及到较复杂的解释我将通过标识的方式(如(1))将解释写到单 ...
- html的学习思维导图