<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. Visio2010如何安装

    双击setup.   点击我接受此协议的条款,然后点击继续.   这里选择自定义,很重要哦,不要选择立即安装,不然,一会装完后,你会找不到快捷方式的.   文件位置这里选择好存放路径,一会我们要去这里 ...

  2. Java各种日期格式的获取和设置指定日期

    因为近期在做一个项目,发现项目中日期设置的bug,于是查阅了多方资料后.最终攻克了,为此写篇总结.方便日后的查阅. 多的不说了.直接上代码 package com.example.testdate; ...

  3. tomcat下载与安装..使用和配置环境变量

    操作环境: xp, myEclipse6.5 tomcat6.0 正文: 一.下载 tomcat官方网站 http://tomcat.apache.org 在左边Download树形菜单中 点击最新版 ...

  4. 【黑金原创教程】【TimeQuest】【第一章】TimeQuest 静态时序分析模型的概念

      声明:本文为黑金动力社区(http://www.heijin.org)原创教程,如需转载请注明出处,谢谢! 黑金动力社区2013年原创教程连载计划: http://www.cnblogs.com/ ...

  5. windows安装oracle11g第二部

    Oracle 11g数据库安装及配置 安装Oracle数据库: 1)压缩包解压,双击运行win64_11gR2_database\database\setup.exe 2)输入电子邮件,点击“下一步” ...

  6. TabBar变透明

    [[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleBlackTranslucent animated:YES];

  7. ACME[free https] Linux中使用curl命令访问https站点4种常见错误和解决方法

    free https certification generator https://github.com/Neilpang/acme.sh/wiki/%E8%AF%B4%E6%98%8E 每一种客户 ...

  8. MySQL单列索引和组合索引的区别介绍(转)

    原文:http://database.51cto.com/art/201011/233234.htm MySQL单列索引是我们使用MySQL数据库中经常会见到的,MySQL单列索引和组合索引的区别可能 ...

  9. Purpose of ContextLoaderListener in Spring

    The ApplicationContext is where your Spring beans live. The purpose of the ContextLoaderListener is ...

  10. Spring Bean声明周期

    Bean的生命周期 理解Spring Bean的生命周期很容易.当一个bean被实例化时,它可能需要执行一些初始化使它转换成可用状态.同样,当bean不再需要,并且从容器中移除时,可能需要做一些清除工 ...