JQuery und PHP realisieren die Upload-Anzeige eines dynamischen Fortschrittsbalkens

Dieser Artikel stellt Ihnen die Kombination von JQuery und PHP vor, um die Funktion zur Anzeige des dynamischen Fortschrittsbalkens zu realisieren. Dieser Artikel stellt sie Schritt für Schritt im Detail vor. Interessierte sollten einen Blick darauf werfen

Windows-Änderungsmethode unter der Umgebung

Schritt 1: Ändern Sie die Größenbeschränkung der POST-Datei unter PHP5

1 .ini

Suchen: max_execution_time = 30, das ist die maximale Zeit, die jedes Skript ausführen kann, in Sekunden, ändern Sie sich zu: max_execution_time = 150

Suchen: max_input_time = 60, das ist die Zeit, die jedes Skript ausführen kann kann verbrauchen Die Zeit, die Einheit ist auch Sekunden, geändert zu:

max_input_time = 300

Gefunden: Memory_limit = 128M, dies ist der maximale Speicher, der vom ausgeführten Skript verbraucht wird, ändern Sie den Wert entsprechend entsprechend Ihren Anforderungen, hier geändert zu:memory_limit = 256M

Gefunden: post_max_size = 8M, die maximale Datenmenge, die vom Formular übermittelt wird, beträgt 8M. Dieses Element begrenzt nicht die Größe einer einzelnen hochgeladenen Datei, sondern die übermittelte Daten des gesamten Formulars. Der Geltungsbereich der Einschränkung umfasst alle über das Formular übermittelten Inhalte. Zum Beispiel: Beim Posten eines Beitrags werden der Beitragstitel, der Inhalt, die Anhänge usw. geändert in: post_max_size = 20M

Gefunden: upload_max_filesize = 2M, die maximal zulässige Größe der hochgeladenen Datei, geändert zu: upload_max_filesize = 10M (die Größe wird hier entsprechend der Nachfrage bestimmt)

Schritt 2: Kontrolle der Datei-Upload-Größe in der Apache-Umgebung

Ändern Sie das Verzeichnis in Apahce. Fügen Sie den folgenden Inhalt zu httpd.conf hinzu

LimitRequestBody 10485760

, was 10M=10*1024 ist *1024. In einigen Artikeln wurde erwähnt, dass es auf 600000000 geändert werden sollte

Starten Sie Apache neu und Sie können die gewünschte Größe in den Einstellungen sehen

HTML-Teil

<form action="index/index/upload" method="POST" enctype="multipart/from-data" id="uploadform" onSubmit="return false">
<p class="inpuys">
<input type="file" name="file" id="uploadfile" value="选择文件" class="cho">
<input type="submit" value="上传" id="submit_btn" class="sub btn btn-info">
</p>
</form>

JS-Teil

<script type="text/javascript" src="{$Think.config.web_root}js/jquery.min.js"></script>
<script type="text/javascript" src="{$Think.config.web_root}js/jquery.form.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var progressbox=$("#progressbox");
var progressbar=$("#progressbar");
var progress=$("#progress");
var completed="0%";
var options={
beforeSubmit:beforeSubmit,
uploadProgress:OnProgress,
success:afterSuccess,
resetForm:true
};
$("#uploadform").submit(function(){
$(this).ajaxSubmit(options);
return false;
});
function OnProgress(event,position,total,percentComplete ) {
progressbar.width(percentComplete + "%");
progress.html(percentComplete + "%");
}
function afterSuccess(){
$("#output").html("上传完成!!");
}
function beforeSubmit(){
if (!$("#uploadfile").val()) {
$("#output").html("请选择文件!!");
return false;
}
progressbar.width(completed);
progress.html(completed);
}
});
</script>

THINKPHP-Methodenteil

public function upload(){
// 获取表单上传文件 例如上传了001.jpg
$file = request()->file('file');
// 移动到框架应用根目录/public/uploads/ 目录下
$info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
if($info){
return "上传成功";
}else{
// 上传失败获取错误信息
echo $file->getError();
}
}

Das Obige ist der gesamte Inhalt dieses Artikels. Für weitere verwandte Inhalte achten Sie bitte auf die chinesische PHP-Website!

Verwandte Empfehlungen:

ThinkPHP und Ajax realisieren sekundäres Verknüpfungs-Dropdown-Menü

Das obige ist der detaillierte Inhalt vonJQuery und PHP realisieren die Upload-Anzeige eines dynamischen Fortschrittsbalkens. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!