如何创建像 gmail 一样的文件上传？答案

【问题标题】：How to create file upload like gmail?如何创建像 gmail 一样的文件上传？
【发布时间】：2023-03-09 11:28:01
【问题描述】：

我有一个带有“上传”和完成“按钮”的代码。它将在单击“上传”时选择文件，并在给定位置单击“完成”时上传文件。但我需要自动上传文件，比如 Gmail 附件。谁能帮帮我

【问题讨论】：

要求我们推荐或查找书籍、工具、软件库、教程或其他场外资源的问题对于 Stack Overflow 来说是无关紧要的，因为它们往往会吸引固执己见的答案和垃圾邮件。相反，请描述问题以及迄今为止为解决该问题所做的工作。
无论如何我都无法理解您的问题，希望此链接对您有所帮助。 stackoverflow.com/questions/13711264/…
我已经用php、jquery编写了文件上传的代码。在我有两个按钮“上传”和完成“按钮”。它将在单击“上传”时选择文件，并在给定位置单击“完成”时上传文件。不单击“完成”文件应该像我们在 gmail @daker 中所做的那样自动上传

标签： javascript jquery file-upload upload

【解决方案1】：

试试这个代码....

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>File(s) size</title>
<script>
function updateSize() {
  var nBytes = 0,
      oFiles = document.getElementById("uploadInput").files,
      nFiles = oFiles.length;
  for (var nFileId = 0; nFileId < nFiles; nFileId++) {
    nBytes += oFiles[nFileId].size;
  }
  var sOutput = nBytes + " bytes";
  // optional code for multiples approximation
  for (var aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"], nMultiple = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
    sOutput = nApprox.toFixed(3) + " " + aMultiples[nMultiple] + " (" + nBytes + " bytes)";
  }
  // end of optional code
  document.getElementById("fileNum").innerHTML = nFiles;
  document.getElementById("fileSize").innerHTML = sOutput;
}
</script>
</head>

<body onload="updateSize();">
<form name="uploadForm">
<p><input id="uploadInput" type="file" name="myFiles" onchange="updateSize();" multiple> selected files: <span id="fileNum">0</span>; total size: <span id="fileSize">0</span></p>
<p><input type="submit" value="Done"></p>
</form>
</body>
</html>

【讨论】：

【解决方案2】：

您也可以使用第三方库来实现拖放和自动上传功能。我知道有一个图书馆是http://www.dropzonejs.com/

【讨论】：

感谢@Mohit。我已经使用 php、jquery 编写了代码，这适用于那些类型的代码吗？如果是这样我需要在哪里导入它？提前谢谢
你只需要在你的脚本标签中加载dropzone js，并在你的表单标签中添加一个类dropzone。更多信息你可以去文档link