获取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 ...
随机推荐
- 怎么在cmd中输入mysql就可以进去mysql控制台
执行命令 设置cmd以管理员身份运行
- python学习二,字符串常用操作
字符串可以说是在日常开发中应用最广泛的了,现在来总结下有关python中有关字符串一些常用操作 首先我们声明一个字符串变量 str = "hello world" 下面我们来依次介 ...
- Hexo 相册实践
灵感 想给自已的blog添加一个相册功能.给生活中的点点滴滴留影记录.搜寻网络上给Next主题添加相册功能的基本上没有,只能重头到尾开始一点点的实践. 大致的想法: 1. 相册展示类似于归档一 ...
- tac---反转输出文件
tac命令用于将文件已行为单位的反序输出,即第一行最后显示,最后一行先显示.
- 二进制部署mysql5.6
二进制部署不用编译直接配置环境,初始化就可以使用了下面是官网给的方法: MySQL 二进制安装解决依赖yum install libaio shell> yum search libaio # ...
- 【Codeforces Round #460 (Div. 2) C】 Seat Arrangements
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 用pre[i][j]表示第i行前j列的和. 然后枚举连续座位的最左上点. (有两种可能向右或向下k个. 则还需要处理出pre2[i] ...
- 局域网内机器不能对ping问题
局域网内有台A机器能ping同其他机器,但其他机器不能ping A机器.属于同一个网段 解决办法: cmd->msconfig->常规->诊断启动,仅加载基本设备和服务. 重启后试下 ...
- C# ArcGIS Engine 线打断
/// <summary> /// 打断线,用于在点击点处,打断该条线 /// </summary> /// <param name="t_pLineFeatu ...
- hdoj-1016-Prime Ring Problem【深搜】
Prime Ring Problem Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
- Unityclient通信測试问题处理(一)
Unityclient通信測试问题处理(一) 近期在測试程序的通信模块时.遇到了一个问题:Unity的API函数仅仅能在主线程中调用.而作为client程序,我单独启用了一个监听线程来接收服务端发送的 ...