Javascript 动态创建html以获取图像-我希望在提交之前显示检索到的图像

我正在使用js动态创建加载图像的html。我想在选择图像后显示它。我找到了这样做的功能；然而，在我的例子中，它们并没有显示图像。我尝试在调用“$（document）.ready（function（）{”中的“function displayCamp（）{”之前放置函数

选择将起作用并显示图像名称

js:

函数displayCamp（）{
$（'#ajaxGetUserServletResponse1'）。文本（''；
sessionStorage.setItem（'ssCamp'，'packholiday'）；
var dataToBeSent={
ssYMID:sessionStorage.getItem（'ssYMID'），
ssCamp:sessionStorage.getItem（'ssCamp'），
};
//获取营地详细信息
$.ajax({
url:'CampView'，//您的Servlet映射或JSP（不建议使用）
数据：dataToBeSent，
键入：“POST”，
缓存：false
})
.fail（函数（jqXHR、textStatus、errorshown）{
//警报（jqXHR.responseText）；
if（jqXHR.responseText.includes（'No-camps'））{
$（'ajaxGetUserServletResponse'）.text（'No camps'）；
}否则{
$（'#ajaxGetUserServletResponse'）.text（'获取联接数据时出错'）；
}
$（“#开始日期”）.focus（）；
})
.完成（功能（响应JSON1A）{
//用于填充选项卡的JSON响应
数据类型：“json”；
//活动结构为：
//字符串eventId、字符串cdId、字符串eventType、，
//字符串eventDateStart、字符串eventDateEnd、字符串eventLocation、字符串eventDetails、，
//字符串eventNights、字符串eventNightsBuilding、字符串eventNightsCanvas、字符串eventPicture、，
//字符串eventKm、字符串eventKmActual、字符串eventKmOffset
//添加选项卡标题
$（“#tabHeading”）.find（“li”）.remove（）；
var headingItems=''；
对于（变量i=0；i

将“函数readURL（输入）{”放在“$”（“#我的选项卡a:第一个”）.tab（“显示”）之后

js:

函数displayCamp（）{
$（'#ajaxGetUserServletResponse1'）。文本（''；
sessionStorage.setItem（'ssCamp'，'packholiday'）；
var dataToBeSent={
ssYMID:sessionStorage.getItem（'ssYMID'），
ssCamp:sessionStorage.getItem（'ssCamp'），
};
//获取营地详细信息
$.ajax({
url:'CampView'，//您的Servlet映射或JSP（不建议使用）
数据：dataToBeSent，
键入：“POST”，
缓存：false
})
.fail（函数（jqXHR、textStatus、errorshown）{
//警报（jqXHR.responseText）；
if（jqXHR.responseText.includes（'No-camps'））{
$（'ajaxGetUserServletResponse'）.text（'No camps'）；
}否则{
$（'#ajaxGetUserServletResponse'）.text（'获取联接数据时出错'）；
}
$（“#开始日期”）.focus（）；
})
.完成（功能（响应JSON1A）{
//用于填充选项卡的JSON响应
数据类型：“json”；
//活动结构为：
//字符串eventId、字符串cdId、字符串eventType、，
//字符串eventDateStart、字符串eventDateEnd、字符串eventLocation、字符串eventDetails、，
//字符串eventNights、字符串eventNightsBuilding、字符串eventNightsCanvas、字符串eventPicture、，
//字符串eventKm、字符串eventKmActual、字符串eventKmOffset
//添加选项卡标题
$（“#tabHeading”）.find（“li”）.remove（）；
var headingItems=''；
对于（变量i=0；i

以下是我所做的更改：

        //Column 2 to contain the image
        contents += '<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">';
        contents += '<label class="control-label control-label-left col-lg-4 col-md-4 col-sm-4 col-xs-4" for="'+obj.eventId+'">Photograph:</label>';
        contents += '<input class="form-control-file col-lg-8 col-md-8 col-sm-8 col-xs-8 photo-input" type="file" id="'+obj.eventId+'" name="photo" placeholder="Photograph">';
        contents += '<img id="campImage'+obj.eventId+'" src="' + obj.eventPicture + '" alt="Camp image" class="img-thumbnail">';
        contents += '</div>';

---

我在下面找到了，它只工作了

function displayCamp() {

    $('#ajaxGetUserServletResponse1').text('');

    sessionStorage.setItem('ssCamp', 'Pack Holiday');

    var dataToBeSent  = {
            ssYMID : sessionStorage.getItem('ssYMID'),
            ssCamp : sessionStorage.getItem('ssCamp'),
    };

    //Get camp details
    $.ajax({
        url : 'CampView', // Your Servlet mapping or JSP(not suggested)
        data : dataToBeSent, 
        type : 'POST',
        cache: false
    })
    .fail (function(jqXHR, textStatus, errorThrown) {
        //alert(jqXHR.responseText);
        if(jqXHR.responseText.includes('No camps')){
                $('#ajaxGetUserServletResponse').text('No camps.');
            }else{
                $('#ajaxGetUserServletResponse').text('Error getting joined data.');
            }
        $("#startDate").focus();
    })
    .done(function(responseJson1a){
        // JSON response to populate the Tabs
        dataType: "json";

//      Event structure is:
//         String eventId, String cdId, String eventType, 
//         String eventDateStart, String eventDateEnd, String eventLocation, String eventDetails,
//         String eventNights, String eventNightsBuilding, String eventNightsCanvas, String eventPicture,
//         String eventKm, String eventKmActual, String eventKmOffset

        //Add Tab headings
        $("#tabHeading").find("li").remove();
        var headingItems = '';
        for(var i = 0; i < responseJson1a.length; i++) {
            var obj = responseJson1a[i];
            // data-toggle="tab" is required.
            headingItems += '<li id="' + i + '"><a data-toggle="tab" href="#' + obj.eventId +'">' + obj.eventLocation + '</a></li>';
        }
        $("#my-tabs ul").append(headingItems);

        //Add Tab contents
        var contents = '';
        for(var i = 0; i < responseJson1a.length; i++) {
            var obj = responseJson1a[i];
            // class="tab-pane" is required.
            contents += '<div class="tab-pane fade" id="' + obj.eventId + '">';

            contents += '<div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">';

            contents += '<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">';
            contents += '<label class="control-label control-label-left col-lg-4 col-md-4 col-sm-4 col-xs-4" for="photo">Photograph:</label>';
            contents += '<input class="form-control-file col-lg-8 col-md-8 col-sm-8 col-xs-8" type="file" id="photo" name="photo" placeholder="Photograph">';
            contents += '<img id="campImage" src="#" alt="Camp image" class="img-thumbnail">';
            contents += '</div>';

            contents += '</div>';

            $("#tabContent").append(contents);
            contents = '';
        }
        // show the first tab.
        $("#my-tabs a:first").tab("show");

        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#campImage').attr('src', e.target.result);
                }

                reader.readAsDataURL(input.files[0]);
            }
        }

        $("#photo").change(function(){
            readURL(this);
        });
    })
}

        //Column 2 to contain the image
        contents += '<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">';
        contents += '<label class="control-label control-label-left col-lg-4 col-md-4 col-sm-4 col-xs-4" for="'+obj.eventId+'">Photograph:</label>';
        contents += '<input class="form-control-file col-lg-8 col-md-8 col-sm-8 col-xs-8 photo-input" type="file" id="'+obj.eventId+'" name="photo" placeholder="Photograph">';
        contents += '<img id="campImage'+obj.eventId+'" src="' + obj.eventPicture + '" alt="Camp image" class="img-thumbnail">';
        contents += '</div>';

    $(document).on('change', '.photo-input', function(){
        alert("this.id: " + this.id);
        readURL(this, this.id);
    });

    function readURL(input, id) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#campImage'+id).attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }