0

アップロードファイルを使用していますが、ファイルサイズに応じてプログレスバーを表示したいと思います。

ファイルサイズに応じて機能するプログレスバーの使い方がわかりません。

<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);
        }
    }
}

初めてページをロードすると、アップロードボタン付きの1つのファイルアップロードコントロールが表示されます。

その後、1つのファイルを選択すると、名前が付いた1つのアンカーボタンが表示され、別のファイルを添付します。

それをもう一度クリックすると、別のファイルアップロードコントロールが表示されます。

あなたが見たかもしれないGmailのように。

ここで、ファイルアップロードコントロールのすぐ下に1つのdiv idを追加しました。ファイルの添付をクリックすると、すべてのファイルアップロードコントロールのプログレスバーがGmailのように表示されるようにします。

jQueryコードは必要ありません

前もって感謝します。

4

1 に答える 1

0

これは興味深い解決策です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/が必要です。

于 2012-09-07T17:19:14.797 に答える