js获取 input file 图片缩略图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<input type=file name="doc" id="doc" onchange="javascript:setImagePreview();">
<p>
<div id="localImag"><img id="preview" width=-1 height=-1 style="diplay:none" /></div>
</p>
<script>
function setImagePreview() {
var docObj=document.getElementById("doc");
var imgObjPreview=document.getElementById("preview");
if(docObj.files && docObj.files[0]){
//火狐下,直接设img属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '300px';
imgObjPreview.style.height = '120px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();
//火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
}else{
//IE下,使用滤镜
docObj.select();
var imgSrc = document.selection.createRange().text;
var localImagId = document.getElementById("localImag");
//必须设置初始大小
localImagId.style.width = "300px";
localImagId.style.height = "120px";
//图片异常的捕捉,防止用户修改后缀来伪造图片
try{
localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
}catch(e){
alert("您上传的图片格式不正确,请重新选择!");
return false;
}
imgObjPreview.style.display = 'none';
document.selection.empty();
}
return true;
}
</script>
</body>
</html>
js获取 input file 图片缩略图的更多相关文章
- 上传图片预览JS脚本 Input file图片预览的实现示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js 获取input file路径改变图像地址
html代码 <img id="newImage" alt="100x100" src="__PUBLIC__/img/1.jpg" ...
- 一段上传图片预览JS脚本,Input file图片预览的实现
在深圳做项目的时候,需要一个用户上传头像预览的功能!是在网上找了好多,都不太满意.要么是flash的,要么是Ajax上传后返回图片路径的,要么压根就是不能用的.幸运的是在这个项目以前有人写过一个图片预 ...
- js获取input file路径改变图像地址
版权声明:好歹是我写的或者总结的或者抄的,总待给我个名份吧~ https://blog.csdn.net/sangjinchao/article/details/52250318 html代码 < ...
- js获取input file完整路径的方法
function getPath(){ //判断浏览器 var Sys = {}; var obj = document.getElementById("headImg"); ...
- js 获取 input file 文件 附给 image src
var a=document.querySelector('input[type=file]'); a.onchange = function (e) { //var reader = new Fil ...
- js获取input file文件二进制码
<html> <body> <img id="image"src=""/> <br/> <input ty ...
- js 获取input type="file" 选择的文件大小、文件名称、上次修改时间、类型等信息
文件名的传递 ---全路径获取 $('#file').change(function(){ $('#em').text($('#file').val()); }); 文件名的传递 ---只获取文件名 ...
- js清空input file的值
原文:js清空input file的值 在做选择本地图片上传的功能时遇到一个问题,第一次点file按钮选择图片完成会触发onchange事件,获取文件后动态在界面上创建img标签展示,但把创建的img ...
随机推荐
- Asp.Net中JSON的序列化和反序列化-----JavaScriptSerializer ,加上自己工作心得
在工作中和手机通信用到web服务和javascriptSerializer,返回json数据,供手机端调用,一开始返回的数据是一大堆,比如 [{"word_picture9":&q ...
- js参数截取
原代码: function GetQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^& ...
- C# 将对象序列化为Json格式
public static string JsonSerializer<T>(T t) { DataContractJsonSerializer ser = new DataContrac ...
- silverlight visifire控件图表制作——silverlight 后台方法画图
1.调用wcf 获取信息 private void svc_GetSingleChartDataCompleted(object sender, GetSingleChartDataCompleted ...
- .net后台 Silverlight 页面 动态设置 ASPX 页面 控件的Margin值(位置设置)
silverlight后台代码:using System.Windows.Browser;public Page1(){HtmlPage.RegisterScriptableObject(" ...
- JDBC 异常特殊原因 (数据库只读解决办法)
JDBC 异常特殊原因 有时候并不是因为程序写的有问题 ,是因为 数据库只读 在sqlserver2005中附加数据库时,附加的数据库会变成只读的,只能进行查询操作. 解决方法: 1 打开Sq ...
- 支付宝SDK快速入口链接
支付宝快捷支付SDK官方网站
- String类的使用说明
(1)Length()取一个字符串的长度:public int length(); public calss StringLength1{ public static void main(String ...
- 宏定义中使用do{}while(0)的好处 (转载)
宏定义中使用do{}while(0)的好处 #define MACRO_NAME(para) do{macro content}while(0) 的格式,总结了以下几个原因: 1,空的宏定 ...
- 洛谷 P3392 涂国旗
P3392 涂国旗 题目描述 某国法律规定,只要一个由N*M个小方块组成的旗帜符合如下规则,就是合法的国旗.(毛熊:阿嚏——) 从最上方若干行(>=1)的格子全部是白色的. 接下来若干行(> ...