jquery - 添加图片文件

<div class="z_photo z_photo-add">
    <div class="z_file">
        <input type="file" name="file" id="file" value="" accept="image/*" multiple onchange="imgChange('z_photo','z_file');" />
        <p>请选择相关的证件图片上传</p>
    </div>
</div>
<div class="z_mask">
    <div class="z_alert">
        <p>确定要删除这张图片吗？</p>
        <p>
            <span class="z_cancel">取消</span>
            <span class="z_sure">确定</span>
        </p>
    </div>
</div>
(function(doc, win) {
    var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function() {
        var clientWidth = docEl.clientWidth;
        if (!clientWidth) return;
        if (clientWidth >= 640) {
            docEl.style.fontSize = '100px';
        } else {
            docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
        }
    };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

//证书图片添加
function imgChange(obj1, obj2) {
    //获取点击的文本框
    var file = document.getElementById("file");
    //存放图片的父级元素
    var imgContainer = document.getElementsByClassName(obj1)[0];
    //获取的图片文件
    var fileList = file.files;
    //文本框的父级元素
    var input = document.getElementsByClassName(obj2)[0];
    var imgArr = [];
    //遍历获取到得图片文件
    for (var i = 0; i < fileList.length; i++) {
        var imgUrl = window.URL.createObjectURL(file.files[i]);
        imgArr.push(imgUrl);
        var img = document.createElement("img");
        img.setAttribute("src", imgArr[i]);
        var imgAdd = document.createElement("div");
        imgAdd.setAttribute("class", "z_addImg");
        imgAdd.appendChild(img);
        imgContainer.appendChild(imgAdd);
    };
    imgRemove();
};

/*证件照上传*/
.z_addImg { 
    margin: 14px; 
    width: 180px; 
    height: 180px; 
    float: left; 
    border: 1px solid #eee;
}
.z_file { 
    position:relative;
    width: 100%; 
    height: 200px; 
    background: url(../images/z_add.png) no-repeat center center; 
    background-size: 180px auto;
}
.offercontent_con_add div:nth-child(4n) {
    margin-right:0;
}
.z_file p{ 
    text-align: center; 
    line-height:20px; 
    font-size: 14px; 
    color: #aaa;
}
.z_file input::-webkit-file-upload-button { 
    width: 1rem; 
    height: 1rem; 
    border: none; 
    position: absolute; 
    outline: 0; 
    opacity: 0;
}
.z_file input#file { 
    display: block; 
    width: 100%; 
    height: 180px; 
    border: 0; 
    vertical-align: middle; 
    position: relative; 
    z-index:99; 
    opacity: 0;
}
.z_file input#file2 { 
    display: block; 
    width: 180px; 
    height: 180px; 
    border: 0; 
    vertical-align: middle; 
    position: relative; 
    z-index:99; 
    opacity: 0;
}
/*遮罩层*/
.z_mask { 
    width: 100%; 
    height: 100%; 
    background: rgba(0, 0, 0, .5); 
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: 999; 
    display: none;
}
.z_alert { 
    width: 300px; 
    height: 180px; 
    border-radius: 4px; 
    background: #fff; 
    font-size: 16px;
    text-align: center; 
    position: absolute;
    left: 50%; 
    top: 50%; 
    margin-left: -1.25rem; 
    margin-top: -100px;
}
.z_alert p:nth-child(1) { 
    line-height: 140px; 
    height: 140px;
}
.z_alert p:nth-child(2) span { 
    display: inline-block; 
    width: 49%; 
    height: 40px; 
    line-height: 40px; 
    float: left; 
    border-top: 1px solid #ddd;
}
.z_cancel { 
    border-right: 1px solid #ddd;
}

IE8兼容：https://blog.csdn.net/u014798510/article/details/51996905

https://www.imooc.com/article/9469

//该部分为图片展示缩略图的自定义

var newImg = '',newUrl = '',ci; ci = opt[0]; for (var i = 0; ci = opt[i++];) { newImg += '<div style="width:102px;height:130px;float:left;margin:10px;">' + '<div><img src="'+ci._src+'" class="img_preview" style="width:100px;height:100px;border:1px solid #ccc;" onclick="imgPreview(this,\''+ ci._src +'\')"/></div>' + '<div style="width:102px;margin:0px auto 0px auto;">' + '<input type="button" value="删除" onclick="deleteImage(this,\'' + ci._src + ',\')" /></div>' + '</div>'; newUrl += ci._src + ','; } var ueditor = $("#" + me.key); var parent = ueditor.closest('.uploadImageDiv'); var img_preview_arr = parent.find('div.img_preview_arr'); var img_url_arr = parent.find('form.imgPreviewForm').find('input.img_url_arr'); var content1 = img_preview_arr.html(); var content2 = img_url_arr.val(); img_preview_arr.html(content1+newImg); img_url_arr.val(content2+newUrl); return;

 

 

方法二：

<style type="text/css">
  #preview,
  .img,
  img {
    width: 200px;
    height: 200px;
  }
   
  #preview {
    border: 1px solid #000;
  }
  </style>

<div id="preview"></div>
<input type="file" onchange="preview(this)" />
<script type="text/javascript">
  function preview(file) {
    var prevDiv = document.getElementById('preview');
    if (file.files && file.files[0]) {
      var reader = new FileReader();
      reader.onload = function(evt) {
        prevDiv.innerHTML = '<img src="' + evt.target.result + '" />';
      }
      reader.readAsDataURL(file.files[0]);
    } else {
      prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
    }
  }
</script>