将图像与普通帖子的其他元素一起发送到div [复制]

Question

这个问题在这里已有答案：

• How to set file input value when dropping file on page? [duplicate] 1回答

我有一个小的HTML5 form，用户放下图像文件，查看预览，了解图像的尺寸，填充input元素，然后按“发送”按钮将所有内容（图像和输入文本）发送到一个POST请求。

问题是，即使div和img元素分配了名称标签，图像数据也不会与输入数据一起发送。如何使用通常的POST流程实现这一目标？

这是我的代码。

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>

Answer 1

好吧，this answer帮助我完成部分工作，将图像转换为base64并将其附加到隐藏输入。但是，PNG图像只有100％可以。如果用户试图上传JPG，我似乎无法按原样保存文件，即不会丢失质量或增加文件大小。

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

编辑

挖掘更多，我找到了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;