JavaScript base64多图上传
<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多图上传的更多相关文章
- PHP之:多图上传
撰写日期:2016-6-30 15:17:35 Thursday 参考 http://a3147972.blog.51cto.com/2366547/1381136 (08-05ThinkPHP+sw ...
- 怎么样通过php使用html5实现多文件上传?(php多图上传)
<!DOCTYPE html><html lang="zh-cn"> <head> <meta charset="utf-8&q ...
- 项目总结21:项目总结21:input实现多图上传(FormData)(上传OSS并保存数据库)
项目总结21:input实现多图上传(FormData)(上传OSS并保存数据库) 备注:本案例,作为Demo,包含少量的项目业务逻辑,input多图上传的逻辑是完整的: 不废话直接上代码 1-前端标 ...
- JavaScript实现本地图片上传前进行裁剪预览
本项目支持IE8+,测试环境IE8,IE9,IE10,IE11,Chrome,FireFox测试通过 另:本项目并不支持Vue,React等,也不建议,引入JQuery和Vue.React本身提倡的开 ...
- Bootstrap+PHP fileinput 实现多图上传 这是ajax上传,只能单张单张图片地上传
插件及源代码可以在这里下载 http://www.jq22.com/jquery-info5231下面是根据下载的demo进行补充:使用bootstrap界面美观,可预览,可拖拽上传,可配合ajax异 ...
- JavaScript实现单张图片上传功能
前台jsp代码 <%@ page language="java" pageEncoding="UTF-8" contentType="text/ ...
- Vue的移动端多图上传插件vue-easy-uploader
原文地址 前言 这段时间赶项目,需要用到多文件上传,用Vue进行前端项目开发.在网上找了不少插件,都不是十分满意,有的使用起来繁琐,有的不能适应本项目.就打算自己折腾一下,写一个Vue的上传插件,一劳 ...
- Bootstrap+PHP实现多图上传
插件及源代码可以在这里下载 http://www.jq22.com/jquery-info5231下面是根据下载的demo进行补充:使用bootstrap界面美观,可预览,可拖拽上传,可配合ajax异 ...
- HTML5 多图上传
HTML5 多图上传 时间 2014-06-05 16:06:29 月小升博客 原文 http://java-er.com/blog/html5-many-image-upload/ 主题 HTM ...
随机推荐
- java中什么是代码点,什么是代码单元?
1.代码点&代码单元,是从Unicode标准而来的术语,Unicode标准的核心是一个编码字符集,它为每一个字符分配一个唯一数字.Unicode标准始终使用16进制数字,并且在书写时在前面加上 ...
- poj1769 Minimizing maximizer
传送门 题目大意 给你m个机器,n个数,每个机器可以给n个数的某一段排序,求最少使用几个机器,保证可以把这个n个数排好序 分析 我们可以想到dpij表示考虑前i个机器让最大的数到达点j至少需要使用多少 ...
- SPOJ GSS7 - Can you answer these queries VII
板的不能再板,链剖+线段树或者是LCT随便维护. 感觉唯一要注意的是跳链的时候要对$x$向上跳和$y$向上跳的情况分开讨论,而不能直接$swap$,因为只有两段接触的端点才能相互合并,而且每一次向上跳 ...
- Luogu 3193 [HNOI2008]GT考试
BZOJ1009 妙! 推荐这篇题解: https://www.luogu.org/blog/Edgration/solution-p3193 考虑设计dp,设$f_{i, j}$表示长串匹配到i,短 ...
- backstop bsg6
- 发现C#winform编程中不常用的控件(一)<FlowLayoutPanel控件><拆分器控件Splitcontainer >
第一部分:FlowLayoutPanel控件 实现效果: 将FlowLayoutPanel做为导航菜单按钮的容器 以实现 某个菜单按钮不显示时 整体的导航菜单布局不至于"缺憾" 原 ...
- FPM工具 实战定制nginx包
FPM主要特点: 把一种包打包成另一种包的格式 支持的源类型包 DIR 将目录打包成所需要的类型,可以用于源码编译的安装包. RPM 对rpm进行转换 gem 对rubygem包进行转换. ...
- SP1811 LCS - Longest Common Substring
\(\color{#0066ff}{ 题目描述 }\) 输入2 个长度不大于250000的字符串,输出这2 个字符串的最长公共子串.如果没有公共子串则输出0 . \(\color{#0066ff}{输 ...
- Codeforces Round #533 (Div. 2)题解
link orz olinr AK Codeforces Round #533 (Div. 2) 中文水平和英文水平都太渣..翻译不准确见谅 T1.给定n<=1000个整数,你需要钦定一个值t, ...
- [USACO08OPEN]农场周围的道路Roads Around The Farm BZOJ 1621 DFS
Farmer John's cows have taken an interest in exploring the territory around the farm. Initially, all ...