다음 HTML 설정이 있으며이 문제를 해결할 수 없습니다.
html 문서의 버튼을 클릭하면 요소가
<div id='wrapper'>
<input id='fileUpload' name='fileUpload' type='file' onchange='uploadpreview(this.id)' multiple />
<br />
<div id='image-holder'></div>
</div>
함수를 사용하여 추가됩니다.
function add(){
$j("<?php echo($divoutput)?>").insertBefore("#addbox");
}
(php 코드에는 html 형식이 있습니다).
그러나이 작업이 완료되면 javascript 함수 (이미 html 문서에 있으며 코드를 통해 추가되지 않음)가 작동하지 않습니다.
$("#fileUpload").on('change', uploadpreview() {
//Get count of selected files
var countFiles = upload[0].files.length;
var imgPath = upload[0].value;
var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
var image_holder = $("#image-holder");
image_holder.empty();
if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
if (typeof (FileReader) != "undefined") {
//loop for each file selected for uploaded.
for (var i = 0; i < countFiles; i++) {
var reader = new FileReader();
reader.onload = function (e) {
$("<img />", {
"src": e.target.result,
"class": "thumb-image"
}).appendTo(image_holder);
}
image_holder.show();
reader.readAsDataURL(upload[0].files[i]);
}
} else {
alert("This browser does not support FileReader.");
}
} else {
alert("Pls select only images");
}
}
파일이 업로드 된 경우에도 길이를 읽을 수 없다는 오류가 발생합니다.
이것의 문제는 무엇 일 수 있습니까?
코드를 통해 추가하지 않고 코드를 개별적으로 시도했으며 모든 것이 완벽하게 작동합니다.
도와주세요!
좋아, 내가 당신이 dom에 물건을 추가하고 새로 추가 된 요소에 이벤트를 바인딩하고 싶다는 것을 이해하는지 봅시다. 이 경우 이벤트를 본문과 바인딩하여 다음과 같이 본문에서 아래로 "스캔"합니다.
$('body').on( 'change', '#fileUpload', function() {
DoSomething();
});
희망이 도움이
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다