<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. JQuery------实现鼠标摁下抬起时div背景色改变

    作用:使用自定义一个按钮 代码: <div class = 'btn'>按钮</div> $(".btn").mousedown(function () { ...

  2. 编程之美 最长递增子序列 LIS

    1. O(N*logN) 解法 先对序列排序, 然后寻找两个序列的最长公共子序列 2. O(N*N) 的动态规划解法 令 LIST[i] 表示以 i 为结尾的最长子序列的长度, 那么 LIST[J] ...

  3. Android 网卡地址Mac Wifi文件

    1./system/etc/firmware/ti-connectivity/wl1271-nvs.bin的文件 2./data/etc/wifi/fw文件 3./data/nvram/APCFG/A ...

  4. jquery做简单特效

    1.点击触发消失效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

  5. JS图片加载时获取图片宽高信息

    ; var img = new Image(); img.src = node.find("img[class='img1_1']").attr("src"); ...

  6. 点击input选中文本

    选文本: $(".unline-ipt").click(function () { $(this).focus().select(); this.selectionStart = ...

  7. JZOJ.5305【NOIP2017模拟8.18】C

    Description

  8. phpredis 中文手册和redis 教程

    phpredis 中文手册  :   http://www.cnblogs.com/zcy_soft/archive/2012/09/21/2697006.html 手册: http://www.cn ...

  9. iOS json解析中包含“\n”等解析出错

    文题算是解决了,把特殊字符替换一下:-(NSString *)JSONString:(NSString *)aString {    NSMutableString *s = [NSMutableSt ...

  10. 学习ASP.NET MVC3(6)----- Filte

    前言 在开发大项目的时候总会有相关的AOP面向切面编程的组件,而MVC(特指:Asp.Net MVC,以下皆同)项目中不想让MVC开发人员去关心和写类似身份验证,日志,异常,行为截取等这部分重复的代码 ...