Question

我正在使用上传文件，并希望根据文件大小显示进度条。

我不知道如何使用根据文件大小工作的进度条。

<script language='Javascript' type="text/javascript">

  function addFile() {

        var ni = document.getElementById("fileDiv");

        var objFileCount = document.getElementById("fileCount");
        var num = (document.getElementById("fileCount").value - 1) + 2;
        objFileCount.value = num;
        var newdiv = document.createElement("div");
        var newdiv1 = document.createElement("div");
        var divIdName = "file" + num + "Div";
        newdiv.setAttribute("id", divIdName);
        newdiv.innerHTML = '<input type="file" name="attachment" id="attachment"/><a href="#" onclick="javascript:removeFile(' + divIdName + ');">Remove </a>';
        ni.appendChild(newdiv);

  }

  function removeFile(divName) {
        var d = document.getElementById("fileDiv");
  d.removeChild(divName);

}

</script>

<div>
     <input type="file" name="attachment" runat="server" id="attachment" onchange="document.getElementById('moreUploadsLink').style.display = 'block';" />
      <input type="file" name="attachment" runat="server" id="File1" visible="false"/>
     <div id="process" style="height:10px; width:150px; background-color:Gray"></div>
  <input type="hidden" value="0" id="fileCount" />
  <div id="fileDiv">
  </div>
  <div id="moreUploadsLink" style="display: none">
        <a href="javascript:addFile();">Attach another File</a>
  </div>
  <asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" />
</div>

这是我的代码：

protected void btnUpload_Click(object sender, EventArgs e)
{
    HttpFileCollection uploadFiles = Request.Files;
    for (int i = 0; i < uploadFiles.Count; i++)
    {
        HttpPostedFile uploadFile = uploadFiles[i];
        string fileName = Path.GetFileName(uploadFile.FileName);
        if (fileName.Trim().Length > 0)
        {
            uploadFile.SaveAs(Server.MapPath("Others/") + fileName);
        }
    }
}

首次加载页面时，它会显示一个带上传按钮的文件上传控件。

当我选择一个文件后，会出现一个名称附加另一个文件的锚点按钮。

当我再次点击它时，会出现另一个文件上传控件。

就像你可能见过的Gmail一样。

现在我在文件上传控件的下方添加了一个div id，我希望他们点击附件文件时，每个文件上传控件进度条应该像Gmail一样显示。

我不想要任何jQuery代码

先谢谢。

Answer 1

这是一个有趣的解决方案http://www.ultramegatech.com/2010/10/create-an-upload-progress-bar-with-php-and-jquery/

对于快速简便的内容，请使用http://www.uploadify.com/

这是另一种常见方法，但同样，您的服务器需要APC http://www.johnboy.com/php-upload-progress-bar/

根据文件大小使用进度条

1 个答案: