I have a table where it appends rows and that I have 3 rows, the table below will look something like this:
Question No Image
1 (file input)
2 (file input)
3 (file input)
Below is the code that creates the table above:
var qnum = 1;
var numimage = 0;
var $qid = $("<td class='qid'></td>").text(qnum);
var $image = $("<td class='image'></td>");
$('.num_questions').each( function() {
var $this = $(this);
var $questionNumber = $("<input type='hidden' class='num_questionsRow'>").attr('name',$this.attr('name')+"[]")
.attr('value',$this.val());
$qid.append($questionNumber);
++qnum;
++numimage;
$(".questionNum").text(qnum);
$(".numimage").val(numimage);
});
var $fileImage = $("<form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target' onsubmit='return imageClickHandler(this);' class='imageuploadform' >" +
"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' name='upload_target' src='#' style='width:0;height:0;border:0px;solid;#fff;'></iframe></form>");
$image.append($fileImage);
$tr.append($qid);
$tr.append($image);
The problem I have is that if a file was unsuccessful or cancelled and then I upload another file which is this time successful, I recieve this notice below in my iframe:
Notice: Undefined index: numimage in /web/stud/...../app/imageupload.php on line 150
My question is that why do I recieve this notice in my php code below where it inserts data into database when I successfully upload a file after an unsuccessful attempt or cancellation?
move_uploaded_file($_FILES["fileImage"]["tmp_name"],
"ImageFiles/" . $_FILES["fileImage"]["name"]);
$result = 1;
$lastID = $mysqli->insert_id;
$imagequestionsql = "INSERT INTO Image_Question (ImageId, SessionId, QuestionId)
VALUES (?, ?, ?)";
if (!$insertimagequestion = $mysqli->prepare($imagequestionsql)) {
// Handle errors with prepare operation here
echo "Prepare statement err imagequestion";
}
$qnum = (int)$_POST['numimage'];
$insertimagequestion->bind_param("isi",$lastID, $sessid, $qnum);
$sessid = $_SESSION['id'] . ($_SESSION['initial_count'] > 1 ? $_SESSION['sessionCount'] : '');
$insertimagequestion->execute();
if ($insertimagequestion->errno) {
// Handle query error here
}
$insertimagequestion->close();
}
<script language="javascript" type="text/javascript">window.top.stopImageUpload(<?php echo $result ? 'true' : 'false'; ?>, '<?php echo $_FILES['fileImage']['name'] ?>');</script>
UPDATE:
Below is the jquery code where it contains the startimageupload function for when uploading starts and the stopimageupload function for when uploading stops or is finished:
function htmlEncode(value) { return $('<div/>').text(value).html(); }
function startImageUpload(imageuploadform){
$(imageuploadform).find('.imagef1_upload_process').css('visibility','visible');
$(imageuploadform).find('.imagef1_cancel').css('visibility','visible');
$(imageuploadform).find('.imagef1_upload_form').css('visibility','hidden');
sourceImageForm = imageuploadform;
$(".sbtnimage").attr("disabled", "disabled");
$(".sbtnvideo").attr("disabled", "disabled");
$(".sbtnaudio").attr("disabled", "disabled");
$(imageuploadform).find(".imageCancel").on("click", function(event) {
$('.upload_target_image').get(0).contentwindow
$("iframe[name='upload_target_image']").attr("src", "javascript:'<html></html>'");
return stopImageUpload(2);
});
return true;
}
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');
$(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>');
$(sourceImageForm).find('.imagef1_upload_form').css('visibility','visible');
$(".sbtnimage").removeAttr("disabled");
$(".sbtnvideo").removeAttr("disabled");
$(".sbtnaudio").removeAttr("disabled");
$(".imageClear").on("click", function(event) {
event.preventDefault();
$(this).parents("form:first").find(".fileImage").replaceWith("<input type='file' class='fileImage' name='fileImage' />");
});
Ok from looking at the code you’ve posted I’m making a guess as to what is happening because I can’t see the complete flow of the code. Basically the following code is causing your problem:
The above code is taken from the code that runs after a succesful/errorful upload has occured. This code proceeds to overwrite the form responsible for uploading the image. Now this is fine for successes because as I can infer, your interface uses seperate forms for each image… once you get a success you don’t reuse that form again (so no error on the server side for subsequent uploads).
However, when the image upload errors or cancels… I think I’m guessing right – that you try and reuse that form to upload the image again? If so you have overwritten and removed the numimage input html:
Which means that you would get an error as this field doesn’t exist anymore.
Again as I say this is a guess, but it would lead to the removal of a field that did exist to start with, and would produce the problems you are seeing.