基本的に、次のコードが問題を引き起こしています。
var imagecounter = 0;
function stopImageUpload(success, imagefilename){
var result = '';
imagecounter++;
if (success == 1){
result = '<span class="imagemsg'+imagecounter+'">The file was uploaded successfully</span><br/><br/>';
$('.listImage').eq(window.lastUploadImageIndex).append('<div>' + htmlEncode(imagefilename) + '<button type="button" class="deletefileimage" image_file_name="' + imagefilename + '">Remove</button><br/><hr/></div>');
}
else if (success == 2){
result = '<span class="imagemsg'+imagecounter+'"> The file upload was canceled</span><br/><br/>';
}
else {
result = '<span class="imagemsg'+imagecounter+'">There was an error during file upload</span><br/><br/>';
}
$(sourceImageForm).find('.imagef1_upload_process').css('visibility','hidden');
$(sourceImageForm).find('.imagef1_cancel').css('visibility','hidden');
//THIS LINE BELOW
$(sourceImageForm).find('.imagef1_upload_form').html(result + '<label>Image File: <input name="fileImage" class="fileImage" type="file"/></label><br/><br/><label><input type="submit" name="submitImageBtn" class="sbtnimage" value="Upload" /></label><label><input type="button" name="imageClear" class="imageClear" value="Clear File"/></label>');
//THIS LINE ABOVE
$(sourceImageForm).find('.imagef1_upload_form').css('visibility','visible');
var _imagecounter = imagecounter;
return true;
}
上記のコードは、アップロードが成功/エラーになった後に実行されるコードから取得されています。このコードは、画像のアップロードを担当するフォームを上書きします。インターフェイスは画像ごとに個別のフォームを使用するため、これは成功に適しています...成功すると、そのフォームを再利用することはありません(したがって、後続のアップロードでサーバー側でエラーが発生することはありません)。
ただし、画像のアップロードでエラーが発生したりキャンセルされたりした場合は、そのフォームを再利用して画像を再度アップロードしますか?その場合、numimage入力htmlを上書きして削除しました。
<input type='hidden' class='numimage' name='numimage' value='" numimage "' />
これは、このフィールドがもう存在しないため、エラーが発生することを意味します。
私の質問は、どうすればこれを修正できるかということです。非表示の入力フォームの値が失われず、フィールドがまだ存在するように、問題を修正するにはどうすればよいですか?
以下は、ファイルをアップロードする完全なフォームです(各フォームは、ユーザーがボタンをクリックするたびにテーブルに追加されるため、行ごとに1つのフォームで複数のフォームが存在する可能性があります。
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_process' align='center'>Loading...<br/><img src='Images/loader.gif' /><br/></p><p class='imagef1_upload_form' align='center'><br/><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='" + numimage + "' />" +
"</p><p class='imagef1_cancel' align='center'><label>" +
"<input type='reset' name='imageCancel' class='imageCancel' value='Cancel' /></label>" +
"</p><p class='listImage' align='left'></p>" +
"<iframe class='upload_target_image' name='upload_target_image' src='#' style='width:300px;height:300px;border:0px;solid;#fff;'></iframe></form>");
$image.append($fileImage);