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;
                }

            });
        };

posted @ 2017-09-21 14:22  欧辰0312  阅读(151)  评论(0编辑  收藏  举报