Jquery und BigFileUpload implementieren das Hochladen großer Dateien und die Anzeige eines Fortschrittsbalkens

Implementierungsmethode: Verwenden Sie die Bigfileupload-Komponente von Gaoshanlaike, um ein modales Fenster zu öffnen, und aktualisieren Sie es dann weiter, um den Fortschritt zu erhalten. Deshalb habe ich darüber nachgedacht, JQuery zu verwenden Fortschrittsanzeige ohne Aktualisierung. Da die Seite nach dem Absenden nicht aktualisiert werden darf, müssen die von progress.aspx zurückgegebenen Fortschrittsinformationen kontinuierlich über Ajax abgerufen werden, sodass die Ajaxform-Übermittlung von jquery.form verwendet wird. Wenn nach der Übermittlung des Ajaxform-Formulars Ereignisse nach der Übermittlung ausgeführt werden, z. B. das Einfügen von Datensätzen in die Datenbank, wird es weiterhin debuggt.

1. Verwenden Sie die Fortschrittsleiste, das Formular, MultFile und die zugehörigen Komponenten

<script src="../../common/js/jquery-1.2.6.pack.js" type="text/javascript"></script> 
<script src="../../common/jqControl/packed/ui.core.packed.js" type="text/javascript"></script> 
<!--FORM--> 
<script src="../../common/jqControl/ajax/jquery.form.js" type="text/javascript"></script> 
<!--上传文件--> 
<script src="../../common/jqControl/upLoad/jquery.MultiFile.pack.js" type="text/javascript"></script> 
<!--进度条--> 
<script src="../../common/jqControl/packed/ui.progressbar.packed.js" type="text/javascript"></script> 
<!--对话框--> 
<!--我的JS --> 
<link href="../../common/Css/jquery-ui-themeroller.css" rel="stylesheet" type="text/css" /> 
<script src="../gadget/JS/uploadfile.js" type="text/javascript">

2. Der uploadfile.js-Code lautet wie folgt:

$(function() 
{ 
var info = &#39;<div style="display:none" id="uploadinfo">&#39;; 
info += &#39;<p>正在上传: <span id="uploadfilename"></span></p>&#39;; 
info += &#39;<p>上传速度: <span id="uploadrate"></span> </p>&#39;; 
info += &#39;<p>状态: <span id="uploadtitle"></span></p>&#39;; 
info += &#39;<p>预计剩余时间: <span id="uploadlefttime"></span></p>&#39;; 
info += &#39;<p>上传文件大小: <span id="uploadtotal"></span></p>&#39;; 
info += &#39;<p>已上传大小: <span id="uploadcurrent"></span></p>&#39;; 
info += &#39;<p><div id="uploadprogressbar"></div></p>&#39;; 
info += &#39;</div><div id="dialogsucc" > &#39;; 
$("body").append(info); 
//进度条 
$("#uploadprogressbar").progressbar(); 
//上传 
$(&#39;#fileupload&#39;).MultiFile(); 
$(&#39;#btshow&#39;).click(function() 
{ 
alert($("body").html()); 
}); 
//提交 
$(&#39;#btnsubmit&#39;).click(function() 
{ 
$("#uploadForm").ajaxSubmit( 
{ 
dataType: &#39;text&#39;, 
beforeSubmit: function(a,f,o) 
{ 
startProgress(); 
}, 
async:false, 
success: function(data) 
{ 
//$("#dialogsucc").text(data); 
//stopProgress(); 
if(data.succ==1) 
{ 
/* $("#dialogsucc").show(); 
$("#dialogsucc").dialog( 
{ 
modal: true, 
overlay: 
{ 
opacity: 0.5, 
background: "black" 
} 
}); */
} 
}, 
error:function(err) 
{ 
alert(err); 
} 
}); 
}); 
}); 
function getProgress(){ 
$.ajax({ 
type: "post", 
dataType:"json", 
url: "uploadProgress.aspx", 
data: "UploadID=" + $("#UploadID").val(), 
success: function(data){ 
$("#uploadprogressbar").progressbar("progress", data.percent); 
$("#uploadfilename").html(data.filename); 
$("#uploadrate").html(data.rate); 
$("#uploadtitle").html(data.info); 
$("#uploadlefttime").html(data.lefttime); 
$("#uploadtotal").html(data.total); 
$("#uploadcurrent").html(data.current); 
if(data.succ==-1){ 
alert(data.errmsg); 
} 
if (data.succ==0){ 
setTimeout("getProgress()", 1000); 
} 
if (data.succ==1){ 
return; 
} 
}, 
error:function(msg) 
{ 
alert(msg); 
} 
}); 
} 
function startProgress(){ 
$("#uploadinfo").show(); 
setTimeout("getProgress()", 500); 
} 
function stopProgress() 
{ 
$("#uploadinfo").hide(); 
}

3: Der progress.aspx-Code lautet wie folgt:

protected void Page_Load(object sender, EventArgs e) 
{ 
try
{ 
string s = "{"; 
UploadContext upload = UploadContextFactory.GetUploadContext(Request["UploadID"]); 
//初始化 
if (upload.Status == uploadStatus.Initializing) 
{ 
s += responeJSON(upload, "0", ""); 
} 
if (upload.Status == uploadStatus.Uploading) 
{ 
s += responeJSON(upload, "0", ""); 
} 
if (upload.Status == uploadStatus.Complete) 
{ 
s += responeJSON(upload, "1", ""); 
} 
if (upload.Status == uploadStatus.HasError) 
{ 
s += responeJSON(upload, "-1", ""); 
} 
s += "}"; 
Response.Write(s); 
} 
catch (Exception err) 
{ 
//throw err; 
Response.Write("{'info':'" + err.Message.Replace("'", "") + "','succ':-1}"); 
} 
} 
private string responeJSON(UploadContext upload, string succ,string errmsg) 
{ 
string s = ""; 
s += "'info':'" + upload.FormatStatus + "'" ; 
s += ",'percent':'" + Convert.ToInt32((upload.Readedlength * 100.0 / upload.TotalLength)).ToString() + "'"; 
s += ",'current':'" + (upload.Readedlength/1024).ToString() + "KB'"; 
s += ",'total':'" + (upload.TotalLength/1024).ToString() + "KB'"; 
s += ",'rate':'" + upload.FormatRatio + "'"; 
s += ",'filename':'" + upload.CurrentFile + "'"; 
s += ",'cancel_upload':" + 0 ; 
s += ",'lefttime':'" + upload.LeftTime + "'"; 
s += ",'succ':" + succ; 
s += ",'errmsg':'" + errmsg +"'"; 
return s; 
}

4. Nachdem die ajaxForm ausgeführt wurde, kann sie nach dem Hochladen der Datei normal ausgeführt werden. Ich werde es nach der Recherche posten

Das Obige ist die vom Herausgeber eingeführte Jquery und BigFileUpload, um das Hochladen großer Dateien und die Anzeige des Fortschrittsbalkens zu implementieren. Wenn Sie Fragen haben, gehen Sie bitte Senden Sie mir eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte mich auch bei Ihnen allen für Ihre Unterstützung der chinesischen PHP-Website bedanken!

Weitere verwandte Artikel über Jquery und BigFileUpload, die das Hochladen großer Dateien und die Anzeige von Fortschrittsbalken implementieren, finden Sie auf der chinesischen PHP-Website!