file类型的input

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/w_t_y_y/article/details/82190879

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);
 }