• 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中赋值运算符的使用
    Visual Studio常用快捷键
    循 环 嵌 套
    控制摄像头拍照
    运用<body>属性,渲染页面效果
    子查询的易错点
    随机数
    PDO获取数据乱码的解决方法
    JavaScript中比较运算符的使用
  • 原文地址:https://www.cnblogs.com/YAN-HUA/p/9020580.html
Copyright © 2020-2023  润新知