Question

我正在尝试创建一个简单的表单来上传jpg文件和一些文本字段。我想先缩小文件服务器端。

我曾尝试使用其他各种stackoverflow答案创建代码，但运气不佳。

我想做两件事，在上传之前显示缩小图像的预览，并通过表单上传图像以及一些文本字段。（其他示例使用xmlHttpRequest从脚本发送文件，我不想这样做。）我也想把它作为jpg文件上传，而不是像某些人一样上传到base64，我读过的文件大约要大37％。< / p>

以下是我的代码。我不确定如何使图像显示在body中，无论是uploadPreview标记还是其他位置。我也不确定如何将缩小的文件或文件名“插入”到表单中，这样当用户单击“提交”时，它将与文本字段一起发送。

我尝试使用已注释掉的两行来显示新图像，但它们不起作用。

非常感谢任何帮助。

更新显然，可能没有简单的方法来上传缩小文件的jpg版本。（考虑到base64文件的大小，看起来很奇怪！）。

为了别人的利益，我更新了以下代码，以显示我所做的工作。我还添加了服务器代码来保存文件，该文件来自this Stackoverflow answer

<!doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<script type="text/javascript">
function shrinkfile() {
  if (document.getElementById("inputfile").files.length === 0) { return; }
  var filename = document.getElementById("inputfile").files[0];
  if (filename.type != "image/jpeg") {
     alert("Invalid file type " + filename.type + "must be jpg");
     return;
  }
  var reader = new FileReader();
  reader.onload = function() {
      var image = new Image();
      image.src = reader.result;
      image.onload = function() {
          var maxwidth = 800,
          maxheight = 800,
          origwidth = image.width,
          origheight = image.height;
          if (origwidth > origheight) {
              if (origwidth > maxwidth) {
                  origheight *= maxwidth / origwidth;
                  origwidth = maxwidth;
              }
          }
          else {
              if (origheight > maxheight) {
                  origwidth *= maxheight / origheight;
                  origheight = maxheight;
              }
          }
          var canvas = document.createElement('canvas');
          canvas.width = origwidth;
          canvas.height = origheight;
          var ctx = canvas.getContext("2d");
          ctx.drawImage(this, 0, 0, origwidth, origheight);
          var newfile = canvas.toDataURL("image/jpeg",0.5); // The resized file ready for upload\
          document.getElementById("uploadPreview").src = newfile;
          document.getElementById("hiddenfile").value = newfile;
      }
  }
  reader.readAsDataURL(filename);    
}
</script>
</head>
<body>
  <form id="form" enctype="multipart/form-data" action="upload.php" method="POST">
  <input id="inputfile" type="file" name="photo" onchange="shrinkfile();" />
  <input id="caption" type="text" name="caption">
  <input type="submit" value="Upload">
  </form><br>
<img id="uploadPreview"/>

</body>
</html>

这是服务器代码upload.php：

<?php 
// Server code to decode base64 file from user and save as jpg
$img = $_POST['hiddenfile'];
echo $_POST['caption'];
$img = str_replace('data:image/jpeg;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = "newimage.jpg";
$success = file_put_contents($file, $data);
?>

Answer 1

canvas.toDataURL为您提供base64格式的图像。在表单中创建一个隐藏字段。并为其分配canvas.toDataURL（...）的值。

您不能将它作为子元素附加到正文上，因为它不是Html标记，而是将其转换为base64类型的图像。如果你把它的o / p放在“img”标签的“src”属性中。你将能够看到那个可怕的图像

Answer 2

我已更新上面的代码以显示有效的解决方案。不幸的是，它没有上传我想要的jpg文件，而是更大的base64版本。如果有人有上传jpg文件的代码（不使用jquery，因为这是一个移动应用程序），请告诉我。

缩小文件服务器端并通过表单上传

2 个答案: