Javascript 获取与输入类型文件字段关联的标签的ID

Javascript 获取与输入类型文件字段关联的标签的ID,javascript,jquery,Javascript,Jquery,我需要获取与输入类型文件字段关联的标签ID。我有一组4个输入类型文件字段,id为photo1、photo2、photo3、photo4。与这些文件字段关联的标签分别为标签-1、标签-2、标签-3和标签-4。我的要求是获取相应的标签字段并更新标签的文本。这就是我迄今为止所尝试的 <div class="koh-contact-photo"> <span><fmt:message key='photo1' />

我需要获取与输入类型文件字段关联的标签ID。我有一组4个输入类型文件字段,id为photo1、photo2、photo3、photo4。与这些文件字段关联的标签分别为标签-1、标签-2、标签-3和标签-4。我的要求是获取相应的标签字段并更新标签的文本。这就是我迄今为止所尝试的

<div class="koh-contact-photo">
                            <span><fmt:message key='photo1' /></span> <label id="upload-1" class="button-default" ><fmt:message
                                    key='photo.upload' /></label>
                            <div id="preview-1" class="preview"></div>
                            <button type="button" class="koh-photo-remove remove-button">
                                <span class="icon" data-icon="&#xe605"></span> <span
                                    class="label"><fmt:message key='photo.remove.text' /></span>
                            </button>

                        <!-- The Modal -->
                            <div id="myModal1" class="modal">
                                 <!-- Modal content -->

                                 <div class="modal-content">
                                 <span class="close">&times;</span>
                                 <h3 class="modal-title"> Upload Photo </h3>

                                <div class="modal-inner">
                                <span>Browse for a photo</span> <label id="label-1" style="margin-bottom:20px;" class="button-default browse" for="photo1">BROWSE</label><input id="photo1" type="file"
                                name="photo1" data-parsley-filesize="3"
                                data-parsley-filetype="image/jpeg, image/png, image/gif, image/bmp"
                                data-parsley-trigger="change" />

                                <hr class="modal-hr" />
                                <div class="guidelines-modal">
                                    <p> GENERAL GUIDELINES </p>
                                    <p> Supported files are: .jpg, .gif, .png, .bmp </p>
                                    <p> Maximum File Size: 3MB</p>
                                    <p style="margin-bottom:10px;"> For best results: upload at 400 x 300</p>
                                    <p> Note: images are automatically resized</p>
                                </div>
                                <div class="koh-contact-captcha modal-hr">
                                <!--div class="g-recaptcha" data-sitekey=<fmt:message key='kohlerSterling.google.captcha.key' />></div-->
                                    <!--div class="g-recaptcha" id="recaptcha1"></div-->            
                                    <div id="recaptcha3" class="captcha"></div>
                                    <div class="error-message">
                                        <span><fmt:message key='required.field.text' /></span>
                                    </div>

                                </div>
                                <div class="terms-modal">
                                <div class="checkbox">
                                <input type="checkbox" id="terms-condns" required/>
                                <label style="font-family:Helvetica Neue LT Pro Roman !important;font-size:12px !important;color:#000 !important;font-weight:400 !important;" for="terms-condns">I agree to the <a class="modal-anchor" href="#">Terms and Conditions</a></label>                                           
                                </div>
                                </div>
                                <hr class="modal-hr" />
                                <div class="modal-buttons">
                                    <label class="button-default-modal" style="margin-right:20px;">CANCEL</label>
                                    <label id="input-button-modal-1" class="input-button-modal">UPLOAD</label>
                                </div>

                                </div>
                              </div>
                              <input type="hidden" id="captchaKey" value="<fmt:message key='google.recaptcha.site.key'/>">
                              </div>
                              </div>

&时代;
上传照片
浏览照片浏览

一般准则

支持的文件有:.jpg、.gif、.png、.bmp

最大文件大小:3MB

要获得最佳效果,请以400 x 300的速度上载

注意:图像会自动调整大小

我同意这个建议
取消 上传
我有4节这样的课。这就是javascript

$contactPhotos.each(function () {
            var $photoInput = $(this).find("input[type=file]");
            var img = $("<img />");
            var photoPreview = $photoInput.parent().parent().parent().parent().find(".preview").attr("id");
            var photoPreviewImg = $("#" + photoPreview);
            function readURL(input) {
                if (input.files && input.files[0]) {
                    photoPreviewImg.html("");
                    //alert(JSON.stringify(photoPreviewImg, null, 4));
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        img.attr("style", "height:41px;");
                        img.attr("style", "width:210px;");
                        img.attr("src", e.target.result);
                    }
                    reader.readAsDataURL(input.files[0]);

                }
            }
            $(this).on('click','.input-button-modal', function(e) {         
                    var contactModal = $(this).parent().parent().parent().parent().parent().find(".modal").attr('id');
                    var currentModal = $('#' + contactModal);
                    currentModal.attr("style", "display:none");
                    photoPreviewImg.append(img);
            });

            $photoInput.parsley().on('field:success', function() {
                    var inputID = $photoInput.attr('id');
                    var inputTarget = '#' + inputID;
                    var inputValue = document.getElementById(inputID);
                    //inputLabel.attr("style", 'width:70%;');
                    readURL(inputValue);
                    $(inputTarget).parent().parent().parent().parent().find('.koh-photo-remove').show();
                    $contactForm.find('#terms').prop('required',true);
                });
            });
$contactPhotos.每个(函数(){
var$photoInput=$(this).find(“输入[type=file]”);
变量img=$(“

非常感谢您的帮助。我想获取与每个输入类型文件字段相关联的标签ID。请提前感谢。

标签和输入字段通过标签的
链接,标签的
是输入的
ID
。您只需利用该链接即可

function getLabelID(input){
    return $("label['for=" + $(input).attr("id") + "']").attr("id");
}

标签和输入字段由作为输入id的标签的
for
链接。您只需利用该链接即可

function getLabelID(input){
    return $("label['for=" + $(input).attr("id") + "']").attr("id");
}

为什么我在调用以下内容时得到一个[object object]['for=“+$photoInput.attr('id')+“]”).attr(“id”);var-inputLabel=$(“#”+inputLabelId);我发现了内维尔。这是我的错!不用担心