<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. 面试题:Concurrenthashmap原理分析 有用

    一.背景: 线程不安全的HashMap     因为多线程环境下,使用Hashmap进行put操作会引起死循环,导致CPU利用率接近100%,所以在并发情况下不能使用HashMap.   效率低下的H ...

  2. Html.DropDownListFor 练习

    需要创建一个List<SelectListItem>数据集,如下 使用已经存在FruitCategoryEntity.cs类的IEnumerable<FruitCategory> ...

  3. java获取Excel的导出

    import java.io.*; import org.apache.commons.io.FileUtils; import org.apache.poi.hssf.usermodel.HSSFC ...

  4. Linux - 在 CentOS 7 上部署 Google BBR

    BBR(Bottleneck Bandwidth and RTT)是一种新的拥塞控制算法,由Google开发.有了BBR,Linux服务器可以显着提高吞吐量并减少连接延迟. Step 1: Upgra ...

  5. 在OnRowDataBound或OnItemDataBound事件中获取字段值

    不管是在GridView,DataList还是Repeater控件中,其中Repeater控件,没有DataKeyNames或是DataKeyField属性,想获取记录的主键值,只好用Label或是H ...

  6. spring mvc常用注解标签

    @Controller 在SpringMVC 中,控制器Controller 负责处理由DispatcherServlet 分发的请求,它把用户请求的数据经过业务处理层处理之后封装成一个Model , ...

  7. ubuntu - 14.04,安装JDK1.8(JAVA程序需要的开发、运行环境)

    一,如何删除低版本的open JDK? 在ubuntn的软件中心中,如果输入"java",我们会看到open JDK,但是最高版本是1.7,也有1.6版本的,如果我们安装上去,可能 ...

  8. asp web.config文件里compilation的assemblies add的元素来自哪里

    该程序集组合由版本.区域性和公钥标记组成. ASP.NET 首先在应用程序的专用 Bin 目录中搜索程序集 DLL,然后在系统程序集缓存中搜索程序集 DLL. add 元素添加要在动态资源编译期间使用 ...

  9. Python 文件和异常

    一.从文件中读取数据 #!/usr/bin/env python with open('pi') as file_object: contents = file_object.read() print ...

  10. docker log: containerid-json.log 文件disappear,问题排查及解决方案

    问题排查: 运行 #docker info   查阅资料,知道了docker的logging driver相关理论:https://docs.docker.com/engine/admin/loggi ...