JQuery et PHP implémentent l'affichage du téléchargement de la barre de progression dynamique

Cet article vous présente la combinaison de JQuery et PHP pour implémenter la fonction d'affichage dynamique du téléchargement de la barre de progression. Cet article vous présente étape par étape de manière très détaillée. Les amis intéressés devraient y jeter un œil ensemble

. Méthode de modification Windows sous l'environnement

Étape 1 : Modifier la limite de taille du fichier POST sous php5

1. php.ini

Rechercher : max_execution_time = 30, c'est la durée maximale pendant laquelle chaque script peut s'exécuter, en secondes, remplacer par : max_execution_time = 150

Rechercher : max_input_time = 60, voici ce que chacun le script peut consommer Le temps, l'unité est également les secondes, modifié par :

max_input_time = 300

Trouvé : memory_limit = 128M, c'est la mémoire maximale consommée par le script en cours d'exécution, changez la valeur selon vos besoins, modifié ici par ：memory_limit = 256M

Trouvé : post_max_size = 8M, les données maximales soumises par le formulaire sont de 8M Cet élément ne limite pas la taille d'un seul fichier téléchargé, mais limite la taille. les données soumises de l’ensemble du formulaire. La portée de la restriction inclut tout le contenu soumis par le formulaire. Par exemple : lors de la publication d'un article, le titre de l'article, le contenu, les pièces jointes, etc... Ici est modifié par : post_max_size = 20M

Trouvé : upload_max_filesize = 2M, la taille maximale autorisée du fichier téléchargé, modifiée à : upload_max_filesize = 10M (la taille ici est déterminée en fonction de la demande)

Étape 2 : Contrôle de la taille du téléchargement du fichier dans l'environnement Apache

Modifiez le répertoire situé dans Apahce Ajoutez le contenu suivant à httpd.conf

LimitRequestBody 10485760

, qui est 10M=10*1024 *1024. Certains articles mentionnaient qu'il fallait le changer en 600000000

Redémarrez Apache et vous pouvez voir la taille souhaitée dans les paramètres

Partie HTML

<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 part

<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>

Partie de la méthode THINKPHP

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

Ce qui précède est l'intégralité du contenu de cet article Merci d'avoir lu Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois. !

Recommandations associées :

ThinkPHP et Ajax réalisent un menu déroulant de liaison secondaire

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!