Question

好的我知道这个问题已被多次询问并回答，但我无法使用普通的JavaScript或HTML来做到这一点。这是我的情况：

我将一个输入文件填满，一旦我将图像加载到文件阅读器并更改大小并将其输出到我的iframe。我的问题是如何调整所选图像的大小并将其作为输入文件放置。这里的诀窍是我只能使用JavaScript或HTML5。我用来创建我的Web应用程序的程序不支持我能说的Ajax或其他脚本。

FORM：

<iframe name="my_iframe" src="" id="my_iframe"></iframe>
<form action="http://www.*****/Database.php" method="post" enctype="multipart/form-data" target="my_iframe">

<p>
<input type="file"  input id="input" name="image" onchange="handleFiles()"/>
</p>

<p>
<input type="text" name="firstname" value="%%%myvalue1%%%"/>
</p>

<p>
<input type="text" name="lastname" value="%%%myvalue2%%%"/>
</p>

<div>
<input type="submit" value="Send">
</div>
</form>

JAVASCRIPT

var img = document.getElementById("image");
var width = 450;
function handleFiles() {
    var filesToUpload = document.getElementById('input').files;
    var file = filesToUpload[0];

var reader = new FileReader();
// Set the image once loaded into file reader
reader.onload = function(e) {
  img.onload = function() {
    if (this.naturalWidth > width) {
      this.width = width;
    }
  }
  img.src = e.target.result;
}
reader.readAsDataURL(file);

}

调整图片大小并上传

0 个答案: