input标签处理多文件上传

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Consolas; color: #2b9edb }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Consolas; color: #d76019 }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Consolas; color: #2eafa9 }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Consolas; color: #596972 }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Consolas; color: #3c7400 }
p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Consolas; color: #d8a100 }
p.p7 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Consolas; color: #060606 }
span.s1 { color: #596972 }
span.s2 { color: #2b9edb }
span.s3 { color: #2eafa9 }
span.s4 { color: #d76019 }
span.s5 { color: #ad5cff }
span.s6 { color: #97a700 }
span.s7 { color: #ff7900 }
span.s8 { color: #060606 }
span.s9 { color: #3c7400 }
span.s10 { color: #000000 }
span.s11 { color: #6b82d9 }
span.s12 { color: #d8a100 }
span.s13 { color: #b58a00 }
span.Apple-tab-span { white-space: pre }

<!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...

原文地址:https://www.cnblogs.com/Alice-Xu/p/8559216.html

时间: 2024-10-23 18:36:29

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

input file美化,文件上传

此文学习至:http://www.haorooms.com/post/input_file_leixing 然而只会用,不会做,UI泪茫茫 效果图: 原图: 美化后: 此主要用css美化表单,然后用Jq提交表单 1.css <style> .a-upload { padding: 4px 4px 10px 10px; height: 25px; line-height: 20px; position: relative; cursor: pointer; color: #888; backgr

h5 input file ajax实现文件上传

<input type="file" accept="image/*" height="0" class="file_input" id="file_input_ss_0" multiple>  文件域 遇到的几个BUG 已经解决 1 多选文件域,如果没有上传成功或已上传成功,再次点击文件域名选择图片时,会累积上次的文件. 例如 第一次上传1.jpg  第二次点击上传 2.jpg 第二次的上传结

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

上传文件的类型:具体做法如下所示: 注意:accept属性可以限制上传格式,其有兼容性如下 <1>上传.csv格式的 <input text="file" accept=".csv" /> <2>上传.xls格式 <input text="file"  accept="application/vnd.ms-excel"/> <3>上传.xslx格式 <input

input实现多文件上传及图片预览

通过使用html的input标签可以实现文件上传比如 <input id="file" type="file" name="upload" multiple onchange="showch();"> 其中将type属性设为file. 添加multiple实现多文件上传入下图所示: 通过使用原生js或jQuery就可以获得文件名,文件路径,文件大小等属性 获得文件属性的js代码如下: <script type

python+selenium文件上传

1.input标签类元素文件上传 先定位到文件上传元素id,再使用方法send_keys(文件路径) 2.非input标签 备注:非input标签的文件上传,就不适用于此方法了,需要借助autoit工具或者SendKeys第三方库.

用jQuery重置用于文件上传的input (type=&quot;file&quot;)

页面中有如下标签: <input type="file" id="upload"/> 此标签本用于文件上传,现在有需要将其值重置为空.于是想当然地写出如下代码: $('#upload').val(''); 但经测试,该处理方法对IE无效,因为IE不允许javascript改变type为file的input的值,又是让人蛋疼的IE... 在浏览器兼容性方面本人是白痴一个,遂放狗一搜,有解决方案如下: if(ie) { // 此处判断是否是IE $('#up

Java文件上传

本文转载自 文件上传与 Angular 最近项目需要使用 Angular,对于初学 Angular 的我只能硬着头皮上了,项目中有一个需求是文件上传,磕磕绊绊之下也实现了,将实现过程中学习到的一些知识记录下来以备将来查阅. 与表单数据编码相关的知识 通常,我们使用 HTML 的标签 <form> 来为用户输入创建一个表单,使用 <input type="file"> 作为文件上传的控件. 要将表单的数据发送给后台,不仅要通过指定 <form> 的属性

笔记02 文件上传、文件下载、类型转换器、国际化的支持

Struts2的上传 1. Struts2默认采用了apache commons-fileupload  2. Struts2支持三种类型的上传组件 3. 需要引入commons-fileupload相关依赖包 * commons-io-1.3.2.jar * commons-fileupload-1.2.1.jar 4. 表单中需要采用POST提交方式,编码类型需要使用:multipart/form-data 5. Struts2的Action     取得文件名称->>规则:输入域的名称+

Java+jsp文件上传(ajax)的方式

今天在开发项目的时候碰到了一个需求,一个简单的文件上传.但是上传后需要通过回调函数做一些上传完毕的操作.发现通过<form><file><input submit>能做到文件上传,但是回调函数不是很好实现. 于是打算改用ajax的形式去提交.以下是实现的代码: jsp页面:(css样式和标签引入属于自己定制的,与本文无关,直接去了就好): <%@page language="java" contentType="text/html;