Question

我有简单的脚本，可以构建简单的html元素objetcs 我有输入type = file，它支持在客户端加载图像基于这个例子： how-to-preview-image-before-uploading-in-jquery 但不知何故功能

$("#fileOpen").change(function()

未触发这是我的剧本：

<%@ 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>

所有html工作但文件类型对象拒绝触发更改事件

Answer 1

使用事件委派方法，因为内容是动态添加的：

$(document).on('change','#fileOpen',function()

check about event delegation

Jquery图像客户端图像预览器dosn触发功能

1 个答案: