怎么简单获取input file 选中的图片,并在一个div的img里面赋值src实现预览?
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title>
<script src="dist/jquery1.11.1.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="file_upload" type="file" />
<div class="image_container">
<img id="preview" width="" height="">
</div>
</div>
</form>
</body>
</html>
<script>
$(function () {
$("#file_upload").change(function () {
var $file = $(this);
var fileObj = $file[];
var windowURL = window.URL || window.webkitURL;
var dataURL;
var $img = $("#preview"); if (fileObj && fileObj.files && fileObj.files[]) {
dataURL = windowURL.createObjectURL(fileObj.files[]);
$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; }
});
}); </script>
怎么简单获取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实现预览
代码如下利用html5实现:几乎兼容所有主流浏览器,当然IE必须是IE 6以上 [jquery代码] $(function() { $("#file_upload").change ...
- 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 ...
随机推荐
- C++以对象管理资源
先看下面一段代码: class Node {}; Node* CreateNode() { } void Solve() { Node *p=CreateNode(); //调用CreateNode函 ...
- SRM 588 DIV1
250 题意:有n首不同的曲子,你唱每首曲子需要花费a的时间以及一个调整的时间b,调整的时间为此首歌的曲调减去上一首歌的曲调的绝对值. 思路:我们用dp[i][k]表示前i首歌只唱k首用的最小时间花费 ...
- 常用js或jq效果汇总
实时监控输入框改变 $('#password').bind('input propertychange', function() {}
- html - 自动播放音乐
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- DEDECMS里面DEDE函数解析
下面来解说下DEDECMS织梦CMS模板里面的函数说明 在文件include/inc_function.php里面 GetCurUrl() 获贴切前的脚本的URL GetAlabNum($str) 把 ...
- 【转】CSRF攻击的应对之道
CSRF 背景与介绍CSRF(Cross Site Request Forgery, 跨站域请求伪造)是一种网络的攻击方式,它在 2007 年曾被列为互联网 20 大安全隐患之一.其他安全隐患,比如 ...
- swift 2.x学习笔记(一)
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #008400 } p.p2 { margin: 0.0px 0. ...
- jQuery extend 实现代码封装
jQuery 有两种方式封装代码 $.extend 和 $.fn.extend,我们也称为封装插件 $.extend DEMO // 封装 $.extend({ say:function(option ...
- 关于对于IT我自己的见解以及我踩过的坑(需要认真读文章才能理解我所遇到的坑.)
终于开始下决心写下这篇文章了. 就在写这篇总结文章的前天还是今天,我度过了我的17岁生日,正式踏入了已成年人的路程.生日那天我在想今夜必定要做件比较有意义的事,于是乎我想到两件比较可以证明自己是成年人 ...
- Vue 双层嵌套
这种的需要双层嵌套. 代码: <table id="ict-table" class="ict-table ict-report-table blue-theme& ...