2
패널을 동적으로 추가하거나 제거하는 jQuery UI Accordion 이미지 로더를 만들었습니다. 각 패널 내부에는 이미지 입력 폼 컨트롤이 있으며 문서의 끝에는 패널의 img src를 새로 선택한 이미지로 변경하는 함수가 있습니다. 불행히도, 나는 점점 : cannot read 'files' of undefined. 나는 왜 이렇게하는지, 필자는 패널을 동적으로 추가하고 이미지를로드 한 패널의 img src를 업데이트 할 수있는 방법이 필요하다는 것을 이해합니다.동적으로 생성 된 객체를 함수에 전달합니다.
내 코드는 지금까지이며, 다음과 같이 1
내 주요 선택/로더 기능을 변경
<!DOCTYPE html>
<html lang="en">
<head>
<!-- css links -->
<link href="/Content/bootstrap-theme.css" rel="stylesheet" />
<link href="/Content/bootstrap.css" rel="stylesheet" />
<link href="/Scripts/jquery-ui-1.12.0/jquery-ui.css" rel="stylesheet" />
<!-- /css links -->
<!-- js files -->
<script src="/Scripts/jquery-3.1.0.js"></script>
<script src="/Scripts/jquery-ui-1.12.0/jquery-ui.js"></script>
<!-- /js files -->
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
<script lang="en" type="text/javascript">
$(function() {
$("#PrimaryImageAccordion").accordion({
collapsible: true
});
});
</script>
<br /><br />
<button type='button' onclick='btnAddPrimaryImage_Click();' class='btn btn-default'> Add </button>
<div id="PrimaryImageAccordion">
<h4 class="PrimaryImageTitle">Primary Image</h4>
<div>
<div class="row form-group">
<label for="ImageSelector" class="control-label col-md-2">Project Image</label>
<div class="col-md-10">
<input type="file" id="ImageSelector" onchange="ImageSelector_Change(this);" /><br />
<img id="Image" src="#" style="width: 100px; visibility: hidden;" />
</div>
</div>
</div>
</div>
<script lang="en" type="text/javascript">
function btnAddPrimaryImage_Click() {
var template = "<h4 class='PrimaryImageTitle'>Primary Image<a onclick='removePanel(this);' style='float:right'>X</a></h4>\n";
template += "<div class='AccordionPanel'><div class='row form-group'>\n";
template += "<label for='ImageSelector' class='control-label col-md-2'>Project Image</label>\n";
template += "<div class='col-md-10'>\n";
template += "<input type='file' id='Image1Selector' /><br />\n";
template += "<img id='Image' src='#' style='width: 100px; visibility: hidden;' />\n";
template += "</div></div></div>\n";
$("#PrimaryImageAccordion").append(template);
$("#PrimaryImageAccordion").accordion("refresh");
}
function removePanel(a) {
$(a).parent().next().remove();
$(a).parent().remove();
$("#PrimaryImageAccordion").accordion("refresh");
return false;
}
function ImageSelector_Change(object, input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
object.attr("src", e.target.result);
object.css("visibility", "visible");
}
reader.readAsDataURL(input.files[0]);
}
}
</script>
</body>
</html>
업데이트 :
function ImageSelector_Change(input) {
var object = $(input).parent().find('img#Image');
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
object.attr("src", e.target.result);
object.css("visibility", "visible");
}
reader.readAsDataURL(input.files[0]);
}
}
유일한 문제는 그것이로드이다 추가 이미지가 아닌 첫 번째 이미지 만
'65 행에서'null '의'src '속성을 설정할 수 없습니다. 특히'document.getElementById (input) .src = e.target.result;'. 나는 내 대답으로 일할 수 있었고, 두 가지 대답을 함께 해결할 수있는 기회를 얻었습니까? –
@JohnSchultz 인라인 이벤트를 변경했습니다 : onchange = "ImageSelector_Change (this, 'Image');" 여기서 이것은 입력 유형 파일이고 두 번째 매개 변수는 해당 img 태그의 ID입니다. 그것은 내 발췌 문장에서 작동합니까? – gaetanoM
예, 도움을 주셔서 감사합니다. –