「削除」ボタン、つまり削除機能が呼び出されたときに非表示の入力を削除したいのですが、以下のコードでは入力が削除されないという問題があります。削除されるファイル名は? 以下は、正しいファイル名を削除するが、非表示の入力を削除しないコードです (テストのために、テキスト入力に変更しました)。
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="hidden" 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 + '">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);
});
$(this).parent().remove();
$(".hiddenimg").parent().remove();
});
return true;
}
以下はファイル入力フォームです。
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>" +
"<input type='hidden' class='numimage' name='numimage' value='" + GetFormImageCount() + "' />" +</p>
"</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>");
非表示の入力は別のフォームの div に配置され、それが別のフォームにある理由は、上のフォームが下のフォームにネストされるためです。上のフォームに非表示の入力を含めた場合、$_POST の使用に問題が発生します。非表示の入力からの値をネストされた形式でポストするには:
<form id="QandA" action="" method="post">
<div class='hiddenimg'></div>
</form>