图像拖放不会发生第一次，但发生第二次使用jquery

Question

这是我在网站上的第一个问题。大多数时候我在这个论坛上搜索的答案，但这次找不到解决方案，所以张贴在这里。

我有一个页面，其中包含一个droppable div和一个输入文本。对于放置，我正在使用插件jquery.filedrop。

第一行是通过jsf datatable在bean加载时创建的。当我输入description时，描述保存在db（使用ajax）中，并创建一个包含drop div和输入文本的新行。现在用户可以将图像放在div上。但是，当我第一次放置图像时，它会忽略并且不会显示图像，但第二次识别并放下图像并保存在数据库中。我无法解决此问题并需要帮助。请找到下面的JQuery代码片段。提前感谢您的时间和精力。

$（文件）。就绪（函数（）{

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; 
        } 
       } 
      }); 
     }); 

    }); 

}); 

Answer 1

我的猜测是，你dropbox.filedrop部分只被调用一次文件已经降到的元素。此外，这是重新绑定每一次的下跌其实你放下文件有可能在后续引入滴多文件上传

您需要移动这整段的降事件绑定代码之外，即移动这个整段：

dropbox.filedrop({ 
    url: '../../ProxyServlet/photos/' + processingId + '/saveTattoo', 
    dropZone: $(this), 
    paramname:'formTattooUpload', 
........ 

...以外：dropBOX.on('drop', function(e) { ...。