<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="black">

<meta name="format-detection" content="telephone=no">

<title>多个文件上传</title>

</head>

<body>

<div style="height: 100px; width: 100px; border: 1px solid red; position: relative;">

点击上传

<input onchange="uploadFile()" id="upload" multiple="multiple" type="file" accept="image/*;capture=camera" style="height: 100px;width: 100px;opacity: 0;position: absolute;top: 0;left: 0;" />

</div>

<script>

function uploadFile() {

var input = document.getElementById('upload');

var files = Array.prototype.slice.call(input.files);

files.forEach(function(file, i) {

var reader = new FileReader();

reader.onloadend = function(e) {

var baseFileStr = this.result.substring((13 + file.type.length),this.result.length);

console.info("输出文件数据");

console.info(baseFileStr);

}

reader.readAsDataURL(file);

});

}

</script>

</body>

</html>

>>>输出文件数据

>>>iVBORw0KGgoAAAANSUhEUgAAABIAAAAOCAYAAAAi2...

input标签处理多文件上传的更多相关文章

  1. input标签前台实现文件上传

    值得注意的是:当一个表单里面包含这个上传元素的时候,表单的enctype必须指定为multipart/form-data,method必须指定为post,浏览器才会认识并正确执行.但是还有一点,浏览器 ...

  2. struts2 s:file标签使用及文件上传例子

      <s:form action="uploadaction" method="post" enctype="multipart/form-da ...

  3. input file美化，文件上传

    此文学习至:http://www.haorooms.com/post/input_file_leixing 然而只会用,不会做,UI泪茫茫 效果图: 原图: 美化后: 此主要用css美化表单,然后用J ...

  4. h5 input file ajax实现文件上传

    <input type="file" accept="image/*" height="0" class="file_inp ...

  5. jquery的input:type=file实现文件上传

    <!DOCTYPE html> <html> <head> <title>html5_2.html</title> <style> ...

  6. 前端 HTML form表单标签 input标签 type属性 file 上传文件

     加上上传文件功能 input type='file' - 依赖form表单里一个属性 enctype="multipart/form-data" 加上这个属性表示把你上次文件一点 ...

  7. input accept属性限制文件上传格式

    上传文件的类型:具体做法如下所示: 注意:accept属性可以限制上传格式,其有兼容性如下 <1>上传.csv格式的 <input text="file" acc ...

  8. [HTML]增加input标签的multiple属性上传的文件数

    .发现问题 <input type="file" name="myfile[]" multiple="multiple"/> 最 ...

  9. 利用layui前端框架实现对不同文件夹的多文件上传

    利用layui前端框架实现对不同文件夹的多文件上传 问题场景: 普通的input标签实现多文件上传时,只能对同一个文件夹下的多个文件进行上传,如果要同时上传两个或多个文件夹下的文件,是无法实现的.这篇 ...

随机推荐

  1. faster-rcnn代码阅读1

    毫无疑问,faster-rcnn是目标检测领域的一个里程碑式的算法.本文主要是本人阅读python版本的faster-rcnn代码的一个记录,算法的具体原理本文也会有介绍,但是为了对该算法有一个整体性 ...

  2. JS禁用微信复制链接、禁用转发

    $(function () { function onBridgeReady() { WeixinJSBridge.call('hideOptionMenu'); } if (typeof Weixi ...

  3. selenium实例学习地址

    一个完整的maven配置selenium webdriver工程实例   http://www.spasvo.com/ceshi/open/kygncsgj/Selenium/201312209580 ...

  4. 过时的PreferenceActivity导致Fragment显示问题

    问题描写叙述: 在一个点击preferenceactivity中某项显示一个Fragment的场景中,出现错误: java.lang.RuntimeException: This should be ...

  5. Linux 管道是什么 ？原理

    简单点就是说,一个命令的结果作为另外一个命令(结果)的输入 . 管道是linux提供的一种常见的进程通信工具,也是很多shell命令能够灵活组合产生强大用途的一个重要工具. 管道是什么? 管道,顾名思 ...

  6. luogu2054 洗牌 同余方程

    题目大意 对于扑克牌的一次洗牌是这样定义的,将一叠N(N为偶数)张扑克牌平均分成上下两叠,取下面一叠的第一张作为新的一叠的第一张,然后取上面一叠的第一张作为新的一叠的第二张,再取下面一叠的第二张作为新 ...

  7. 原生mysql读出来数据有乱码

    加入这个后mysql_query("set names utf8");,可以将读出来的数据变成utf8的格式,可能是解决问题的一个好方法.

  8. java基本数据类型（二）和分支结构

    基本数据类型(四类八种):不能为null一.整数型 byte----2的8次方 short----2的16次方 int----2的32次方 long----2的64次方二.浮点型 float----4 ...

  9. BZOJ 3910 并查集+线段树合并

    思路: 1. 并查集+线段树合并 记得f[LCA]==LCA的时候 f[LCA]=fa[LCA] 2.LCT(并不会写啊...) //By SiriusRen #include <cstdio& ...

  10. zookeeper单机和奇数集群

    zookeeper单机和奇数集群 链接地址:https://www.cnblogs.com/lsdb/p/7297731.html