I have simple script that build simple html elements objetcs and I have there input type =file that supposted to load image in the client side based on this example: how-to-preview-image-before-uploading-in-jquery but somehow the function
$("#fileOpen").change(function()
is not triggered this is my script :
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
.main_container {
width: 250px;
border: 0px solid;
}
.TextBoxDivClass
{
width: 250px;
border: 1px solid;
}
.img_holder {
float: left;
width: 250px;
height:250px;
padding: 0px;
border: 1px solid;
text-align: center;
margin-top: 0px;
margin-left: 0px;
}
.txt_holder {
float: right;
padding: 0px;
text-align: right;
margin-top: auto;
margin-left: auto;
}
</style>
<script src="jquery-1.11.1.min.js"></script>
<script type='text/javascript'>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#previewHolder').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$(document).ready(function() {
var iCounter = 0;
// put all your jQuery goodness in here.
$("#fileOpen").change(function() {
alert("name");
var name1 = $(this).attr("name");
alert(name1);
readURL(this);
});
$("#add_Level").click(function(){
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv_' + iCounter);
newTextBoxDiv.attr("class", 'TextBoxDivClass');
newTextBoxDiv.after().html('<label>Textbox #'+ iCounter + ' : </label><br/>' +
'<input type="file" id="fileOpen" name="add_imagetotxt_' + iCounter + '" value="add Image"/>' +
'<img id="previewHolder_"' + iCounter + '" alt="Uploaded Image Preview Holder" width="250px" height="250px" class="img_holder" /><br/>'+
'<input class="txt_holder" type="text" size="20" maxlength="2" name="textbox_' + iCounter + '" id="textbox_' + iCounter + '" value="" ><br/>'+
'<input class="txt_holder" type="text" size="20" maxlength="2" name="textbox_' + iCounter + '" id="textbox_' + iCounter + '" value="" ><br/>'+
'<input class="txt_holder" type="text" size="20" maxlength="2" name="textbox_' + iCounter + '" id="textbox_' + iCounter + '" value="" ><br/>'
);
newTextBoxDiv.appendTo("#main_container");
iCounter++;
});
$("#Remove_Level").click(function () {
if(iCounter==0){
alert("No more textbox to remove");
return false;
}
iCounter--;
$("#TextBoxDiv_" + iCounter).remove();
});
});
</script>
<title>GEditor</title>
</head>
<body>
<p><input type ="button" id="add_Level" value="Add Level +"/>
<input type ="button" id="Remove_Level" value="Remove Level -"/>
<input type ="button" id="save_set" value="Save set"/></p>
<div id="main_container" class="container" >
</div>
</body>
</html>
The all html working but the file type object refuse to trigger the change event
