<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. C# winform 中MessageBox用法大全(附效果图)

    我们在程序中经常会用到MessageBox. MessageBox.Show()共有21中重载方法.现将其常见用法总结如下: 1.MessageBox.Show(“Hello~~~~”); 最简单的, ...

  2. WebService远程调用(命令行调用)

    远程调用webservice 方法, 通过wsdl命令,生成webservice 对应asmx 文件的对应类(cs文件),然后将此cs文件引用到当前项目中,项目其他地方需要调用webservice方法 ...

  3. vue2.0中,由于页面完成之后dom还未加载完成如何进行操作

    再vue中,当页面加载完成以后,dom还没有加载,是无法获取进行操作的,但是在vue2.0中提供了一个方法:this.$nextTick,在这个回调函数里面写dom操作即可: 如下代码: create ...

  4. 用vue2.0实现点击选中active,其他选项互斥的效果

    在正常的js中.我们如果要实现点击选中active然后其他取消的效果,我们可以定义一个类,当点击的时候给给多有的dom取消active的类,给当前元素加上这个类名,说的很啰嗦,直接来看代码说话吧(表示 ...

  5. 《C++ Primer Plus》学习笔记0

    Hello,World! 本书版本:<C++ Primer Plus(第6版)中文版>C++是在C语言基础上开发的一种集面向对象编程.泛型编程和过程化编程于一体的编程语言,是C语言的超集. ...

  6. jQuery源码分析-each函数

    本文部分截取自且行且思 jQuery.each方法用于遍历一个数组或对象,并对当前遍历的元素进行处理,在jQuery使用的频率非常大,下面就这个函数做了详细讲解: 复制代码代码 /*! * jQuer ...

  7. poj_2823 线段树

    题目大意 给定一行数,共N个.有一个长度为K的窗口从左向右滑动,窗口中始终有K个数字,窗口每次滑动一个数字.求各个时刻窗口中的最大值和最小值. 题目分析 直接搜索,复杂度为O(n^2).本题可以看做是 ...

  8. HDU4417 (Super Mario)

    题目链接:传送门 题目大意:一个大小为 n 的数组,m组询问,每组询问[x,y]内<=v的数的数量. 题目思路:主席树(注意询问时数组下标越界问题) #include <iostream& ...

  9. PMP十大知识领域整理

    2018-7-28至2018-12-8历时4个多月,学写了PMP(拍马屁),感觉自己经历了,哇-唉-哦-嗯这四个阶段 刚开始觉得如遇圣经,被PMP的知识体系和老师的精彩课程深深震撼! 后来觉得很多东西 ...

  10. WebAPI学习日记一:Ajax请求传递参数遇到的问题

    首先,本人大学刚毕业,想把自己学习的一些东西记录下来,也是和大家分享,如有不对之处还请多加指正.声明:但凡是我博客里的文章均是本人实际操作遇到的例子,不会随便从网上拷贝或者转载,本着对自己和观众负责的 ...