ここにアプリケーションがあります: APPLICATION
以下の手順に従ってください。
ボタンを 2 回クリックして
Add Question、2 つのファイル入力を下の表に追加します。TABLE ROW 1 ONLY upload 2 images (一度に 1 つ) のファイル入力を使用すると、画像が正常にアップロードされるたびに、アップロードされたファイルの名前がテーブルの下と下に表示され、テキスト入力で ID が表示されます。
ここで問題が発生します。TABLE ROW 2 で、ファイルをアップロードします。アップロードが完了した後、テーブルの下にテキスト入力が表示されないことに気付きました。
だから私の質問は、ユーザーが最初のテーブル行のファイル入力を除く任意のファイル入力でファイルをアップロードした場合、アップロードされたファイルに関連付けられたテキスト入力が表示されないのはなぜですか?
以下は、ファイル入力と、それが以下の html テーブルに追加される方法を示すコードと.hiddenimg、テキスト入力を格納する divを示すコードです。
Jquery 追加ファイル入力フォーム:
function GetFormImageCount(){
return $('.imageuploadform').length + 1;
}
function insertQuestion(form) {
var $tbody = $('#qandatbl_onthefly > tbody');
var $tr = $("<tr class='optionAndAnswer' align='center'>");
var $image = $("<td width='17%' class='image'></td>");
var $fileImage = $("<form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target_image' onsubmit='return imageClickHandler(this);' class='imageuploadform' >" +
"<p class='imagef1_upload_form'><label>" +
"Image File: <input name='fileImage' type='file' class='fileImage' /></label><br/><br/><label class='imagelbl'>" +
"<input type='submit' name='submitImageBtn' class='sbtnimage' value='Upload' /></label>" +
"<p class='imagef1_upload_process'>Loading...<br/><img src='Images/loader.gif' /></p>" +
"<input type='hidden' class='numimage' name='numimage' value='" + GetFormImageCount() + "' />" +
"</p><p class='imagemsg'></p><p class='listImage'></p>" +
"<iframe class='upload_target_image' name='upload_target_image' src='/' style='width:0px;height:0px;border:0px;solid;#fff;'></iframe></form>");
$image.append($fileImage);
$tr.append($image);
$tbody.append($tr);
}
ファイル入力フォームが追加され、テキスト入力が.hiddenimgdiv タグに格納される HTML フォームとテーブル:
<form id="QandA" action="insertQuestion.php" method="post">
<table id="questionBtn" align="center">
<tr>
<th>
<input id="addQuestionBtn" name="addQuestion" type="button" value="Add Question" onClick="insertQuestion(this.form)" />
</th>
</tr>
</table>
</div>
<hr/>
<table id="qandatbl" align="center" cellpadding="0" cellspacing="0" border="0">
<thead>
<tr>
<th width="17%" class="image">Image</th>
</tr>
</thead>
</table>
<div id="qandatbl_onthefly_container">
<table id="qandatbl_onthefly" align="center" cellpadding="0" cellspacing="0" border="0">
<tbody>
</tbody>
</table>
</div>
<div class="hiddenimg"><!-- All uploaded image file ids go here --></div>
</form>
以下は、uploadボタン、アップロードの開始、およびアップロードの終了を制御するコードです。
アップロード ボタン ハンドラ:
function imageClickHandler(imageuploadform){
if(imageValidation(imageuploadform)){
window.lastUploadImageIndex = $('.imageuploadform').index(imageuploadform);
return startImageUpload(imageuploadform);
}
return false;
アップロードを開始:
function startImageUpload(imageuploadform){
$(imageuploadform).find('.imagef1_upload_process').show()
$(imageuploadform).find('.imagef1_upload_form').hide();
$(imageuploadform).find('.imagemsg').hide();
sourceImageForm = imageuploadform;
return true;
}
アップロードが完了しました:
function stopImageUpload(success, imageID, imagefilename){
var result = '';
imagecounter++;
if (success == 1){
result = '<span class="imagemsg'+imagecounter+'">The file was uploaded successfully</span>';
$('.hiddenimg').eq(window.lastUploadImageIndex).append('<input type="text" name="imgid[]" id="'+imageID+'" value="' + imageID + '" />');
$('.listImage').eq(window.lastUploadImageIndex).append('<div>' + htmlEncode(imagefilename) + '<button type="button" class="deletefileimage" data-imageID="'+imageID+'" data-image_file_name="' + imagefilename + '" value="'+imageID+'">Remove</button><br/><hr/></div>');
}
var _imagecounter = imagecounter;
$('.listImage').eq(window.lastUploadImageIndex).find(".deletefileimage").on("click", function(event) {
jQuery.ajax("deleteimage.php?imagefilename=" + $(this).attr('data-image_file_name')).done(function(data) {
$(".imagemsg" + _imagecounter).html(data);
});
var buttonid = $(this).attr('value');
$(this).parent().remove();
$("#"+ buttonid +"").remove();
});
return true;
}