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 ...
随机推荐
- 02 mybatis环境搭建 【spring + mybatis】
1 导包 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.o ...
- 35-迷宫寻宝(一)-NYOJ82
http://acm.nyist.edu.cn/JudgeOnline/problem.php?pid=82 迷宫寻宝(一) 时间限制:1000 ms | 内存限制:65535 KB 难度:4 ...
- Luogu 3939 数颜色
随手点开一个题. 咦,这不是裸的动态开点线段树吗?写一个写一个…… Code: #include <cstdio> #include <cstring> using names ...
- ModelSim Simulation of RapidIO II IP Core Demonstration Testbench May Require ld_debug Command
Solution ID: fb83262Last Modified: May 17, 2013Product Category: Intellectual PropertyProduct Area: ...
- 根据Value对Map中的对象进行排序
背景 SortedMap的实现类TreeMap可以按自然顺序或自定义顺序遍历键(key),有时我们需要根据值(Value)进行排序,本文提供了一种简单实现思路. 实现 Comparator接口 使用V ...
- Java50道经典习题-程序42 求数字
题目:809*??=800*??+9*??+1其中??代表两位数,若有这样得数,求??代表的两位数 public class Prog42{ public static void main(Strin ...
- 21天网站建设实录 (雨辰资讯) 高清pdf扫描版
<21天网站建设实录>以网页设计师的项目开发为背景,以“阿里里在线购物”商业网站的开发过程为流程,通过21天的任务期限,以一天一项任务.一天掌握一项技能项目实战的学习模式,全面讲解了一个网 ...
- build linaro 4.8 on ubuntu 12.04 64bit
安装必要的软件 sudo apt-get build-dep gcc binutils gdb sudo apt-get install curl gawk sudo apt-get install ...
- socket socket讲解
socket socket讲解 一.socket是何物? 参考百度百科: http://baike.baidu.com/link?url=4YNURsJLEaL0II79C68gPUoYKliXWJ ...
- java java启动方式
java启动方式 两种方案: 1.守护进程方式启动: java –jar命令: 例如:C:\eclise\work\test.jar C:\eclise\work\test.java 打开dos:输 ...