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

  

  1. <script>
      var result=document.getElementById("result");
  2.   var file=document.getElementById("file");
  3.  
  4.   function readAsDataURL(){
  5.     var file = document.getElementById("file").files;
  6.     var result=document.getElementById("result");
  7.  
  8.     for(i = 0; i< file.length; i ++) {
  9.       var reader = new FileReader();
  10.       reader.readAsDataURL(file[i]);
  11.       reader.onload=function(e){
  12.     //多图预览
  13.     result.innerHTML = result.innerHTML + '<img src="' + this.result +'" alt="" />';
  14.       }
  15.  
  16.       }
  17.  
  18.    }
  19.  
  20. </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. 编程之美 set 20 构造数独

    1. 朴素 DFS 遍历效率太低, 即便是预先设定 9 个数放到数组再去 DFS, 同样并不高效 2. 在生成一个可行解后, 随机删除一些数字, 删除的数字越多, 数独的难度就越大 3. 正解二. 3 ...

  2. nmon工具

    下载地址 1.http://nmon.sourceforge.net/pmwiki.php?n=Site.Download tar xvzf  *.tar.gz,需要配置权限 chmod -x,同时配 ...

  3. Android之检查网络是否可用(跳转网络设置页面)

    private boolean NetWorkStatus() { ConnectivityManager cwjManager = (ConnectivityManager) getSystemSe ...

  4. Xamarin绑定微信SDK 实现分享功能

    从开始做这一块的工作开始,就开始找各种的资料,最后还是老老实实的去看官方文档. 对于Xamarin.Android的绑定属于纯jar的绑定,这个难度较小,添加Bindings Library,将lib ...

  5. 云服务器 ECS Linux 保存用户登录操作命令记录

    转载自 : https://help.aliyun.com/knowledge_detail/41210.html 云服务器 ECS Linux 如果要保存用户登录操作记录,则可以通过在 /etc/p ...

  6. Ubuntu 中 apache 开启 rewrite 模块

    ubuntu14.04中安装好apache2.4之后默认rewrite模块是不开启的,项目public目录下的.htaccess文件就用不了,在浏览器中访问网页总是报500错误,原因就是这个. 执行下 ...

  7. JSP中的内置对象和Struts中的Web资源的详解

    JSP中的内置对象有如下几种: request :继承于HttpServletRequest, HttpServletRequest继承ServletRequest, 获得的Request对象的方法: ...

  8. Linux中配置主机之间的免密ssh登陆

    假如 A 要登陆 B在A上操作:1.首先生成密钥对 ssh-keygen (提示时,直接回车即可) 2.再将A自己的公钥拷贝并追加到B的授权列表文件authorized_keys中 ssh-copy- ...

  9. Web浏览器导出FTP服务器上的文件

    开发思路:1.代码登录ftp服务器下载文件到服务器2.通过web浏览器下载服务器上的文件 using System; using System.Collections; using System.Co ...

  10. GITLAB服务基础

    1.GITLAB介绍 一个基于GIT的源码托管解决方案基于Ruby on rails开发集成了nginx postgreSQL redis sidekiq等组件 2. 资源 官网:https://ab ...