jQuery 本地预览图片

<!-- 图片列表 -->
        <div class="showTem">
            <div id="selectFile">
                <input accept="image/*" type="file" />          
            </div>
            <div id="imgList" class="showImg">
            </div>
        </div>

// 图片列表
var imgList = $("#imgList");
// 自动添加图片
for (var i = 1; i <= 20; i++) {
    var newImgItem = $('<div class="tudiv"><img src="./image/' + i + '.png" alt=""></div>');
    imgList.append(newImgItem);
}
// jquery可以批量添加事件
var btns = $(".tudiv");
// 上次选中的项
var lastSelectItem = btns.first();
lastSelectItem.css('border', '6px solid #292C30');
// 点击切换事件
function onImgItemClicked(e) {
    // 初始化尺寸值
    draw.width = 60;
    draw.height = 2;
    draw.thickness = 0.1;
    lastSelectItem.css('border', 'none');
    console.log(this, e);
    var $this = $(this);
    $this.css('border', '6px solid #292C30');
    image.src = $this.children("img").attr("src");
    lastSelectItem = $this;
}
btns.click(onImgItemClicked);

// 选择相册
var selectFile = $("#selectFile");
selectFile.change(function (e) {
    let file = e.target.files[0];
    console.log("prepend", file);
    if (!file) return;

    src = window.URL.createObjectURL(file);
    // 插入新的图片：在头部
    var newImgItem = $('<div class="tudiv"><img src="' + src + '" alt=""></div>');
    // 添加事件
    newImgItem.click(onImgItemClicked);
    imgList.prepend(newImgItem);
    // 模拟一次点击操作：实现切换
    newImgItem.click();
});