<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. Mac 安装Bower

    1.安装bower,得首先安装node: 1 brew install npm  //npm是nodejs的程序包管理器,如果安装过nodejs,可忽略此步. 2.安装Git(因为需要从Git仓库获取 ...

  2. NSUserDefaults设置bool值重启后bool只设置丢失问题

    本文转载至 http://blog.csdn.net/cerastes/article/details/38036875   NSUserDefaultsbool同步synchronize无效 今天使 ...

  3. 《C++ Primer Plus》第3章 处理数据 学习笔记

    C++的基本类型分为两组:一组由存储为证书的值组成,另一组由存储为浮点格式的值组成.整型之间通过存储键值时使用的呢存及有无符号来区分.整型从最小到最大依次是:bool,char,signed char ...

  4. 【BZOJ4231】回忆树 离线+fail树+KMP

    [BZOJ4231]回忆树 Description 回忆树是树. 具体来说,是n个点n-1条边的无向连通图,点标号为1~n,每条边上有一个字符(出于简化目的,我们认为只有小写字母). 对一棵回忆树来说 ...

  5. 基于Consul+Upsync+Nginx实现动态负载均衡

    基于Consul+Upsync+Nginx实现动态负载均衡 1.Consul环境搭建 下载consul_0.7.5_linux_amd64.zip到/usr/local/src目录 cd /usr/l ...

  6. Python全栈day10(Pycharm的安装和使用)

    Python开发IDE 一,下载Pycharm专业版 二,安装Pycharm 三,新建项目 四,设置字体大小

  7. make_ext4fs 失败

    root@fengyun-server:/home/fmake_ext4fsengyun/android/reverse_engineer/rom制作# ./make_ext4fs -l 700M - ...

  8. 前端开发 - JavaScript - 总结

    一.JavaScript的特征 javaScript是一种web前端的描述语言,也是一种基于对象(object)和事件驱动(Event Driven)的.安全性好的脚本语言.它运行在客户端从而减轻服务 ...

  9. Git 使用vi或vim

    1.vi & vim 有两种工作模式: (1) 命令模式:接受.执行 vi & vim 操作命令的模式,打开文件后的默认模式: (2) 编辑模式:对打开的文件内容进行 增.删.改 操作 ...

  10. linux 系统性能指标

    一.查看CPU使用情况 cpu使用率反映的是当前cpu的繁忙程度,忽高忽低的原因在于占用cpu处理时间的进程可能处于io等待状态但却还未释放进入wait. 平均负载(loadaverage)是指某段时 ...