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 ...
随机推荐
- Excel VBA 若要在64位系统上使用,则必须更新此项目中的代码,请检查并更新Declare语句,然后用PtrSafe属性标记它们
在Office 2010 32位上开发的Excel VBA系统,迁移到Office 2010 64位下面,打开后使用,报下面错误: 解决办法: 在Declare 后面加PtrSafe 进行标记
- JavaWeb 没用
Servlet的生命周期 初始化:Web容器加载servlet,调用innit(),只执行一次 处理业务: 请求到达时,运行service方法 并调用相应的doget或者dopost方法. 可执行多 ...
- windows VS2013 编译安装QWT6.1和QWTPolar1.1.1
QWT的编译和配置 1. 下载QWT从官网 For getting a snapshot with all bugfixes for the latest 5.2 release: svn expor ...
- WOJ 10 精英选拔
神仙dp,膜Claris 题意:给一个长度为$n$的数列,求出不超过k次交换后的最大连续子区间和. 发现交换后的最优答案一定是这样的(0和2的长度可以为0) 0 ...
- Netty中的Future
先看下Future的整个继承体系,还有一个ChannelFuture不在里面: 在并发编程中,我们通常会用到一组非阻塞的模型:Promise,Future 和 Callback.其中的 Fut ...
- Comparator 排序
例1: import java.util.ArrayList; import java.util.Collections; import java.util.Comparator; import ja ...
- Binder学习笔记(四)—— ServiceManager如何响应checkService请求
这要从frameworks/native/cmds/servicemanager/service_manager.c:347的main函数说起,该文件编译后生成servicemanager. int ...
- UIColor
UIColor.CIColor 和 CGColor 出现在不同的类库里面,其实就是颜色存储方式不同而已,比如 999 可以用 10 进制.2 进制.16 进制等存储.三者之间都是能够方便转换的,特别是 ...
- 【Python发展】pandas和koalas
1.pandas介绍 Python 数据科学在过去几年中爆炸式增长, pandas 已成为生态系统的关键.当数据科学家得到一个数据集时,他们会使用 pandas 进行探索.它是数据处理和分析的终极工具 ...
- vuejs API总结
vuejs总结: vm指new Vue获取的实例 (1)当dom标签里的值和data里的值绑定后,更改data对应的值可以实时更新标签里的值: 但后续添加的值是无效的(绑定失败). (2)将可以将对象 ...