<!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. DJANGO里让用户自助修改邮箱地址

    因为在部署过程中会涉及用户邮件发送,如果有的同事不愿意收到太多邮件,则可以自己定义为不存在的邮箱. 我们在注册的时候,也不会写用户邮箱地址,那么他们也可以在这里自己更改. changeemail.ht ...

  2. HDU 4273

    计算凸包重心到各面的最短距离. 若知道重心,按四面体用体积法即可求出高. 关键在于,多面体重心的求法.这必须把多面体分割成多个四面体来求.下面从多边形的重心说起. 一般来用,对于一个多边形(p0,p1 ...

  3. 命令行使用Eclipse的debug签名失败“找不到 xx.keystore证书链”

    1.debug签名位置 2.查看debug.keystore具体信息 3.使用命令行签名 注意:debug签名password为android 4.出错原因是签名的别名写错,应为androiddebu ...

  4. Android实战简易教程-第六十六枪（server端搭建和server端Json数据交互）

    学习Android有一段时间了.对server端有非常深的好奇,决定对server端的实现进行一些研究,这里实现了一个简单的小样例,用于获取server端的json数据,样例非常easy,适合刚開始学 ...

  5. Thinking in Java：容器深入研究

    1.虚线框表示Abstract类,图中大量的类的名字都是以Abstract开头的,它们仅仅是部分实现了特定接口的工具,因此创建时能够选择从Abstract继承. Collections中的实用方法:挑 ...

  6. 【POJ 1084】 Square Destroyer

    [题目链接] http://poj.org/problem?id=1084 [算法] 迭代加深 [代码] #include <algorithm> #include <bitset& ...

  7. 【转】寻找最好的笔记软件:海选篇 (v1.0)

    原文网址:http://blog.sina.com.cn/s/blog_46dac66f01000b55.html   序言: 我见过的多数软件爱好者,无论是资深用户,还是初级用户,都有一个梦想:找到 ...

  8. [JavaEE] Apache Maven 入门篇(下)

    http://www.oracle.com/technetwork/cn/community/java/apache-maven-getting-started-2-405568-zhs.html 作 ...

  9. [转]C# ListView 单击标题实现排序(在转载的基础上有所完善)

    using System; using System.Collections; using System.Windows.Forms; //在转载的基础上有所完善 namespace TDRFacto ...

  10. 什么是 HTML5?

    HTML5 是下一代的 HTML. 什么是 HTML5? HTML5 将成为 HTML.XHTML 以及 HTML DOM 的新标准. HTML 的上一个版本诞生于 1999 年.自从那以后,Web ...