<!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. hdu 2089 数位dp入门题

    #include<stdio.h> //dp[i][0]代表不存在不吉利数字 //dp[i][1]代表不存在不吉利数字但是以2开头 //dp[i][2]代表存在不吉利数字 #define ...

  2. 洛谷—— P1097 统计数字

    https://www.luogu.org/problem/show?pid=1097 题目描述 某次科研调查时得到了n个自然数,每个数均不超过1500000000(1.5*10^9).已知不相同的数 ...

  3. Spring MVC-表单（Form）标签-多行文本框（TextArea）示例（转载实践）

    以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_textarea.htm 说明:示例基于Spring MVC 4.1.6. 以下示 ...

  4. Linux文字分段裁剪命令cut（转）

    Linux cut命令用于显示每行从开头算起num1到num2的文字. 语法 cut [-bn] [file] cut [-c] [file] cut [-df] [file] 使用说明: cut命令 ...

  5. SpringBoot+FreeMarker开发word文档下载,预览

    背景: 开发一个根据模版,自动填充用户数据并下载word文档的功能 使用freemarker进行定义模版,然后把数据进行填充. maven依赖: <parent> <groupId& ...

  6. android-PullRefreshLayout使用

    类似与谷歌的SwipeRefreshLayout.但比SwipeRefreshLayout美丽. 执行效果: 使用说明: 用法和SwipeRefreshLayout几乎相同. 在xml中: 1 2 3 ...

  7. udev详解【转】

    本文转载自:http://blog.csdn.net/skyflying2012/article/details/9359185 如果你使用Linux比较长时间了,那你就知道,在对待设备文件这块,Li ...

  8. [ASPX] 模版引擎XTemplate与代码生成器XCoder（源码）

    模版引擎XTemplate是一个仿T4设计的引擎,功能上基本与T4一致(模版语法上完全兼容T4,模版头指令部分兼容). 自己设计模版引擎,就是为了代码生成器.网站模版.邮件模版等多种场合,也就是要能拿 ...

  9. FluentScheduler定时器

    项目需要一个按时执行的任务,每隔几分钟执行一个,或者每隔几小时执行一次等等,这个时候就需要一个定时的功能,最简单的就是用Timer自己写一个,但是自己写的性能等各方面有可能不健全等等,而现在开源的库也 ...

  10. TopN问题（分别使用Hadoop和Spark实现）

    简介 TopN算法是一个经典的算法,由于每个map都只是实现了本地的TopN算法,而假设map有M个,在归约的阶段只有M x N个,这个结果是可以接受的并不会造成性能瓶颈. 这个TopN算法在map阶 ...