Js实现input上传图片并显示缩略图

用这个方法就可以很方便快捷的实现上传图片并显示缩略图的效果:

FileReader 的 readAsDataURL()

先创建一个img标签,再用 fileReader 把input文件的赋值到img的src即可

具体代码如下:

function previewFile() {
  var preview = document.querySelector(‘img‘);
  var file    = document.querySelector(‘input[type=file]‘).files[0];
  var reader  = new FileReader();

  reader.onloadend = function () {
    preview.src = reader.result;
  }

  if (file) {
    reader.readAsDataURL(file);
  } else {
    preview.src = "";
  }
}
<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">

查看效果: https://codepen.io/skura23/pen/aWBGBJ

时间: 2024-10-10 08:49:05

Js实现input上传图片并显示缩略图的相关文章

js获取input上传图片装换为base64格式图片

<input name="upimage" id="upload_file" type="file"> <img src="/img/touxiang.jpg" id="showImage" ><br /><br /> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js&q

node.js 通过post上传图片并显示

首先编写最底层的请求处理程序requestHandler.js,首先要通过npm在项目所在的目录安装formidable,通过语句:npm install formidable安装,然后代码如下: var querystring = require("querystring");var fs = require("fs");var formidable = require("formidable"); function start(respons

文件和打印的技巧-上传图片以后显示缩略图

———————————————————————— <body style="text-align:center">        <div id="demo"></div>        <form action="./upload.html" target="tgt_frame" method="post"             enctype="mu

MVC图片上传并显示缩略图

前面已经说了怎么通过MVC来上传文件,那么这次就说说如何上传图片然后显示缩略图,这个的实用性还是比较大.用UpLoad文件夹来保存上传的图片,而Temp文件夹来保存缩略图,前面文件上传部分就不再重复了,不过图片上传当然只能是图片格式的文件,因此在之前那篇博客中 通过控制格式的上传便能防止恶意上传,这个是文件上传的教程链接:http://www.cnblogs.com/xmfdsh/p/3988868.html 对于数据库的设计的话就随便点: 于是用EF便自动生成了类如下: public part

PHP.25-TP框架商城应用实例-后台1-添加商品功能、钩子函数、在线编辑器、过滤XSS、上传图片并生成缩略图

添加商品功能 1.创建商品控制器[C] /www.test.com/shop/Admin/Controller/GoodsController.class.php <?php namespace Admin\Controller; use Think\Controller; //后台添加商品功能控制器 class GoodsController extends Controller { //显示和处理表单 public function add() { //判断用户是否提交了表单(如果提交了,就

MVC无刷新上传图片并显示

@{ ViewBag.Title = "Home Page"; } <script src="../../Scripts/swfobject.js" type="text/javascript"></script> <script src="../../Scripts/jquery.uploadify.v2.1.4.js" type="text/javascript">&

dedecms有缩略图则显示缩略图,没有则显示随机缩略图

随着html5以及扁平化等新的设计概念的深入人心,缩略图功能则成了一般网页模版制作不可或缺的一个功能,dedecms默认的的缩略图调用标签[field:imglink/] 或者 [field:litpic/],在文章有缩略图的时候会调用缩略图,没有的时候就调用默认图片defaultpic.gif,但是会有各种意外的情况导致文章内没有配图,只是显示默认的图片的话,页面美观上就得不到保证,前面还有人分享过一篇通过js来实现随机缩略图的,具体使用起来的话,还是觉得有些鸡肋,今天的话给大家分享一个新的解

正则及JS限制input输入类型

1.只能输入和粘贴汉字 <input onkeyup="value=value.replace(/[^u4E00-u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^u4E00-u9FA5]/g,''))"><br/> 3.只能输入和粘贴数字 <input onkeyup="this

php 使用GD库上传图片以及创建缩略图

php 使用GD库上传图片以及创建缩略图 GD库是PHP进行图象操作一个很强大的库. 先在php.ini里增加一行引用:extension=php_gd2.dll 重启apache.做一个测试页 var_dump(gd_info());输出数据表明GD库引用成功. 图片上传页面 upload.html <html><head><meta http-equiv='Content-Type' content='text/html; charset=utf-8'><ti