input file常用方法:

var obj=document.getElementById("upimage");
var file=obj.files[0];//获取文件数据
var path=obj.value;//获取文件当前路径
var size=obj.files[0].size;//获取文件大小
var prefix=path.substring( path.lastIndexOf('\\')+1 );//获取文件名的前缀名(文件格式)
var suffix=path.substring(path.lastIndexOf('.')+1).toLocaleLowerCase();
//获取文件名的后缀名(文件格式)并且转换为小写

图片上传预览完整代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>上传图片</title>
<script type="text/javascript">
//下面用于图片上传预览功能
function setImagePreview() {
var obj=document.getElementById("upimage");
var imgObjPreview=document.getElementById("preview");
var src=event.target || window.event.srcElement; //获取事件源,兼容chrome/IE
//下面把路径截取为文件名
var filename=src.value;//图片完整路径
var prefix=filename.substring( filename.lastIndexOf('\\')+1 );//获取文件名的前缀名(文件格式)
var suffix=filename.substring( filename.lastIndexOf('.')+1).toLocaleLowerCase(); //获取文件名的后缀名(文件格式)
console.log(suffix);
if(suffix !='jpg' && suffix !='png'){
alert("图片格式只能为jpg 或者 png");
obj.outerHTML=obj.outerHTML;//清空选择按钮
return false;
}
if(obj.files && obj.files[0])
{
if(obj.files[0].size>2048000){
alert("文件超过2M");
obj.outerHTML=obj.outerHTML;//清空选择按钮
return false;
}
//火狐下,直接设img属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '150px';
imgObjPreview.style.height = '180px';
console.log(obj.files[0].size);
//imgObjPreview.src = obj.files[0].getAsDataURL(); //火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式
imgObjPreview.src = window.URL.createObjectURL(obj.files[0]);//写入文件流
}
else
{
obj.select();//IE下,使用滤镜
var imgSrc = document.selection.createRange().text;//路径
var localImagId = document.getElementById("imageDiv");
var img=document.getElementById("preview"); alert(localImagId.fileSize);
//必须设置初始大小
localImagId.style.width = "150px";
localImagId.style.height = "180px";
//图片异常的捕捉,防止用户修改后缀来伪造图片
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>
</head>
<body>
<div id="imageDiv"><img id="preview" src="#"></div>
<form action="upload.do" method="post" enctype="multipart/form-data">
<input type="file" id="upimage" name="file" onchange="setImagePreview()"/> <input type="submit" value="Submit" /></form>
</body>
</html>

html,图片上传预览,input file获取文件等相关操作的更多相关文章

  1. 兼容好的JS图片上传预览代码

    转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...

  2. Jquery图片上传预览效果

    uploadPreview.js jQuery.fn.extend({ uploadPreview: function (opts) { var _self = this, _this = $(thi ...

  3. [前端 4] 使用Js实现图片上传预览

    导读:今天做图片上传预览,刚开始的做法是,先将图片上传到Nginx,然后重新加载页面才能看到这个图片.在这个过程中,用户一直都看不到自己上传的文件是什么样子.Ps:我发现我真的有强迫症了,都告诉我说不 ...

  4. Javascript之图片上传预览

    使用Javascript之图片上传预览,我们无需上传到服务器中,兼容所有浏览器. 关键方法是使用微软库filter:progid:DXImageTransform.Microsoft.AlphaIma ...

  5. HTML5 图片上传预览

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...

  6. ASP.NET工作笔记之一:图片上传预览及无刷新上传

    转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...

  7. php 图片上传预览(转)

    网上找的图片上传预览: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

  8. js实现图片上传预览及进度条

    原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器<input type= ...

  9. html 图片上传预览

    Html5 upload img 2012年12月27日 20:36 <!DOCTYPE HTML> <html> <head> <meta http-equ ...

随机推荐

  1. 攻城狮在路上(陆)-- hadoop单机环境搭建(一)

    一.环境说明:     操作系统:Centos6.5 Linux node1 2.6.32-431.el6.x86_64 #1 SMP Fri Nov 22 03:15:09 UTC 2013 x86 ...

  2. 剑指Offer:面试题34——丑数(java实现)

    问题描述: 把只包含因子2.3和5的数称作丑数(Ugly Number).例如6.8都是丑数,但14不是,因为它包含因子7. 习惯上我们把1当做是第一个丑数.求按从小到大的顺序的第N个丑数. 思路1: ...

  3. centos桌面使用

    firefox添加flash插件 [root@bogon home]# cp libflashplayer.so /usr/lib64/mozilla/pl pl plugins/ plugins-w ...

  4. Effective Java 76 Write readObject methods defensively

    Principle readObject method is effectively another public constructor, and it demands all of the sam ...

  5. MySQL数据库的优化-运维架构师必会高薪技能,笔者近六年来一线城市工作实战经验

    原文地址:http://liangweilinux.blog.51cto.com/8340258/1728131 首先在此感谢下我的老师年一线实战经验,我当然不能和我的老师平起平坐,得到老师三分之一的 ...

  6. git SSh key多个key对应多个项目

    必看 1. 本文不教你怎么生成key,主要解决多个项目对应多个SSH KEY的问题,在csdn code库上遇到的人估计很苦恼,为什么多个项目不能用一个key,为什么添加相同的key就会报重复 2. ...

  7. SE 2014年4月29日

    交换网络中有vlan1 到20个vlan,要求使用MSTP技术实现vlan的负载分担. SW2为实例1(vlan1-vlan10)的主根,SW3为备根 SW3为实例2(vlan11-vlan20)的主 ...

  8. Python小代码_7_字符串的字符次数统计

    生成包含 1000 个随机字符的字符串,并统计每个字符出现的次数. import string import random #获取字符 x = string.ascii_letters + strin ...

  9. SQL-记录-005

    对于记录的操作涉及的知识比较多,分多篇文章进行梳理. 记录创建篇:记录删除篇:记录修改篇:记录查询篇:

  10. android 中的一些资源注解,让编译器帮你检查代码

    android 中的一些资源注解,让编译器帮你检查代码 写方便的时候可以用注解来声明一些参数,以明确的指示参数的类型,让代码更安全.我们看到,在android源代码里大量使用了注解.我整理了一些注解如 ...