如何添加完图片之后，将新添加的图片显示在页面中

一、jsp中引入上传图片按钮

 

<tr id="video_pic" hidden>    
                 <td style="width:20%">视频封面图：<span style="color:red">*</span></td>
                  <td style="width:80%"> 
                <input type=file name="video_list_pic" id="video_list_pic"
                  onchange="javascript:setImagePreview(this);">
                <div id="localImag1">
                <img id="preview1" width=-1 height=-1 style="diplay:none" />
                </div>
                <span style="color: red">如果需要更新图片，请直接上传对应的图片即可！</span></td>
                </td>      
    </tr>

    二、js中引入函数        

function setImagePreview(obj) {
    var docObj = obj;
    var imgObjPreview = $(obj).next().find("img")[0];
    if (docObj.files && docObj.files[0]) {
        imgObjPreview.style.display = 'block';
        imgObjPreview.style.width = '300px';
        imgObjPreview.style.height = '120px';
    } else {
        docObj.select();
        var imgSrc = document.selection.createRange().text;
        var localImagId = $(obj).next()[0];
        // 必须设置初始大小
        localImagId.style.width = "250px";
        localImagId.style.height = "200px";
        try {
            localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
            localImagId.filters
                    .item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
        } catch (e) {
            alert("您上传的图片格式不正确，请重新选择!");
            return false;
        }
        imgObjPreview.style.display = 'none';
        document.selection.empty();
    }
    return true;
}

三、效果展示