如何解决拖放JS问题?

时间:2019-04-12 12:14:24

标签: javascript html drag-and-drop

使用此代码,我想拖放图像。 当我删除时,对于每个元素,我都会用ajax调用一个php页面来创建db中的记录。 Ajax给我返回一个data.object,将元素放在我的html页面中。

我有这个JS代码可以控制计算机中的拖放文件...

var listaId = new Array();

function dropHandler(ev) {

  // Prevent default behavior (Prevent file from being opened)
  ev.preventDefault();

  var div = document.getElementById('raccoltaFile');
  var percorso = div.getAttribute('data-percorso');
  var id = div.getAttribute('data-id');

  if (ev.dataTransfer.items) {
    // Use DataTransferItemList interface to access the file(s)
    for (var i = 0; i < ev.dataTransfer.items.length; i++) {
      // If dropped items aren't files, reject them
      if (ev.dataTransfer.items[i].kind === 'file') {
        var file = ev.dataTransfer.items[i].getAsFile();
    var foto = new FormData();

    foto.append('fotoOggetto', file);
    foto.append('nome', file.name);
    foto.append('percorso', percorso);
    foto.append('idSottocat', id);

    $.ajax({
            url: '../php/model.php?az=dragDropImage&id='+id+"&percorso="+percorso,
        data:foto,
        processData:false,
            contentType:false,
            type: 'POST',
            dataType: 'json'
        })
        .done(function(data){
        if(data.doc_id) {
        $("#raccoltaFile").append("<div class='row' style='border-bottom: solid 2px grey'><div class='col-3'><img class='img-thumbnail' src='"+data.doc_url+"' /></div><div class=col-4>"+data.doc_nome_file+"</div><div class='col-3'><button class='btn btn-danger' onClick='cancellaFotoProvvisoria()'>Elimina</button></div></div>");
        listaId.push(data.doc_id);
        } else {
        alert("Hai inserito un'immagine fuori dai parametri accettati");
        }

        })
        .fail(function(){
            alert("Qualcosa è andato storto.");
        });

      }
    }  
  }
  alert(listaId);
}

我拖放的第一个元素id不会输入到listaId数组,但是第二个是。 你说为什么?

0 个答案:

没有答案