在项目中遇到用input标签file类型的文件上传,想实在上传之前进行图片的预览功能;之前的做的一个解决方案是文件先上传上去然后返回地址再显示在页面上,这样就不太好,因为用户基本信息可能并没有保存,但是图片却已经改变,如果在需要改变就导致了多余图片的保存服务器。

如下可实现代码预览:

1、直接添加图片预览

<input type='file' id='file' />

<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function() {
  $("#file").change(function(e) {
    var file = e.target.files[] || e.dataTransfer.files[](weizhi);
    if(file) {
      var reader = new FileReader();
      reader.onload = function() {
        $("body").append("<img src='" + this.result + "'/>");
      } 
      reader.readAsDataURL(file);
    }
  });
})
</script>

2、点击预览

<input type="file" id="file" multiple />
<input type="button" value="读取图像" onclick="readAsDataURL()" />
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    function readAsDataURL() {
      var file = $("#file").get(0).files;
      // var file = document.getElementById("file").files;
      for(i = ; i < file.length; i++) {
        reader.readAsDataURL(file[i]);
        reader.onload = function(e) {
        //多图预览
        $("body").append('<img src="' + this.result + '" alt="" />');
        }
      }
    }
</script>

 

input[type="file"]的图片预览的更多相关文章

  1. vue <input type="file">上传图片、预览、删除

    使用原生<input type="file">上传图片.预览.删除:multiple实现可上传多张 参数名 类型 说明 fileTypes Array 文件类型, 默认 ...

  2. input type=file 选择图片并且实现预览效果的实例

    为大家带来一篇input type=file 选择图片并且实现预览效果的实例. 通过<input />标签,给它指定type类型为file,可提供文件上传: accept:可选择上传类型, ...

  3. jquery解决file上传图片+图片预览

    js解决file上传图片+图片预览 demo案例中代码为js原生控制,可以根据项目的需求修改为jquery操作 <!DOCTYPE html><html lang="en& ...

  4. input type=file实现图片上传,预览以及图片删除

    背景 前两天在做一个PC网站的意见反馈,其中涉及到了图片上传功能,要求可以上传多张图片,并且支持图片上传预览及图片删除, 图片上传这一块以前没怎么搞过,而且一般也很少会碰到这样的需求,所以在做这个功能 ...

  5. html input type=file 选择图片,图片预览 纯html js实现图片预览

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. input type=file 选择图片并且实现预览效果

    通过<input />标签,给它指定type类型为file,可提供文件上传: accept:可选择上传类型,如:只要传图片,且不限制图片格式,为image/*: multiple:规定是否 ...

  7. input type="file"多图片上传 原生html传递的数组集合

    单个的input type="file"表单也是可以实现多图片上传的 代码如下: <form action="manypic.php" method=&q ...

  8. input type="file"多图片上传

    单个的input type="file"表单也是可以实现多图片上传的 代码如下: <form action="manypic.php" method=&q ...

  9. input type=file实现图片上传

    <label for="file"> <img src="images/morende.jpg" alt=""> & ...

随机推荐

  1. js 判断设备的来源

    function deviceType(){ var ua = navigator.userAgent; var agent = ["Android", "iPhone& ...

  2. python 一句话输出26个英文字母

    chr(i) # return i character ord(c) # return integer >>> [chr(i) for i in range(97,123)] ['a ...

  3. hiho 1476 - 矩形计数 容斥

    题目链接 如图所示,在由N行M列个单位正方形组成的矩形中,有K个单位正方形是黑色的,其余单位正方形是白色的. 你能统计出一共有多少个不同的子矩形是完全由白色单位正方形组成的吗? ----------- ...

  4. 用Javascript做一个“获取验证码”的按钮

    要求:①点击按钮后背景色会发生改变②有倒计时(一般为30秒) <!DOCTYPE HTML> <html> <head> <meta charset=&quo ...

  5. Python介绍与学习

    Python是一种面向对象的解释型计算机程序设计语言,由荷兰人Guido van Rossum于1989年发明,第一个公开发行版发行于1991年. Python是纯粹的自由软件, 源代码和解释器CPy ...

  6. node——Commonjs

    ECMA只规范了js最近的一些能力,并没有规范当要用js写一个庞大的项目如果使用模块化开发. CommonJS规范了当我们想开发大型程序的时候如何模块化来开发,以及模块化的时候,不同文件的通讯. Co ...

  7. SQL中Group By的使用(转)

    1.概述 “Group By”从字面意义上理解就是根据“By”指定的规则对数据进行分组,所谓的分组就是将一个“数据集”划分成若干个“小区域”,然后针对若干个“小区域”进行数据处理. 2.原始表 3.简 ...

  8. S5PV210 三个Camera Interface/CAMIF/FIMC的区别

    S5PV210有三个CAMIF单元,分别为CAMIF0 CAMIF1和CAMIF2.对应着驱动中的fimc0, fimc1, fimc2.在三星datasheet和驱动代码中CAMIF和FIMC(Fu ...

  9. xmllint命令

    xmllint是一个很方便的处理及验证xml的工具,linux下只要安装libxml2就可以使用这个命令,下面整理一些常用功能 1. --format 此参数用于格式化xml,使其具有良好的可读性. ...

  10. STL_算法_对全部元素排序(sort、stable_sort)

    C++ Primer 学习中. . .   简单记录下我的学习过程 (代码为主) //大部分容器适用.不适用于list容器 sort(b,e) sort(b,e,p) stable_sort(b,e) ...