file类型的input

灰太狼 2022-05-15 12:29 199阅读 0赞

1、清空file类型的input选中的文件：

var obj = document.getElementById("detailContentImage") ;

obj.outerHTML=obj.outerHTML;

2、图片实现预览：

![70][]

这里是从后台传过来的数据，可以预览，也可以重新上传图片。预览的逻辑是本地上传了图片则显示本地的，否则显示远程的，所以把远程图片的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">
                   
    			</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);
     }

[70]: /images/20220515/16b929a01ade444a94261d126c3b38fc.png

发表评论取消回复

表情：

评论列表（有 0 条评论，199人围观）

还没有评论，来说两句吧...

相关阅读

相关 input file 样式美化

input file 样式美化 [点击查看文件上传美化][Link 1][https://www.buruyouni.com/static/demo/%E6%96%87%E4

冷不防/ 2023年07月12日 14:25/ 0 赞/ 13 阅读

相关 input file accept限制文件上传类型

连接 [https://blog.csdn.net/u010865136/article/details/90764197][https_blog.csdn.net_u010

深藏阁楼爱情的钟/ 2022年09月05日 11:30/ 0 赞/ 190 阅读

相关美化 file input 框

1. 浏览器端显示 ![SouthEast][] 2. 示例下载（免积分） [美化file input.zip][file input.zi

雨点打透心脏的1/2处/ 2022年08月10日 17:34/ 0 赞/ 210 阅读

相关监测input file的事件

今天要写个监听input file是否选中文件的事件，之前写过监测input值的变化事件，如下： $("input").bind('input porpertycha

╰半橙微兮°/ 2022年06月17日 03:13/ 0 赞/ 223 阅读

相关 Bootstrap File Input introduce

official website： [http://plugins.krajee.com/file-input][http_plugins.krajee.com_file-

蔚落/ 2022年06月13日 05:36/ 0 赞/ 189 阅读

相关修改提交文件的input类型为file控件的样式

这个控件的样式，我想是一直被人鄙视的，丑的不能再丑了，今天终于找到一个方法可以修改它的默认样式。代码如下所示： <!DOCTYPE html> <html l

深藏阁楼爱情的钟/ 2022年06月12日 04:45/ 0 赞/ 201 阅读

相关清除file类型的input值

问题背景：非现场开户，需要上传身份证照片，见证视频等信息。当客户上传文件后，由于文件不符合要求等问题，需要重新上传。但重新上传后发现，不能触发input的oncha

一时失言乱红尘/ 2022年06月10日 23:40/ 0 赞/ 305 阅读

相关 file类型的input

1、清空file类型的input选中的文件： var obj = document.getElementById("detailContentImage") ; obj.o

灰太狼/ 2022年05月15日 12:29/ 0 赞/ 200 阅读

相关 HTML5 - 限制input file 可选择的文件类型

前言实现选择文件并上传的功能时，都会用到 input file 控件。 `<input id="inputFile" type="file" />`

比眉伴天荒/ 2021年09月18日 13:56/ 0 赞/ 576 阅读

相关 HTML5的 input:file上传以及类型控制

以HTML5的文件上传API 如下demo代码在`.html`文件打开即可： <!DOCTYPE html> <html lang="zh_cn">

川长思鸟来/ 2021年06月26日 16:06/ 0 赞/ 434 阅读