我正在动态创建使用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);
});
}
发布于 2018-07-26 07:45:23
将"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);
});
})
}
发布于 2018-08-03 08:47:40
以下是我所做的更改:
//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]);
}
}
https://stackoverflow.com/questions/51512038
复制相似问题