JavaScript上传进度栏问题 [英] JavaScript Upload Progress bar Issue
问题描述
在我的应用程序中，当用户上传任何大小(小于1GB)的文件时，我需要显示一个进度条，其中显示了要上传多少内容.
我也需要使用多文件上传"来完成此操作....因此，我选择了Jquery multi Class.
上传工作正常，即使我将其可见性设置为"visible"，也无法显示进度栏问题
我使用"HIDDEN FIELD"从服务器端获取服务器升级的内容.
请帮帮我...我在这里呆了一整天:(
这是我的代码...
Hi,
In my application when user upload an file of any size(< 1GB) i need to show an progress bar of how much contents are uploaded like that.
Also i need to do this with "multi file uploads"....hence i go with Jquery multi Class.
Uploads are working fine, problem is with progress bar is not showing even i set its visibility=''visible''
I used ''HIDDEN FIELD'' for getting server uploded contents from server side.
Please help me out...i''m stuck here for one whole day :(
Here is my Code...
//My 'Upload.aspx'
<script language="javascript" type="text/javascript">
var t;
function DoTimer() {
var content = document.getElementById('ctl00_Adminmaster_HidContentLength');
var upload = document.getElementById('ctl00_Adminmaster_HidUploadedLength');
//if (parseFloat(content.value) != '0' && parseFloat(upload.value) != '0') {
var total = parseFloat(content.value);
var upload = parseFloat(upload.value);
var status = parseFloat((upload / total) * 100).toFixed(2);
// alert(status);
if (status != 'NaN') {
alert('csss');
var container = document.getElementById('dvProgressContainer');
container.style.visibility = 'visible';
var one = document.getElementById('dvProgressPrcent');
one.innerHTML = status + '%';
var two = document.getElementById('dvProgress');
two.style.width = status + '%';
}
t = setTimeout("DoTimer()", 500);
//}
}
function OnUpload(b) {
DoTimer();
b.style.visibility = "hidden";
}
</script>
<style type="txt/css">
#dvProgressContainer
{
width: 500px;
height: 18px;
visibility:hidden;
}
#dvProgBorder
{
border-left: solid 1px #CFCFCF;
border-right: solid 1px #CFCFCF;
width: 500px;
height: 18px;
}
#dvProgress
{
background-image: url(../Images/Progressbar_Content.gif);
height: 18px;
width: 0px;
}
</style>
<asp:HiddenField ID="HidUploadedLength" runat="server" />
<asp:HiddenField ID="HidContentLength" runat="server" />
<asp:FileUpload ID="FileUpload1" runat="server" class="multi"
ForeColor="#3333CC" Width="350px" />
<pre><asp:ImageButton ID="but_upload" runat="server"
ImageUrl="~/images/upload_btn.jpg" onclick="but_upload_Click1"/>
< div id ="dvProgressContainer">
< div id ="dvProgBorder">
< div id ="dvProgress">
</div>
</div>
< div id ="dvProgressPrcent">
< strong> 0％</strong>
</div>
</div>
<div id="dvProgressContainer">
<div id="dvProgBorder">
<div id="dvProgress">
</div>
</div>
<div id="dvProgressPrcent">
<strong>0%</strong>
</div>
</div>
//My ''Upload.aspx.cs
protected void Page_Load(object sender, EventArgs e)
{
if(!IsPostBack)
{
HidContentLength.Value = "0"; HidUploadedLength.Value = "0";
but_upload.Attributes.Add("onclick", "javascript : return OnUpload(this);");
}
}
protected void but_upload_Click1(object sender, ImageClickEventArgs e)
{
bool flg = false;
{
// Do code here to saving a file from fileupload control
try
{
// Get the HttpFileCollection
HttpFileCollection hfc = Request.Files;
int c = 0;
for (int k = 0; k < hfc.Count; k++)
{
HttpPostedFile hhpf = hfc[k];
c += hhpf.ContentLength;
}
HidContentLength.Value = c.ToString();
int bufferSize = 1;
byte[] buffer = new byte[bufferSize];
double UploadedLength = 0, ContentLength = 0, FinalLength = 0;
for (int i = 0; i < hfc.Count; i++)
{
HttpPostedFile hpf = hfc[i];
if (hpf.ContentLength > 0)
{
string str = System.IO.Path.GetFileName(hpf.FileName);
using (FileStream fs = new FileStream("D:\\Elan\\" + System.IO.Path.GetFileName(hpf.FileName), FileMode.Create))
{
UploadedLength = 0; ContentLength = hpf.ContentLength;
while (UploadedLength < ContentLength)
{
//Fill the buffer from the input stream
int bytes = hpf.InputStream.Read(buffer, 0, bufferSize);
//Writing the bytes to the file stream
fs.Write(buffer, 0, bytes);
//Update the number the webservice is polling on to the session
UploadedLength += bytes;
FinalLength += UploadedLength;
HidUploadedLength.Value = FinalLength.ToString();
}
}
flg = true;
}
else
{
string script = "<script>alert(''Choose File to Upload !'');</script>";
ScriptManager.RegisterStartupScript(this, this.GetType(), "KeyClient", script.Trim(), false);
}
}
}
catch (Exception ex)
{
FTP.ErrorLog.WriteError("Upload.aspx.cs", "Button1_Click", ex.ToString());
string script = "<script>alert(''File Upload Failed !'');</script>";
ScriptManager.RegisterStartupScript(this, this.GetType(), "KeyClient", script.Trim(), false);
}
if (flg)
{
string script = "<script>alert(''File Uploaded Successfully'');</script>";
ScriptManager.RegisterStartupScript(this, this.GetType(), "KeyClient", script.Trim(), false);
}
}
}
推荐答案
您要执行以下操作:
You do this:
function OnUpload(b) {
DoTimer();
b.style.visibility = "hidden";
}
然后
and then
but_upload.Attributes.Add("onclick", "javascript : return OnUpload(this);");
我在您的代码中找不到but_upload.如果那将是您页面上的一个按钮，会不会隐藏包括进度栏在内的所有内容?
问题是否在这里?
I can´t find the but_upload in your code. if that would be a button on your page will that not hide everything including the progress bar?
Is it here somewhere the problem is maybe
检查此博客
http://zoyobar.blogspot.com/2011/12/use- jquery-uploader-to-display-file.html [ ^ ]
--NDK
check this blog
http://zoyobar.blogspot.com/2011/12/use-jquery-uploader-to-display-file.html[^]
--NDK
这篇关于JavaScript上传进度栏问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
