これはサイトでの最初の質問です。ほとんどの場合、このフォーラムで検索して答えを得ましたが、今回は解決策が見つからなかったので、ここに投稿します。
1 つのドロップ可能な div と 1 つの入力テキストを含むページがあります。ドロップには、プラグイン jquery.filedrop を使用しています。
最初の行は、jsf データテーブルを介した Bean の読み込み時に作成されます。説明を入力すると、説明が (ajax を使用して) db に保存され、ドロップ div と入力テキストを含む新しい行が作成されます。これで、ユーザーは画像を div にドロップできます。しかし、最初に画像をドロップすると無視され、画像は表示されませんが、2回目は画像を適切に認識してドロップし、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;
}
}
});
});
});
});