Question

我将两张图片拖到HTML5页面上。我看到了预览。现在我想将它们提交到服务器而不使用FormData对象（出于兼容性原因）。

HTML文件

<html>
  <head></head>
  <body>
    <img id="image1"/>
    <img id="image2"/>
    <form id="myform" action="otherpage.php" method="post">
    </form>
  </body>
</html>

将两张图片拖到页面上后，我会在 image1 和 image2 中看到他们的预览。在调试器中，我看到image1的src是data:image/jpeg;base64,/9j/4AAQSkZ... 而image2的src是data:image/jpeg;base64,/9j/4AAQSkZJRgA...

使用javascript，我想将这两个图像提交给otherpage.php。我的想法是创建字段，并使用它们的值作为图像的来源。

function sendImages() {
var placeForm = document.getElementById('myform');
var textInput; //Create a local object
textInput = document.createElement('input'); //Create first <input> object
textInput.name='file1';
textInput.value=document.getElementById('image1').src; //Assign value to object
placeForm.appendChild(textInput); //Append object to form

textInput = document.createElement('input'); //Create second <input> object
textInput.name='file2';
textInput.value=document.getElementById('image2').src; //Assign value to object
placeForm.appendChild(textInput); //Append object to form

placeForm.submit(); //Send form

}

这会导致巨大的内存损失，只有在我关闭浏览器或显示about:blank后才能清除。

为什么会这样？

从拖动的图像创建<input />字段

0 个答案: