JQuery实现上传图片并预览

前段页面代码：

<div id="popUps" class="control-group" style="display: block">
    <label class="control-label">身份证正面：</label>
        <div class="controls">
            <input id="popUpsUrl" type="file" name="files" accept="image/*" onchange="uploadImg(this)">
            <br>
            <img id="popUpImg" src="" width="350px" height="623px">
        </div>
    </div>
    <div id="adBanner" class="control-group" style="display: block">
        <label class="control-label">身份证背面：</label>
        <div class="controls">
            <input id="adBannerUrl" type="file" name="files" accept="image/*" onchange="uploadImg(this)">
            <br>
            <img id="adBannerImg" src="" width="350px" height="49px">
    </div>
</div>

```javascript
function uploadImg(file) {
    if (!file.files || !file.files[0]) {
        return;
    }
    var reader = new FileReader();
    reader.onload = function (evt) {
        if (file.id === 'popUpsUrl') {
            document.getElementById('popUpImg').src = evt.target.result;
            image = evt.target.result;
        } else if (file.id === 'popUpsUrl2') {
            document.getElementById('popUpImg2').src = evt.target.result;
            image = evt.target.result;
        }
    };
    reader.readAsDataURL(file.files[0]);
}

上面的方法是比较笨的一种，也是容易想到的一种方法。还可以用下一种方法实现：

function uploadImg(file) {
    if (!file.files || !file.files[0]) {
        return;
    }
    var reader = new FileReader();
    reader.onload = function (evt) {
        image = evt.target.result;
            $("#"+file.id).parent().find("img").attr("src",image);
    };
    reader.readAsDataURL(file.files[0]);
}

原文链接: https://onlyou.blog.csdn.net//article/details/102822059

目录