zoukankan      html  css  js  c++  java
  • input文件上传图形按钮

    <div class="aui-list-item" id="imgFiles">
                                                <!-- 只接受jpg,gif和png格式 -->
                                            <input name="" type="file" multiple="multiple" accept="image/gif, image/jpg, image/png" onchange="showImg(this,3,9)" />
                                            </div>

                                            <div id="imgContainer" style="margin: 10px;"></div>
     
    // 2.7 图片文件上传(imgFiles)
            function showImg(obj,minFileNum,maxFileNum) {
                imgFiles = obj.files
                if (window.File && window.FileList){
                    var fileCount = obj.files.length;
                    if (fileCount < minFileNum || fileCount > maxFileNum){
                        layer.msg('文件个数不符,请重新上传', {time: 1500});
                        return false;
                    }
                }else{
                    layer.msg('你的浏览器不支持上传文件,请升级你的浏览器');
                    return false;
                }
                getImgsByFileReader(document.getElementById("imgContainer"), imgFiles)
            }
            
            // 使用FileReader读取file实例并显示图片
            function getImgsByFileReader(el, files) {
                $(el).html("");
                for (var i = 0; i < files.length; i++) {
                    let img = document.createElement('img')
                    img.setAttribute('style', ' 40px; height: 40px; vertical-align: middle; margin-right: 5px;')
                    el.appendChild(img)
                    var reader = new FileReader()
                    reader.onload = function(e) {
                        img.src = e.target.result
                    }
                    reader.readAsDataURL(files[i]) 
                }
            }
  • 相关阅读:
    c++ stl algorithm: std::find, std::find_if
    mysql---多表关联
    使用hadoop命令rcc生成Record 一个简单的方法来实现自己的定义writable对象
    Nexon由Xsolla全球支付服务
    configure.ac:20: error: Autoconf version 2.65 or higher is required
    的无线通信网络的学习LTE的关键技术HARQ(20141217)
    JAVA 公众微信的开放源码项目管理合作伙伴招募的版本号
    【工具】JAVA 在单元读取文件并比较
    linux下如何编译python生成libpython2.5.so动态库
    将主机IDS OSSEC日志文件存入MYSQL的方法
  • 原文地址:https://www.cnblogs.com/yccg990118/p/11977602.html
Copyright © 2011-2022 走看看