PHP群:95885625 Hbuilder+MUI群:81989597 站长QQ:634381967
    您现在的位置: 首页 > 开发编程 > HTML5+CSS3教程 > 正文

    HTML5美化上传框

    作者:admin来源:网络浏览:时间:2020-09-30 00:07:50我要评论
    导读:方法一: 在隐藏的文件输入框上调用click()方法,方法二:用label
    方法一: 在隐藏的文件输入框上调用click()方法
    隐藏掉默认的的文件输入框 <input> 元素,使用自定义的界面来充当打开文件选择对话框的按钮。要使用样式 display:none 把原本的文件输入框隐藏掉,然后在需要的时候调用它的click()方法就行了。

    <input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
    <a href="#" id="fileSelect">选择文件</a>

    var fileSelect = document.getElementById("fileSelect"),
      fileElem = document.getElementById("fileElem");

    fileSelect.addEventListener("click", function (e) {
      if (fileElem) {
        fileElem.click();  // jQuery可以使用 trigger()
      }
      e.preventDefault(); // prevent navigation to "#"
    }, false);

    方法二:用label

    隐藏input,把样式写到label上,点击label就是对input进行操作。

    Demo3

    <input id="img_input2" type="file" accept="image/*"/>
    <label for="img_input2" id="img_label2">选择文件
        <i class="fa fa-plus fa-lg"></i>
    </label>
    <div id="preview_box2"></div>


    #img_input2 {
      display: none;
    }
    #img_label2 {
      background-color: #f2d547;
      border-radius: 5px;
      display: inline-block;
      padding: 10px;
    }
    #preview_box2 img {
      width: 200px;
    }
    转载请注明(B5教程网)原文链接:https://b5.mxunkeji.com/content-142-3591-1.html
    相关热词搜索: