javascript - 单击时未打开图像选择窗口？

Question

我添加了一个用于上传图像的自定义按钮。但是单击按钮时，它不会打开用于选择图像的窗口/模式。

我创建了以下代码片段:

.cx_forms{padding:30px 0; max-width:700px;}
.cx_forms-header{margin-bottom:30px;}
.cx_forms h4{color:#2baab1; font-size:24px;}
.cx_forms-header p{margin-top:10px;}
.cx_forms-header p:first-child{margin-top:0;}
.cx_forms-contents ul li{margin-bottom:30px;}
.cx_forms-contents ul li:last-child{margin-bottom:0;}
.cx_forms-contents ul li label{display:block; margin:0 0 10px 0; line-height:1.6;}
.cx_forms-contents ul li .form-control{border-radius:4px; height:40px;}
.cx_forms-contents ul li textarea.form-control{min-height:150px; resize:none;}
.cx_forms-contents ul li .row.rows{margin:-15px;}
.cx_forms-contents ul li .row.rows .columns{padding:15px;}
.required{color:#ff0000; font-size:20px; display:inline-block; font-weight:normal; line-height:1;}
.cx_forms .cx_forms-contents ul li h4{margin-bottom:15px;}
.cx_radio-group{margin:-5px -15px;}
.cx_radio-column{padding:5px 15px;}
.cx_forms-label{margin-bottom:10px; font-weight:600;}

.custom-file-input-wrap{position:relative; margin-top:20px;}
.custom-file-input-wrap .custom-file-input{display:none;}
.custom-file-input-label{background-color:#45bfcb; padding:10px 15px; line-height:20px; text-align:center; color:#fff; font-size:15px; font-weight:400; cursor:pointer; display:inline-block !important;}
.custom-file-input-label:hover, .custom-file-input-label:focus{color:#fff; background-color:#33b3c0;}
.cx_forms .submit-btn{background-color:#45bfcb; padding:10px 15px; line-height:20px; text-align:center; color:#fff; font-size:15px; font-weight:400; cursor:pointer; display:block; border:0; height:44px;}
.cx_forms .submit-btn:hover{color:#fff; background-color:#33b3c0;}
.custom-file-input-labels{display:none; font-size:13px;}
.custom-file-input-labels span{display:inline-block; margin-right:5px;}
.custom-file-input-labels span:last-child{margin-right:0;}
.custom-file-input-labels span.cx_form-close-btn{font-size:16px; cursor:pointer; color:#2baab1;}


@media(max-width:767px){
    .cx_radio-group{display:block !important;}
    .cx_forms h4{font-size:22px;}
}
@media(max-width:640px){
    .cx_forms h4{font-size:20px;}
}
@media(max-width:575px){
    .cx_forms h4{font-size:18px;}
}

<div class="custom-file-input-wrap">
	<label class="custom-file-input-label d-block" for="upload-btn-1">Upload Images</label>
	<div class="MultiFile-wrap" id="MultiFile1"><input name="path_5[]" type="file" class="multi custom-file-input MultiFile-applied" multiple="" id="MultiFile1" value=""><div class="MultiFile-list" id="MultiFile1_list"></div></div>
	<div class="custom-file-input-labels custom-file-input-label-2"><span class="cx_form-close-btn">x</span><span class="cx_file-names"></span></div>
</div>

我正在使用jquery-MultFile这种形式的库。

Answer 1

添加此 CSS

.custom-file-input-wrap .custom-file-input {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 121px;
    height: 100%;
    opacity: 0;
}

.cx_forms{padding:30px 0; max-width:700px;}
.cx_forms-header{margin-bottom:30px;}
.cx_forms h4{color:#2baab1; font-size:24px;}
.cx_forms-header p{margin-top:10px;}
.cx_forms-header p:first-child{margin-top:0;}
.cx_forms-contents ul li{margin-bottom:30px;}
.cx_forms-contents ul li:last-child{margin-bottom:0;}
.cx_forms-contents ul li label{display:block; margin:0 0 10px 0; line-height:1.6;}
.cx_forms-contents ul li .form-control{border-radius:4px; height:40px;}
.cx_forms-contents ul li textarea.form-control{min-height:150px; resize:none;}
.cx_forms-contents ul li .row.rows{margin:-15px;}
.cx_forms-contents ul li .row.rows .columns{padding:15px;}
.required{color:#ff0000; font-size:20px; display:inline-block; font-weight:normal; line-height:1;}
.cx_forms .cx_forms-contents ul li h4{margin-bottom:15px;}
.cx_radio-group{margin:-5px -15px;}
.cx_radio-column{padding:5px 15px;}
.cx_forms-label{margin-bottom:10px; font-weight:600;}

.custom-file-input-wrap{position:relative; margin-top:20px;}
.custom-file-input-wrap .custom-file-input{display:none;}
.custom-file-input-label{background-color:#45bfcb; padding:10px 15px; line-height:20px; text-align:center; color:#fff; font-size:15px; font-weight:400; cursor:pointer; display:inline-block !important;}
.custom-file-input-label:hover, .custom-file-input-label:focus{color:#fff; background-color:#33b3c0;}
.cx_forms .submit-btn{background-color:#45bfcb; padding:10px 15px; line-height:20px; text-align:center; color:#fff; font-size:15px; font-weight:400; cursor:pointer; display:block; border:0; height:44px;}
.cx_forms .submit-btn:hover{color:#fff; background-color:#33b3c0;}
.custom-file-input-labels{display:none; font-size:13px;}
.custom-file-input-labels span{display:inline-block; margin-right:5px;}
.custom-file-input-labels span:last-child{margin-right:0;}
.custom-file-input-labels span.cx_form-close-btn{font-size:16px; cursor:pointer; color:#2baab1;}


@media(max-width:767px){
    .cx_radio-group{display:block !important;}
    .cx_forms h4{font-size:22px;}
}
@media(max-width:640px){
    .cx_forms h4{font-size:20px;}
}
@media(max-width:575px){
    .cx_forms h4{font-size:18px;}
}
.custom-file-input-wrap .custom-file-input {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 121px;
    height: 100%;
    display: inline-block;
    opacity: 0;
}

<div class="custom-file-input-wrap">
	<label class="custom-file-input-label d-block" for="upload-btn-1">Upload Images</label>
	<div class="MultiFile-wrap" id="MultiFile1"><input name="path_5[]" type="file" class="multi custom-file-input MultiFile-applied" multiple="" id="MultiFile1" value=""><div class="MultiFile-list" id="MultiFile1_list"></div></div>
	<div class="custom-file-input-labels custom-file-input-label-2"><span class="cx_form-close-btn">x</span><span class="cx_file-names"></span></div>
</div>