<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. ios开发--图文混排(富文本)

    最近准备接一个编辑类的app,所以就查了下相关的功能,并自己试验了下: /** iOS 6之前:CoreText,纯C语言,极其蛋疼 iOS 6开始:NSAttributedString,简单易用 i ...

  2. 【BZOJ2565】最长双回文串 Manacher

    [BZOJ2565]最长双回文串 Description 顺序和逆序读起来完全一样的串叫做回文串.比如acbca是回文串,而abc不是(abc的顺序为“abc”,逆序为“cba”,不相同).输入长度为 ...

  3. 面试之四:JVM内存区域分配

    1.程序计数器(线程私有)[不会OOM] 记录线程执行的代码位置,每个线程各自独有. 2.栈:虚拟机栈和本地方法栈(线程私有)[会OOM和StackOverflow] 虚拟机栈 每个JAVA方法在执行 ...

  4. PHP 常用资源

    Apache:http://httpd.apache.org/download.cgi PHP:http://windows.php.net/download#php-5.6 MySQL:http:/ ...

  5. 给Cell间隔颜色

    ==){ cell.backgroundColor = [UIColor colorWithRed:. green:. blue:. alpha:]; } else{ cell.backgroundC ...

  6. 解决64位debian下无法安装ia32库的问题

    原文地址:http://crunchbang.org/forums/viewtopic.php?pid=277918 因为64位debian源中并没有包括32位的软件包,所提安装ia32会提示依赖无法 ...

  7. Spark源码分析 – SchedulerBackend

    SchedulerBackend, 两个任务, 申请资源和task执行和管理 对于SparkDeploySchedulerBackend, 基于actor模式, 主要就是启动和管理两个actor De ...

  8. style2paints、deepcolor、sketchkeras项目

    数据集不够怎么办? 1 一些传统的边缘提取算法可以提取图像边缘. 2 这里我们有一个使用神经网络提取线稿图的项目——sketchkeras 源码:https://github.com/lllyasvi ...

  9. windows中根据进程PID查找进程对象过程深入分析

    这里windows和Linxu系列的PID 管理方式有所不同,windows中进程的PID和句柄没有本质区别,根据句柄索引对象和根据PID或者TID查找进程或者线程的步骤也是一样的.   句柄是针对进 ...

  10. 解决iOS xcode打包unknown error -1=ffffffffffffffff错误

    # 网上很多文档说重启机器,清除缓存什么的,纯属扯淡,都是相互复制粘贴,经测验在stackoverflow找到以下解决方法,亲测可用security unlock-keychain -p " ...