JQuery and PHP realize upload display of dynamic progress bar

This article introduces the combination of JQuery and PHP to realize the dynamic progress bar upload display function. This article introduces it to you in detail step by step. Friends who are interested should take a look together

Windows Modification method under the environment

#Step 1: Modify the POST file size limit under php5

1. Edit php.ini

Found: max_execution_time = 30, this is the maximum time for each script to run, in seconds, change to: max_execution_time = 150

Found: max_input_time = 60, this is what each script can consume The time, the unit is also seconds, modified to:

max_input_time = 300

Found: memory_limit = 128M, this is the maximum memory consumed by the script running, change the value according to your needs, modified here to ：memory_limit = 256M

Found: post_max_size = 8M, the maximum data submitted by the form is 8M, this item does not limit the size of a single uploaded file, but limits the submitted data of the entire form. The scope of the restriction includes all content submitted by the form. For example: when posting a post, the post title, content, attachments, etc.... Modify here to: post_max_size = 20M

Find: upload_max_filesize = 2M, the maximum allowed size of the uploaded file , modified to: upload_max_filesize = 10M (the size here is determined according to the demand)

Step 2: File upload size control in the Apache environment

Modify the directory located in Apahce Add the following content to httpd.conf

LimitRequestBody 10485760

which is 10M=10*1024*1024. Some articles mentioned that it should be changed to 600000000

Restart apache, you can see the size you want in the settings

HTML part

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

THINKPHP method part

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

The above is the entire content of this article. Thank you everyone for reading. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

ThinkPHP and Ajax implement secondary linkage drop-down menu

The above is the detailed content of JQuery and PHP realize upload display of dynamic progress bar. For more information, please follow other related articles on the PHP Chinese website!