这是我在网站上的第一个问题。大多数时候我在这个论坛上找到了答案，但这次找不到解决方案，所以在这里发布。
我有一个页面，上面有一个可放置的div和一个输入文本。对于drop，我使用的是插件jquery.filedrop。
第一行是通过jsf datatable在bean加载时创建的。当我输入description时，描述将保存在db（使用ajax）中，并创建一个包含drop div和输入文本的新行。现在用户可以将图像放在div上。但是当我第一次丢弃图像时它会忽略并且图像不会出现，但第二次它会识别并适当地放下图像并保存在db中。我无法解决此问题并需要帮助。请在下面找到JQuery代码段。非常感谢您提前花时间和精力。
$（document）.ready（function（）{
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;
}
}
});
});
});
});
答案 0 :(得分：0)
我的猜测是，只有在文件已经删除到元素后才会调用dropbox.filedrop部分。此外，这是每次实际删除文件时重新绑定删除，可能会在后续删除时引入多个文件上传。
您需要将整个部分移到drop事件绑定代码之外，即移动整个部分：
dropbox.filedrop({
url: '../../ProxyServlet/photos/' + processingId + '/saveTattoo',
dropZone: $(this),
paramname:'formTattooUpload',
........
......在dropBOX.on('drop', function(e) { ...之外。