css 代码:

.container{
width: 200px;
height: 200px;
border: 1px solid #666;
}

HTML 代码:

<input type="file" id="photo">
<div class="container"></div>

JavaScript 代码:

document.getElementById("photo").addEventListener("change",function(e){
var files =this.files;
var img = new Image();
var reader =new FileReader();
reader.readAsDataURL(files[0]);
reader.onload =function(e){
var dx =(e.total/1024)/1024;
if(dx>=2){
alert("文件大小大于2M");
return;
}
img.src =this.result;
img.style.width ="100%";
img.style.height ="90%";
document.querySelector('.container').appendChild(img);
}
})

FileReader 是html5提供读取文件的api,作用是把文本流按指定格式读取到缓存。

FileReader 有四种读取文件的方式:

  readAsBinaryString、readAsDataURL、readAsText、readAsArrayBuffer;

基于预览上传后图片的需求,需要将图片读取为DataURL。

点击这里:自定义样式上传图片

使用input做简单的上传图片的更多相关文章

  1. 利用php的序列化和反序列化来做简单的数据本地存储

    利用php的序列化和反序列化来做简单的数据本地存储 如下程序可以做为一个工具类 /** * 利用php的序列化和反序列化来做简单的数据本地存储 */ class objectdb { private ...

  2. html中如何修改选中 用input做的搜索框 的边框颜色

    html中如何修改选中 用input做的搜索框 的边框颜色 如图,当我鼠标选中输入框时,内边框会变成蓝色 我的问题是: 1.如何把蓝色去掉? 2.如何改成别的颜色? 首先感谢 UI设计师提出的需求,解 ...

  3. laravel 简单的上传图片

     /** * laravel 简单的上传图片* @param Request $request* @return View*/public function upload(Request $reque ...

  4. 阿里云api调用做简单的cmdb

    阿里云api调用做简单的cmdb 1 步骤 事实上就是调用阿里api.获取可用区,比方cn-hangzhou啊等等.然后在每一个区调用api 取ecs的状态信息,最好写到一个excel里面去.方便排序 ...

  5. Java用户输入数值,做简单的猜数字游戏,导入基础的工具包util

    Java用户输入数值,做简单的猜数字游戏,导入基础的工具包util,导入包的方法为,import java.util.*: 完整的实例代码: /* 导入基础工具包 */ import java.uti ...

  6. 使用jmeter做简单的场景设计

    使用jmeter做简单的场景设计 Jmeter: Apache JMeter是Apache组织开发的基于Java的压力测试工具.用于对软件做压力测试.我之所以选择它,最重要的一点就是----开源 个人 ...

  7. Mycat 做简单的读写分离(转载)

    大漠小狼的个人空间   http://www.51testing.com/html/34/369434-3686088.html 使用Mycat 做简单的读写分离(一) 原本使用的是amoeba做的读 ...

  8. 使用google API之前需要對input 做什麼 安全性的處理?

    我正要使用node.js 和 google map api做一个小应用,Google MAP API的使用URL如下: https://maps.googleapis.com/maps/api/pla ...

  9. Python做简单的字符串匹配详解

    Python做简单的字符串匹配详解 由于需要在半结构化的文本数据中提取一些特定格式的字段.数据辅助挖掘分析工作,以往都是使用Matlab工具进行结构化数据处理的建模,matlab擅长矩阵处理.结构化数 ...

随机推荐

  1. angular4套用primeng样式

    首先安装primeng cnpm install primeng --save 这样会在项目目录中增加node_modules\primeng目录 package.json文件增加了以下一行 &quo ...

  2. 【APUE】第3章 文件I/O (1)

    1.文件描述符 对于内核来说,所有打开的文件都通过文件描述符来引用.文件描述符是一个非负整数.当打开一个现有的文件或者创建一个新文件时,内核向进程返回一个文件描述符.当读.写一个文件时,使用open或 ...

  3. 造一个轮子然后安装到pypi上

    之前写了一个爬虫的包,主要是根据自己写爬虫的情况总结一下. 因为每次都要重复写一些代码,所以提炼出来,类似一个框架的样子吧. 开始是放在自己的项目里引用,但如果换了一个项目,就得重新拷一遍,很麻烦. ...

  4. c# 操作excle[转]

    //引用Microsoft.Office.Interop.Excel.dll文件 //添加using using Microsoft.Office.Interop.Excel; using Excel ...

  5. mono 的System.Data.SqlClient小记录

    厦门-JuzzPig()  15:33:36System.Data.SqlClient 不科学的广州-PC286()  15:33:42webservice 返回的是 xml厦门-JuzzPig()  ...

  6. Win10 VS2015 静态编译Qt5.6.2源码

    由于VS2015需要CRT等拓展组件,因此把内部编写的工具软件以静态发布,固需要编译Qt源码.Qt5.6.2版本,VS2015,Win10 1.安装python,perl,下载jom 2.改文件com ...

  7. 【文档】六、Mysql Binlog版本

    binlog文件格式有以下几种: v1:用于3.23版本 v3:用于4.0.2到4.1版本 v4:用于5.0及以上版本 v2版本只在4.0.x版本中使用,目前已经不再支持了. 处理binlog的程序必 ...

  8. mongodb启动失败:child process failed, exited with error number 100

    参考 http://www.dataguru.cn/thread-107361-1-1.html 里面的路径 根据自己的--dbpath的路径  和l--logpath路径去找

  9. javac之向前引用

    可以参考JLS7:https://docs.oracle.com/javase/specs/jls/se7/html/jls-8.html#jls-8.3.2.3 public class Test5 ...

  10. JavaScript设计模式-11.桥梁模式

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...