分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > IT知识

input标签处理多文件上传

发布时间:2023-09-06 01:45责任编辑:白小东关键词:文件上传

<!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标签处理多文件上传

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

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved