这是我在网站上的第一个问题。大多数时候我在这个论坛上得到了答案，但这次找不到解决方案，所以在这里发布。
我有一个页面，上面有一个可放置的 div 和一个输入文本。对于 drop，我使用插件 jquery.filedrop。
第一行是通过 jsf 数据表在 bean 加载时创建的。当我输入描述时，描述保存在 db（使用 ajax）中，并创建一个包含 drop div 和输入文本的新行。现在用户可以将图像放在 div 上。但是当我第一次删除图像时，它会忽略并且图像不会出现，但是第二次它会识别并适当地删除图像并保存在数据库中。我无法解决此问题并需要帮助。请在下面找到 JQuery 代码片段。非常感谢您提前付出的时间和精力。
$(文档).ready(函数() {
var processingId =$('#processingId').val();
var tattooPath = $('#path').val();
var userName = $('#userName').val();
var count=1;
$(document).on('change', '.descriptionInputBox', function(e){
var descriptionInputBox = $(this);
var input = $(this).find('.inputTextTattoo');
var dropBOX = $('.dropbox');
var pid = descriptionInputBox.attr('pid');
var imageLocation = descriptionInputBox.attr('imageLocation');
var imageName = 'image'+count+'.jpg';
if(e.type == 'change'){
if(descriptionInputBox.attr('imageName')== ""){
var description= input.val();
alert(description);
descriptionInputBox.attr('imageName',imageName);
var parentTR = descriptionInputBox.parent().parent();
var td = parentTR.children('td').eq(0);
td.children('div').eq(0).attr('imageName',imageName);
var html = $('<tr><td><div class="dropbox" pid="" description="" imageLocation="" user="" processingId="" imageName=""><img class="tattooImage" src="" width="100px" height="100px" ><div class="progressHolder"><div class="progressTattoo"></div></div></div></td><td><div class="descriptionInputBox" pid="" descriptionValue="" imageLocation="" user="" processingId="" imageName=""><input type="text" class="inputTextTattoo" value="" name="descrip"/></div></td></tr>');
$(this).parent().parent().parent().parent().append(html);
count=count+1;
html.find('.dropbox').attr('imageName','image'+count+'.jpg');
html.find('.dropbox').attr('description',"");
html.find('.descriptionInputBox').attr('imageName','image'+count+'.jpg');
}
$.ajax({
type: 'POST',
url: '/TrooperExamIntranet/ProxyServlet/photos/'+ processingId +'/saveTattooDescription',
data:{ cid: processingId,id: pid, imageLocation: imageLocation, description: input.val(), userName: userName,imageName: descriptionInputBox.attr('imageName'),tattooImagePath: tattooPath},
success: function(data) {
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(errorThrown);
}
});
}
dropBOX.on(
'dragover',
function(e) {
e.preventDefault();
e.stopPropagation();
}
);
dropBOX.on(
'dragenter',
function(e) {
e.preventDefault();
e.stopPropagation();
}
);
dropBOX.on(
'dragLeave',
function(e) {
e.preventDefault();
e.stopPropagation();
}
);
dropBOX.on('drop', function(e){
alert("test");
var dropbox = $(this);
var progressTattoo= $('.progressTattoo',dropbox);
var progressHolder= $('.progressHolder',dropbox);
/* progressTattoo.addClass('progressTattoo');
progressHolder.addClass('progressHolder');*/
var image = $('img', dropbox);
//image.addClass('tattooImage');
var pid = dropbox.attr('pid');
var imageNameDrop = dropbox.attr('imageName');
var description= function() {
var parentTR = dropbox.parent().parent();
var description = parentTR.children('td').eq(1);
var desc = description.find('.inputTextTattoo').val();
return desc;
};
//var description = dropbox.attr('description');
dropbox.filedrop({
url: '../../ProxyServlet/photos/' + processingId + '/saveTattoo',
dropZone: $(this),
paramname:'formTattooUpload',
maxfiles: 1,
maxfilesize: 8, // in mb
data: {
cid:processingId,
tattooImagePath:tattooPath,
id:pid,
description:description,
imageName:imageNameDrop,
userName:userName,
},
beforeEach: function(file){
if(!file.type.match(/^image\//)){
alert('Only images are allowed!');
return false;
}
},
uploadStarted:function(i, file, len){
var reader = new FileReader();
image.hide();
progressHolder.width("100%");
progressHolder.show();
progressTattoo.width("0%");
progressTattoo.show();
reader.readAsDataURL(file);
$.data(file,progressTattoo);
$.data(file,image);
reader.onload = function(e){
image.attr('src',e.target.result);
image.hide();
};
},
globalProgressUpdated: function(progress) {
progressTattoo.width(progress+ "%");
progressTattoo.show();
},
uploadFinished:function(i,file,response){
//image.addClass('done');
//progressHolder.width("100%");
progressTattoo.width("100%");
},afterAll: function() {
progressTattoo.width("0%");
//progressHolder.hide();
image.show();
},
error: function(err, file, fileIndex, xhrstatus){
image.attr('src',"");
image.hide();
console.log(err);
switch(err) {
case 'BrowserNotSupported':
alert('Your browser does not support HTML5 file uploads!');
break;
case 'TooManyFiles':
alert('Too many files! Please select 1 at most!');
break;
case 'FileTooLarge':
alert(file.name+' is too large! Image uploads are limited to ' + maxfileSize +' MB or less.');
break;
case 'Not Found':
alert('The requested resource is not available to upload file ' + file.name);
break;
case 'Internal Server Error':
alert('File ' + file.name +' is not uploaded properly. Please try again.');
break;
default:
alert('Error ' + err + ' occurred in uploading file ' + file.name +' Please try again later!');
break;
}
}
});
});
});
});