<p>
<label>请选择一个文件:</label>
<input type="file" id="file" multiple="multiple" onchange="readAsDataURL()"/>
</p>
<div id="result" name="result"></div>

  

<script>  
  var result=document.getElementById("result");
  var file=document.getElementById("file");   function readAsDataURL(){
    var file = document.getElementById("file").files;
    var result=document.getElementById("result");     for(i = 0; i< file.length; i ++) {
      var reader = new FileReader();
      reader.readAsDataURL(file[i]);
      reader.onload=function(e){
    //多图预览
    result.innerHTML = result.innerHTML + '<img src="' + this.result +'" alt="" />';
      }       }    } </script>

  

hTML5 多图上传预览的更多相关文章

  1. js 移动端 多图上传 预览 删除 base64转为url 传给后端

    说下主要的逻辑,首先是利用input type="file",上传文件,然后判断文件类型是否是图片,这里要注意(multiple,安卓一次一张,ios可以多张). 接着把本地图片转 ...

  2. HTML5 图片上传预览

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...

  3. 用html5文件api实现移动端图片上传&预览效果

    想要用h5在移动端实现图片上传&预览效果,首先要了解html5的文件api相关知识(所有api只列举本功能所需): 1.Blob对象  Blob表示原始二进制数据,Html5的file对象就继 ...

  4. HTML5图片上传预览

    HTML5实现图片的上传预览,需要使用FileReader对象. FileReader: The FileReader object lets web applications asynchronou ...

  5. js前端实现多图图片上传预览

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  6. 用file标签实现多图文件上传预览

    效果图: js 代码: <script> //下面用于多图片上传预览功能 function setImagePreviews(avalue) { var docObj = document ...

  7. ux.plup.File plupload 集成 ux.plup.FileLis 批量上传预览

    //plupload 集成 Ext.define('ux.plup.File', { extend: 'Ext.form.field.Text', xtype: 'plupFile', alias: ...

  8. 兼容好的JS图片上传预览代码

    转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...

  9. [前端 4] 使用Js实现图片上传预览

    导读:今天做图片上传预览,刚开始的做法是,先将图片上传到Nginx,然后重新加载页面才能看到这个图片.在这个过程中,用户一直都看不到自己上传的文件是什么样子.Ps:我发现我真的有强迫症了,都告诉我说不 ...

随机推荐

  1. android classloader双亲托付模式

    概述 ClassLoader的双亲托付模式:classloader 按级别分为三个级别:最上级 : bootstrap classLoader(根类载入器) : 中间级:extension class ...

  2. Spring_day01--课程安排_Spring概念_IOC操作&IOC底层原理&入门案例_配置文件没有提示问题

    Spring_day01 Spring课程安排 今天内容介绍 Spring概念 Spring的ioc操作 IOC底层原理 IOC入门案例 配置文件没有提示问题 Spring的bean管理(xml方式) ...

  3. __file__

    __file__ 是 python 的内置变量它的值等于文件名本身 [root@localhost ~]$ cat test.py #!/usr/bin/env python print(__file ...

  4. 第三篇:C++ 中的几种初始化

    前言 阅读C++教材时,想必你听过复制初始化,直接初始化,值初始化这三个概念吧.笔者本人常将其混淆,遂在此记录下它们的具体含义以便日后查阅. 复制初始化( copy-initialization ) ...

  5. Ubuntu 16.04 安装 Phpmyadmin 出现的问题及解决

    ubuntu 16.04 install phpmyadmin $ apt install phpmyadmin 安装时出现一个错误: An error occurred while installi ...

  6. Struts2中解决表单重复提交

    3. 表单的重复提交问题 1). 什么是表单的重复提交 > 在不刷新表单页面的前提下:  >> 多次点击提交按钮 >> 已经提交成功, 按 "回退" ...

  7. CentOS7部署Haproxy 1.7.2

    一.环境准备 1.操作系统 CentOS-7-x86_64-1611 2.Haproxy版本1.7.2 3.Haproxy服务器IP 192.168.186.131.web1服务器安装并启动Nginx ...

  8. HDU3535——AreYouBusy

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3535 题目意思:给出两个数n,T,分别表示有n个任务集合,T的总时间,对于每个任务集合有两个属性m和t ...

  9. setMasksToBounds

    setMasksToBounds 在IB中,当你使用Custom类型的Button时,你可以指定按钮的背景色.但当你运行时按钮就失去了圆角特性,你看到的仅仅是一个方块.因为custombutton没有 ...

  10. mysql备份总结

    w汇总对比. mysqldump -u user -p wdbname > /www/wbak.sql pwd CREATE TABLE wbak_w_02071349 LIKE w; INSE ...