<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. 华为 进入和退出Fastboot、eRecovery和Recovery升级模式

    手机关机状态下,可以进入Fastboot/eRecovery / Recovery/升级这几种模式: 需要连接电脑:Fastboot模式:长按音量下键+电源键.eRecovery 模式:长按音量上键+ ...

  2. erase操作

    #include<iostream> #include <vector> int main() { std::vector<int> vec; vec.push_b ...

  3. centos免密登录

    本文是为了docker-machine增加现有虚拟机服务器为节点而做 docker-machine create -d generic --generic-ip-address=192.168.102 ...

  4. 制作item和category的mvc视图总结

    View层index.phg 代码: <?php use yii\helpers\Html; use yii\grid\GridView; use yii\widgets\Pjax; use f ...

  5. vscode编辑器配置C语言编译运行环境

    1.安装C/C++插件 2.安装编译环境,这里选择MinGW(http://mingw.org/ ) 选择一个安装目录,如:E:\workspace\MinGW mingw32-gcc开头的(包括了m ...

  6. centos下vsftpd不能显示文件,不能创建文件及文件夹

    centos下vsftpd登录正常,但不能显示文件,不能创建文件及文件夹 这是由于selinux的机制 通过命令 [root@localhost www]# getsebool -a|grep ftp ...

  7. element自定义表单验证

    element-ui框架下修改密码弹窗进行表单验证. 除了基础校验,密码不为空,长度不小于6字符,需求中还需校验密码由数字和字母组合. 处理代码如下: <el-dialog :visible.s ...

  8. YAML 语言

    1. YAML 介绍 YAML:以数据为中心,比JSON,XML更适合做配置文件; //示例: server: port: 8081 //此处有空格 2. YAML 基本语法 使用缩进表示层级关系; ...

  9. linux物理页面的换入换出简析

    2017-04-25 我们都知道,现代操作系统使用分页机制和虚拟内存,同时为了提高物理页面的利用率,采用了请求调页的机制,即物理内存的分配只有在真正需要的时候才会进行,比如发生了真正的读写操作,而普通 ...

  10. ssm框架集成Quartz定时器

    第一步:添加依赖 <dependency> <groupId>org.quartz-scheduler</groupId> <artifactId>qu ...