代码之家 › 专栏 › 技术社区 › Rodrigo

将图像与公共Post的其他元素一起放入div[副本]

filereader post image html javascript

Rodrigo · 技术社区 · 6 年前

form input 元素,并点击“发送”按钮通过 POST

问题是,图像数据没有与输入数据一起发送,即使 div 和 img 元素具有指定给它们的名称标记。我怎样才能用通常的方法做到这一点过程?

这是我的密码。

function removeDragData(e) {
  if (e.dataTransfer.items) { // Use DataTransferItemList interface to remove the drag data
    e.dataTransfer.items.clear();
  } else { // Use DataTransfer interface to remove the drag data
    e.dataTransfer.clearData();
  }
}
function formatBytes(a,b) {
  if (0 == a)
    return '0 Bytes';
  var c = 1024,
    d = b || 2,
    e = ['Bytes','KB','MB','GB','TB','PB','EB','ZB','YB'],
    f = Math.floor(Math.log(a)/Math.log(c));
  return parseFloat((a/Math.pow(c,f)).toFixed(d))+' '+e[f];
}
function getDim(img,tam) {
  var infoW = img.naturalWidth;
  var infoH = img.naturalHeight;
  var info = document.getElementById('addDadoInfo');
  info.innerHTML = 'Tamanho: ' + infoW + ' x ' + infoH + ' pixels (' + formatBytes(tam) + ')';
}
function drop(e,who) {
  e.preventDefault();  // Prevent default behavior (Prevent file from being opened)
  var i;
  if (e.dataTransfer.items) { // Use DataTransferItemList interface to access the file(s)
    for (i=0; i<e.dataTransfer.items.length; i++) {
      if (e.dataTransfer.items[i].kind === 'file') { // If dropped items aren't files, reject them
        var file = e.dataTransfer.items[i].getAsFile();
        if (file.type.indexOf('image/') == 0 && file.size <= 2*1024*1024) {
          // Process only the first image up to 2 MB
          var img = document.createElement('img');
          var tam = file.size;
          img.file = file;
          img.name = 'imgDImg';
          img.style.maxWidth = '400px';
          img.style.maxHeight = '300px';
          while (who.firstChild) {
            who.removeChild(who.firstChild); // removes the <p> element
          }
          who.appendChild(img);
          var reader = new FileReader();
          reader.onload = (function(aImg) {
            return function(ev) {
              aImg.src = ev.target.result;
              setTimeout(getDim,500,aImg,tam);
              };
            })(img);
          reader.readAsDataURL(file);
          break;
          //console.log('.A. file[' + i + '] = ' + file.name + '|' + file.type + '|' + file.size);
        }
      }
    }
  } else { // Use DataTransfer interface to access the file(s)
    for (i=0; i<e.dataTransfer.files.length; i++) {
      var file = e.dataTransfer.files[i];
      console.log('.B. file[' + i + '] = ' + file.name + '|' + file.type + '|' + file.size);
    }
  }
  removeDragData(e); // Pass event to removeDragData for cleanup
}
function dragOver(e) {
  e.preventDefault(); // Prevent default behavior (Prevent file from being opened)
}

.addDado {
  background-color:#DDD;
  width:400px;
  height:300px;
  text-align:center;
}

<form id='frmAddDado' autocomplete='on' method='post' action='index.php'>
  <div id='addDado1' name='addDado1' class='addDado' ondrop='drop(event,this)' ondragover='dragOver(event)'>
    <p>Drop image here.</p>
  </div>
  <div id='addDadoInfo'>(No data selected.)</div>
  <br>
  <label for='txaDRef'>Reference</label><br>
  <textarea id='txaDRef' name='txaDRef' cols=80 rows=5></textarea><br>
  <br>
  <input id='btnAddDado' type='submit' value='Add' disabled />
</form>

1 回复 | 直到 6 年前

Rodrigo 6 年前

好, this answer

所以,我仍然在寻找一种更好的方法来同时显示缩略图、尺寸和文件大小,以及完美的文件传输。

再挖一点,我发现 this answer ,这正是我所需要的!

// in <form id='frmAddDado'>
<input id='fileIMG' name='fileIMG' type='file' style='display:none' />

// in function drop(e,who)
document.getElementById('fileIMG').files = e.dataTransfer.files;