<div>
<form action="/home/Uplod" method="post" enctype="multipart/form-data">
<input type="file" name="file" id="image" multiple="multiple" onchange="_this.upload(this)" />
<input type="button" value="submit" id="submit" onclick="_this.subimt(document.getElementById('image'))" />
</form>
</div> <script type="text/javascript">
$(function () {
main.init();
})
var main={
config:{
AllowImgFileSize:2100000, //限制上传大小
tempbase:[], //bas64数组
},
init:function(){
_this=this;
},
//提交
subimt:function(obj){
if (obj.files.length < 1) {
alert("请最少选择一个图片")
return;
}
for (let i = 0,len=obj.files.length;i <len; i++) {
if (obj.files[i].size > _this.config.AllowImgFileSize) {
alert("上传失败,请上传不大于2M的图片!");
return;
}
}
console.log(_this.config.tempbase);
console.log(_this.config.tempbase[0]);
},
//上传
upload:function(obj){
//obj==doument.getElementById("image");
var files = obj.files;
//数组重置为空。
_this.config.tempbase = [];
function readFileAsync(file) {
return new Promise(function (resolve) {
var reader = new FileReader();
reader.onload = function (evt) {
return resolve(evt.target.result);
};
reader.readAsDataURL(file);
});
}; for (let j = 0,len=files.length; j <len; j++) {
readFileAsync(files[j]).then(function(res){
_this.config.tempbase.push(res);
});
};
},
};
</script>

JavaScript base64多图上传的更多相关文章

  1. PHP之:多图上传

    撰写日期:2016-6-30 15:17:35 Thursday 参考 http://a3147972.blog.51cto.com/2366547/1381136 (08-05ThinkPHP+sw ...

  2. 怎么样通过php使用html5实现多文件上传?(php多图上传)

    <!DOCTYPE html><html lang="zh-cn"> <head> <meta charset="utf-8&q ...

  3. 项目总结21:项目总结21:input实现多图上传(FormData)(上传OSS并保存数据库)

    项目总结21:input实现多图上传(FormData)(上传OSS并保存数据库) 备注:本案例,作为Demo,包含少量的项目业务逻辑,input多图上传的逻辑是完整的: 不废话直接上代码 1-前端标 ...

  4. JavaScript实现本地图片上传前进行裁剪预览

    本项目支持IE8+,测试环境IE8,IE9,IE10,IE11,Chrome,FireFox测试通过 另:本项目并不支持Vue,React等,也不建议,引入JQuery和Vue.React本身提倡的开 ...

  5. Bootstrap+PHP fileinput 实现多图上传 这是ajax上传,只能单张单张图片地上传

    插件及源代码可以在这里下载 http://www.jq22.com/jquery-info5231下面是根据下载的demo进行补充:使用bootstrap界面美观,可预览,可拖拽上传,可配合ajax异 ...

  6. JavaScript实现单张图片上传功能

    前台jsp代码 <%@ page language="java" pageEncoding="UTF-8" contentType="text/ ...

  7. Vue的移动端多图上传插件vue-easy-uploader

    原文地址 前言 这段时间赶项目,需要用到多文件上传,用Vue进行前端项目开发.在网上找了不少插件,都不是十分满意,有的使用起来繁琐,有的不能适应本项目.就打算自己折腾一下,写一个Vue的上传插件,一劳 ...

  8. Bootstrap+PHP实现多图上传

    插件及源代码可以在这里下载 http://www.jq22.com/jquery-info5231下面是根据下载的demo进行补充:使用bootstrap界面美观,可预览,可拖拽上传,可配合ajax异 ...

  9. HTML5 多图上传

    HTML5 多图上传 时间 2014-06-05 16:06:29  月小升博客 原文  http://java-er.com/blog/html5-many-image-upload/ 主题 HTM ...

随机推荐

  1. Eclipse安装Web/JavaEE插件、Eclipse编写HTML代码

    1 Eclipse没有Web插件和JavaEE插件咋整 1.1 在Eclipse中菜单help选项中选择install new software选项 1.2 在work with 栏中输入 http: ...

  2. 吸收效果,像是在Mac上的垃圾桶的效果一样

    #import "AppDelegate.h" #import <QuartzCore/QuartzCore.h> @interface AppDelegate () ...

  3. li ol ul是什么的简写?

    为了方便理解知识,我通常会对一些英语简写追根溯源,在火狐开发者社区里面找到了一些资料. li是 list item的简写不是list的简写 ol是ordered list的简写 ul是unordere ...

  4. can基础知识介绍

    1.什么是can 2.can的特点 2.物理层特征 我们使用ISO11898标准,物理层特征如图所示 3.帧的种类介绍 实际上有一些帧是有硬件来实现的. 4.数据帧介绍 5.总线仲裁 6.位时序(用于 ...

  5. [译]Javascript中的本地以及全局变量

    本文翻译youtube上的up主kudvenkat的javascript tutorial播放单 源地址在此: https://www.youtube.com/watch?v=PMsVM7rjupU& ...

  6. Winform定时启动

    System.Timers.Timer t; ; int qian; int bai; int shi; int ge; public 测试定时启动() { InitializeComponent() ...

  7. Liunx在开机后,自动启动openldap、radius、memcached等程序的shell脚本

    以下是脚本命令: #!/bin/bash #说明:此文件需放在/etc/rc.d/init.d/目录下,然后编辑文件/etc/rc.d/rc.local,在里面添加bash /etc/init.d/A ...

  8. python解决最小二乘法的相关问题笔记。

    计算最小二乘法求目标函数的系数,部分代码来源于张若愚老师的<Python科学计算> 题目 某检测装备输入数据: x:0.9, 2.5, 3.3, 4.5, 5.7, 6.9 g:1.1, ...

  9. VB6加载MSCOMCTL.OCX出现“不能加载''”错误的处理方法汇总

    自从我安装卸载几次OFFICE和WPS后,VB6就出现了这样的问题. 然后在网上收集各种解决办法: 1.第一种:工程文件引用可能有问题,跟本机的相关组件版本不一致. 用记事本打开VBP文件找到这一行: ...

  10. 51nod1478(yy)

    题目链接: http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1478&judgeId=365133 题意: 中文题诶 ...