<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片上传缩略图预览</title>
<script language="JavaScript" type="text/javascript">
var allowExt = ['jpg', 'gif', 'bmp', 'png', 'jpeg'];
var preivew = function (file, container) {
try {
var pic = new Picture(file, container);
}
catch (e) {
alert(e);
}
}
//缩略图类定义
var Picture = function (file, container) {
try {
var height = ,
widht = ,
ext = '',
size = ,
name = '',
path = '';
var self = this;
if (file)
{
name = file.value;
if (window.navigator.userAgent.indexOf("MSIE") >= ) {
var browser = navigator.appName;
var b_version = navigator.appVersion
var version = b_version.split(";");
var trim_Version = version[].replace(/[ ]/g, ""); if (trim_Version == "MSIE6.0") {
file.select();
//path = document.selection.createRange().text;
path = window.URL.createObjectURL(file.files[]);
} else if (trim_Version == "MSIE7.0") {
file.select();
//path = document.selection.createRange().text;
path = window.URL.createObjectURL(file.files[]);
} else if (trim_Version == "MSIE8.0") {
file.select();
//path = document.selection.createRange().text;
path = window.URL.createObjectURL(file.files[]);
} else {
file.select();
//file.blur();
//path = document.selection.createRange().text;
path = window.URL.createObjectURL(file.files[]);
}
}
else if (window.navigator.userAgent.indexOf("Firefox") >= ) {
if (file.files) {
path = file.files.item().getAsDataURL();
} else {
path = file.value;
}
}
}
else {
throw "bad file";
}
ext = name.substr(name.lastIndexOf("."), name.length);
if (container.tagName.toLowerCase() != 'img') {
throw "container is not a valid img label";
container.visibility = 'hidden';
}
container.src = path;
container.alt = name;
container.style.visibility = 'visible';
height = container.height;
widht = container.widht;
size = container.fileSize;
this.get = function (name) {
return self[name];
}
this.isValid = function () {
if (allowExt.indexOf(self.ext) !== -) {
throw 'the ext is not allowed to upload';
return false;
}
}
}
catch (e) {
alert("R:"+e);
} /***
*读取,图片为流文件
***/
/*
var reader = new FileReader();
reader.onload = function(e)
{
console.log(e.target.result);
alert(e.target.result);
var fromData = new FormData();
fromData.append("base64", e.target.result);
}
reader.readAsDataURL(document.querySelector("input[type=file]").files[0]);
*/
}
</script>
</head>
<body>
<div class='previewDemo'>
<input id="file" type="file" onchange="preivew(this, document.getElementById('img'));" />
<br />
<img id="img" style="visibility:hidden" height="100px" width="100px" /> </div>
</body>
</html>

javascript 图片上传缩略图预览的更多相关文章

  1. html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  2. ASP.NET MVC图片上传前预览

    回老家过春节,大半个月,在家的日子里,吃好睡好,人也长了3.5Kg.没有电脑,没有网络,无需写代码,工作上相关的完全放下......开心与父母妻儿过个年,那样的生活令Insus.NET现在还在留恋.. ...

  3. 图片上传本地预览。兼容IE7+

    基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari 预览地址:http://www.jinbanmen.com/test/1.html js代码:/**名称 ...

  4. DevExpress控件使用系列--ASPxUploadControl(图片上传及预览)

        1.控件功能     列表控件展示数据.弹框控件执行编辑操作.Tab控件实现多标签编辑操官方说明 2.官方示例       2.1 ASPxImage                http: ...

  5. uploadPreview 兼容多浏览器图片上传及预览插件使用

    uploadPreview兼容多浏览器图片上传及预览插件 http://www.jq22.com/jquery-info2757 Html 代码 <div class="form-gr ...

  6. js实现图片上传及预览---------------------->>兼容ie6-8 火狐以及谷歌

    <head runat="server"> <title>图片上传及预览(兼容ie6/7/8 firefox/chrome)</title> & ...

  7. file标签 - 图片上传前预览 - FileReader & 网络图片转base64和文件流

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  8. input file实现多选,限制文件上传类型,图片上传前预览功能

    限制上传类型 & 多选:① accept 属性只能与 <input type="file" /> 配合使用.它规定能够通过文件上传进行提交的文件类型. ② mu ...

  9. 【转】html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

随机推荐

  1. SpingBoot:Unregistering JMX-exposed beans on shutdown

    运行之后控制台输出“Unregistering JMX-exposed beans on shutdown”原因为:SpringBoot内置Tomcat没有正常启动,加入spring-boot-sta ...

  2. Spring AOP深入理解之拦截器调用

    Spring AOP深入理解之拦截器调用 Spring AOP代理对象生成回想 上一篇博客中:深入理解Spring AOP之二代理对象生成介绍了Spring代理对象是怎样生成的,当中重点介绍了JDK动 ...

  3. Linux网卡高级命令

    网卡的高级命令 [root@gechong ~]# mii-tool No interface specified usage: mii-tool [-VvRrwl] [-A media,... | ...

  4. EXCEPTION-SPRING

      CreateTime--2016年8月23日09:00:47Author:Marydon 声明:异常类文章主要是记录了我遇到的异常信息及解决方案,解决方案大部分都是百度解决的,(这里只是针对我遇到 ...

  5. exception ORA-00918: 未明确定义列

      exception ORA-00918: 未明确定义列 CreateTime--2018年5月9日16:08:48 Author:Marydon 1.错误代码展示 SELECT G.* FROM ...

  6. eclipse to avoid the message, disable the...

      标题 CreateTime--2018年5月9日10:38:15 Author:Marydon 1.问题描述 2.问题解析 这是因为eclipse的智能提示超时引起的,将超时间调大即可,如:200 ...

  7. JAVA遍历Map的方法

    import java.util.HashMap; import java.util.Iterator; import java.util.Map; public class TestMap { pu ...

  8. lambda 2

    # -*- coding: utf-8 -*- #python 27 #xiaodeng def action(x): return (lambda y:x+y) act=action(99) pri ...

  9. Tomcat 错误代号集

    收集了一些常见的tomcat 错误代号以及附上状态代码  状态信息  含义.希望对大家有帮助. 状态代码  状态信息  含义100  Continue  初始的请求已经接受,客户应当继续发送请求的其余 ...

  10. 升级 asp.net core 1.1 到 2.0 preview

    Upgrading to .NET Core 2.0 Preview 1 更新 依赖的类库 改为 标准库 2 web app  更改 csproj 文件---升级版本 <PropertyGrou ...