下面是图片输入表格:
var $fileImage = $("<form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target_image' onsubmit='return imageClickHandler(this);' class='imageuploadform' >" +
"<input type='hidden' class='numimage' name='numimage' value='" + numimage + "' />" +
"<div class='display_content_image'>" +
"<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>" +
"</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></div></form>");
$image.append($fileImage);
下面是开始上传图片文件的完整 jquery 代码:
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');
$(imageuploadform).find('.imagef1_upload_form').find('.display_content_image')
.css('visibility','hidden');
sourceImageForm = imageuploadform;
$(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;
}
下面是完整的 jquery 代码,它在其中停止图像文件上传:
function stopImageUpload(success, imagefilename){
var result = '';
imagecounter++;
var replaceForm = function(result) {
$(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>');
}
var updateForm = function(result) {
$(sourceImageForm).find('.imagef1_upload_form').find('.display_content_image').html(result);
}
var displayInfo;
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>');
displayInfo = replaceForm;
}
else if (success === 2){
result = '<span class="imagemsg'+imagecounter+'"> The file upload was canceled</span><br/><br/>';
displayInfo = updateForm;
}
else {
result = '<span class="imagemsg'+imagecounter+'">There was an error during file upload</span><br/><br/>';
displayInfo = updateForm;
}
displayInfo(result);
$(sourceImageForm).find('.imagef1_upload_process').css('visibility','hidden');
$(sourceImageForm).find('.imagef1_cancel').css('visibility','hidden');
$(sourceImageForm).find('.imagef1_upload_form').css('visibility','visible');
});
问题是,如果文件已成功上传、取消或上传不成功,则没有成功消息,例如result = '<span class="imagemsg'+imagecounter+'"> The file upload was canceled</span><br/><br/>';
. 有谁知道为什么消息没有出现。
此外,如果用户成功上传文件,则上传文件的名称应出现在文件输入下方,旁边有一个删除按钮,但这也不适用。有谁知道为什么这也没有出现?
我相信当我在表单display_content_image
中包含 div 标签时,这突然发生了,但我不起诉我需要为此改变什么