js本地预览图片

时间：2021-02-19 03:45:15

废话不说  直接上代码

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<body>
 <img id="image" src=""/>
<br/>
 <input type="file" id="file" onchange="selectImage(this);"/> <br>
<br/>
<script>
    function selectImage(file) {
        alert(file.value.substring(file.value.lastIndexOf('.')));
        if (!file.files || !file.files[0]) {
            return;
        }
        var reader = new FileReader();
        reader.onload = function (evt) {
            var data = evt.target.result;  
            //加载图片获取图片真实宽度和高度  
            var image = new Image();  
            image.onload=function(){  
                var width = image.width;  
                var height = image.height;  
                alert(width+'======'+height+"====="+file.files[0].size+'1');  
            };  
            image.src= data;  
            document.getElementById('image').src = evt.target.result;
        }

        reader.readAsDataURL(file.files[0]);
        $("#image").attr({'width':'100px','height':'100px'});
    }

</script>
</body>
</html>

js本地预览图片的更多相关文章

  1. js 本地预览图片和得到图片实际大小

    //填充预览图片 function adpter(file, upfile) { var imgName = new Date().getTime() + file.name.substr(file. ...

  2. 本地预览图片html和js例子

    本地预览图片html和js例子,直接上代码吧. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml&quot ...

  3. FileReader本地预览图片

    <body> <p><label>请选择一个图像文件:</label><input type="file" id=" ...

  4. js在本地预览图片

    移动web <body> <form enctype="multipart/form-data" name="form1"> 上传文件: ...

  5. H5实现本地预览图片

    我们使用H5可以很容易的实现图片上传前对其进行预览的功能 Html代码如下: <!DOCTYPE html> <html lang="en"> <he ...

  6. 浏览器 本地预览图片 window&period;url&period;createobjecturl

    第一种方式 <script type="text/javascript"> function setImagePreview() { var docObj = docu ...

  7. js基础进阶--图片上传时实现本地预览功能的原理

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 最近在项目上加一个图片裁剪上传的功能,用的是cropper插件,注意到选择本地图片后就会有预览效果,这里整理一下这种预览效 ...

  8. js实现上传图片本地预览功能以及限制图片的文件大小和尺寸大小

    方法一: js: /**     * 上传图片本地预览方法     * @param {Object} fileObj 上传文件file的id元素  fresh-fileToUpload      * ...

  9. 用js实现预览待上传的本地图片

    js实现预览待上传的本地图片,代码如下: <form name="form5" id="form5" method="post" ac ...

随机推荐

  1. UITableView详解（转）

    首先.对UITableView进行讲解,下面有对它进行实际的应用 UITableView 显示大型内容的列表 单行,多列 垂直滚动,没有水平滚动 大量的数据集 性能强大,而且普遍存在于iPhone的应 ...

  2. Upcase 将edit1中的每个字符串改为首字母大写

    //将edit1中的每个字符串改为首字母大写 procedure TForm1.Edit1KeyPress(Sender: TObject; var Key: Char);begin    with ...

  3. Android开发中用到的框架、库介绍

    Android开发中用到的框架介绍,主要记录一些比较生僻的不常用的框架,不断更新中...... 网路资源:http://www.kuqin.com/shuoit/20140907/341967.htm ...

  4. SQL2008 &&num;39&semi;OFFSET&&num;39&semi; 附近有语法错误。 在 FETCH 语句中选项 NEXT 的用法无效。

    'OFFSET' 附近有语法错误.在 FETCH 语句中选项 NEXT 的用法无效. 说明: 执行当前 Web 请求期间,出现未经处理的异常.请检查堆栈跟踪信息,以了解有关该错误以及代码中导致错误的出 ...

  5. 3D人脸识别预处理&comma;3D face recognition preprocess

    本文由兔崩溃公布http://blog.csdn.net/smartempire/article/details/31373817. 转载请注明出处.howdeshui#163.com 近期在做三维人 ...

  6. 【转】协同开发中SVN使用规范试用

    转自:http://www.cnblogs.com/BraveCheng/archive/2012/07/02/2573617.html 协同开发中SVN使用规范试用 目标,要求 本次svn提交规范主 ...

  7. webpack项目搭建

    1.新建一个文件目录,命令行进入当前目录,输入npm init 创建package.json文件 2.安装项目依赖webpack模块: npm install webpack --save-dev 3 ...

  8. Kafka错误&OpenCurlyDoubleQuote;Network is unreachable”和&OpenCurlyDoubleQuote;larger than available brokers”

    确定Kafka安装和启动正确,ZooKeeper可以查到所有的Brokers,但执行: kafka-topics.sh --create --zookeeper localhost:2181 --re ...

  9. php写文件操作

    function writeLog($file, $msg, $mode='a+') { $fp = fopen($file, $mode); if(flock($fp, LOCK_EX)) { fw ...

  10. JavaScript Web 应用最佳实践分析

    [编者按]本文作者为 Mathias Schäfer,旨在回顾在客户端大量使用JavaScript 的最佳 Web应用实践.文章系国内 ITOM 管理平台 OneAPM 编译呈现. 对笔者来说,Jav ...

相关文章