Javascript 获取与输入类型文件字段关联的标签的ID
我需要获取与输入类型文件字段关联的标签ID。我有一组4个输入类型文件字段,id为photo1、photo2、photo3、photo4。与这些文件字段关联的标签分别为标签-1、标签-2、标签-3和标签-4。我的要求是获取相应的标签字段并更新标签的文本。这就是我迄今为止所尝试的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' />
<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=""></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">×</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);我发现了内维尔。这是我的错!不用担心