javascript - 动态创建 html 来获取图像 - 我想在提交之前显示检索到的图像

Question

我正在动态创建使用 js 加载图像的 html。我想在选择图像后显示它。我找到了执行此操作的函数；但是，在我的情况下，他们没有显示图像。我也尝试在“$(document).ready(function(){”中调用“function displayCamp() {”之前放置这些函数。

选择生效并显示图像名称。

js:

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);
    });
}

Answer 1

将“function readURL(input) {”放在“$("#my-tabs a:first").tab("show");”之后

js:

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);
        });
    })
}