zoukankan      html  css  js  c++  java
  • js实现上传图片

    <div class="upload-wrap">
                        <!--<div>添加图片(限4张)</div>-->
                        <ul class="upload am-cf am-gallery" data-am-widget="gallery" data-am-gallery="{ pureview: true }">
                            <li class="upload-btn">
                                <img src="../assets/img/add.png" class="img">
                                <input type="file" class="j-file-cert" name="temp_file" />
                            </li>
                        </ul>
                    </div>
    function uploadImg(cls,num) {
                var count = 0;
                $(cls).on('change', function(e) {
                    count++;
                    if(count < (num + 1)) {
                        var that = $(this);
                        if(!window.FileReader) return;
    
                        e.stopPropagation();
                        e.preventDefault();
    
                        var file = e.target.files[0];
                        var content = '';
    
                        if(!file.type.match('image.*')) {
                            alert('文件' + f.name + '不是图片')
                            return;
                        }
    
                        var reader = new FileReader();
    
                        reader.onload = function(e) {
    
                            content = '<li>' +
                                '<img class="j-image" src="' + e.target.result + '">' +
                                '<i class="icon-close"></i>' +
                                '</li>'
    
                            that.parent().before(content);
                            //    删除上传图片
                            $('.upload').on('click', '.icon-close', function() {
                                $(this).parent().remove();
                                var tue = $(this).siblings().attr('src');
                                if(count > 0) {
                                    count--;
                                }
                            });
    
                        }
                        reader.readAsDataURL(file);
                    } else {
                        mask('最多传4张图片');
                        count = num;
                        return false;
                    }
    
                });
            };

  • 相关阅读:
    周末毒鸡汤时间
    MySQL 8.0发布,你熟悉又陌生的Hash Join?
    你可能需要的Kafka面试题与答案整理
    流程控制结构
    视图
    事务
    常用约束
    sql99语法的连接查询
    数据类型
    数据操作语句(DML)
  • 原文地址:https://www.cnblogs.com/ouchen0312/p/7568415.html
Copyright © 2011-2022 走看看