logo标签列表

如何创建像Gmail一样的文件上传功能？

javascriptjqueryfile-uploadupload
3

我有一个关于“上传”和“完成”按钮的代码。点击“上传”会选择文件，并在点击“完成”后将文件上传到指定位置。但我需要自动上传文件，就像Gmail的附件一样。能否有人帮助我解决问题？

2
要求我们推荐或寻找书籍、工具、软件库、教程或其他外部资源的问题在 Stack Overflow 上是不适合的，因为它们往往会吸引主观的答案和垃圾邮件。相反，请描述问题以及已经采取的解决方法。 - daker
无论如何，我无法理解你的问题，但希望这个链接对你有所帮助。 http://stackoverflow.com/questions/13711264/php-upload-auto-submit-after-browse-a-file - KOUSIK daniel
我使用PHP和jQuery编写了文件上传的代码。在页面上有两个按钮：“上传”和“完成”。点击“上传”将选择文件，点击“完成”将把文件上传到指定位置。如果不点击“完成”，文件也会自动上传，就像在Gmail中一样。@daker - Ishwarya Prakash
2个回答
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>
1
谢谢@Mohit。我已经用PHP、jQuery编写了代码，这对那种类型的代码有效吗？如果有效，我需要在哪里导入它？提前感谢。 - Ishwarya Prakash
你只需要在脚本标签中加载dropzone js，并在表单标签中添加一个class为dropzone。如需更多信息，请查看文档链接。 - Mohit
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接