1、清空file类型的input选中的文件:
var obj = document.getElementById("detailContentImage") ;
obj.outerHTML=obj.outerHTML;
2、图片实现预览:
这里是从后台传过来的数据,可以预览,也可以重新上传图片。预览的逻辑是本地上传了图片则显示本地的,否则显示远程的,所以把远程图片的url放在一个text类型的input中。防止图片名字过长,显示不美观,所以单独 加了一个text类型的input,远程的url最多只显示前50个字符。
<tr>
<td>详情图片:</td>
<td>
<input type="file" id="detailContentImage" name="file" style="display: inline-block" onchange="contentImgChange()" accept="image/*"></td>
<td> <button id="previewDetailContentImage" class="btn btn-success dropdown-toggle">预览</button>
<td> <button id="uploadDetailContentImage" class="btn btn-success dropdown-toggle">上传</button>
</td>
</tr>
<tr><td></td>
<td colspan="3" style="width: 50px;word-wrap:break-word;word-break:break-all;"><span id="showContentImgText" style="width: 50px;" ></span></td>
<td style="width: 50px;word-wrap:break-word;word-break:break-all;"><span id="contentImgText" style="width: 50px;" class="imgText"></span></td>
</tr>
<!--预览图片弹框开始-->
<div class="modal fade imgPrivewDialog" id="detailImgPreviewModal">
<div class="modal-dialog imgDialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="detailImgPriewClose" ><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
</div>
<div class="modal-body imgBody" id="detailImgBody">
<!-- <img id="imgshow" src="" /> -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default detailImgPriewClose" >关闭</button>
</div>
</div>
</div>
</div>
<!--预览图片弹框结束-->
预览调用事件:
function detailPreview(id,textId){
$("#detailImgPreviewModal").modal("toggle");
//远程url
var textUrl = $("#"+textId).html();
var src = "";
try{
var f = document.getElementById(id).files[0];
src = window.URL.createObjectURL(f);
}catch(err){
//抛出异常,说明本地没有选择图片
src = textUrl;
}
var imgHtml = '<img src="'+src+'"/>';
$("#detailImgBody").html(imgHtml);
}