javascript - 将图像与普通 Post 的其他元素一起放入 div
问题描述
我有一个小的 HTML5 form
,用户在其中放置一个图像文件,查看预览,了解图像的尺寸,填充一个input
元素,然后单击“发送”按钮以通过POST
请求发送所有内容(图像和输入文本) .
问题是,图像数据没有与输入数据一起发送,即使div
andimg
元素具有分配给它们的名称标签。我怎样才能使用通常的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>
解决方案
好吧,这个答案帮助我完成了部分工作,将图像转换为 base64 并将其附加到隐藏的输入。但是,PNG 图像只有 100% 可以。如果用户尝试上传 JPG,我似乎无法按原样保存文件,即不会损失质量或增加文件大小。
因此,我仍在寻找一种更好的方式来同时拥有这两者:缩略图、尺寸和文件大小显示以及完美的文件传输。
编辑
挖掘更多,我找到了这个答案,这正是我需要的!
对上面的代码做一些修改:
// 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;
推荐阅读
- javascript - 如何下载、重命名和保存用户输入生成的图像
- python - Python打开子进程时如何修复wmctrl无法打开显示
- mockito - 无法为控制器的方法编写测试规范
- angular - 在 Angular 6+ httpClient 中,哪个响应状态代码会出现 catchError?
- c - 当 ADC 为 12 位时,DMA 为何提供 16 位值?
- ethereum - 如何在 Solidity 中管理大循环?
- angular - 带有 {{responseType: 'text}} 的 Angular http.get 错误
- android - 如何将用户加入到在 twilio 中使用 android 创建的频道
- python - 如何过滤数据框以获取在用户定义集中具有列值的行
- c# - Windows ML 学习模型可以通过 UWP 之外的 C# 访问吗?