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. fhq_treap 学习笔记

    前言:昨天写NOIp2017队列,写+调辗转了3h+,不知道怎么的,就点进了一个神仙的链接,便在今日学习了神仙的fhq_treap. 简介:fhq_treap功能强大,支持splay支持的所有操作,代 ...

  2. [学习笔记]FFT——快速傅里叶变换

    大力推荐博客: 傅里叶变换(FFT)学习笔记 一.多项式乘法: 我们要明白的是: FFT利用分治,处理多项式乘法,达到O(nlogn)的复杂度.(虽然常数大) FFT=DFT+IDFT DFT: 本质 ...

  3. 【初级算法】6. 两个数组的交集 II

    题目如下: 给定两个数组,写一个方法来计算它们的交集. 例如: 给定 nums1 = [, , , ], nums2 = [, ], 返回 [, ]. 注意: 输出结果中每个元素出现的次数,应与元素在 ...

  4. Spring源码解析-autowiring自动装配的实现

    IoC容器提供了自动依赖装配的方式,为应用IoC容器提供很大的方便.在自动配置中,不需要显式的去指定Bean属性,只需要配置autowiring属性,IoC容器会根据这个属性配置,使用反射的方式查找属 ...

  5. ACE线程管理机制-面向对象的线程类ACE_Task

    转载于:http://www.cnblogs.com/TianFang/archive/2006/12/05/583231.html 我们在前一章中使用ACE_Thread包装时,你一定已经注意到了一 ...

  6. HDU1522 稳定婚姻匹配 模板

    Marriage is Stable Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Other ...

  7. redis安装----非基于lnmp安装

    在 Ubuntu 系统安装 Redi 可以使用以下命令: $sudo apt-get update $sudo apt-get install redis-server 启动 Redis $ redi ...

  8. 应用Hash函数

    本文系转载,转自:http://www.blogjava.net/jinfei0627/articles/219543.html 应用Hash函数(java描述) 作者:冲处宇宙 时间:2007.1. ...

  9. 最新eclipse安装SVN插件

    转载自:http://welcome66.iteye.com/blog/1845176 eclipse里安装SVN插件,一般来说,有两种方式: 直接下载SVN插件,将其解压到eclipse的对应目录里 ...

  10. springboot整合thumbnailator实现图片压缩

    springboot整合thumbnailator实现图片压缩 前言 最近由于首页产品列表图片显示太慢,经过研究发现是用户上传的图片太大. 针对这个问题,想到的解决方案是: 1. 产品上传时,限定图片 ...