圖像拖放不會發生第一次，但發生第二次使用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) { ...。