PHP ajax 上传大文件带进度条

最新推荐文章于 2022-02-21 16:59:12 发布

原创最新推荐文章于 2022-02-21 16:59:12 发布 · 615 阅读

0 ·

CC 4.0 BY-SA版权

php 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何通过调整PHP和Nginx配置提高文件上传限制，并实现上传进度条显示，使用layui样式和FormData对象处理文件上传。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

服务器设置

. 修改PHP配置文件中的三项：vim /usr/local/php/etc/php.ini

（1）post_max_size = 50M　　　　　　#PHP可接受的最大POST数据

（2）upload_max_filesize = 50M　　　#文件上传允许的最大值

（3）max_execution_time = 300　　　#每个脚本的最大执行时间，秒钟（0则不限制，不建议设0）

2. 修改Nginx配置文件：vim /usr/local/nginx/conf/nginx.conf　(如果忘了配置文件的具体位置，可以使用 locate nginx.conf 查找)

（1）client_max_body_size 50m　　　#客户端最大上传大小 50M

3. 重启PHP：/etc/init.d/php-fpm restart

4. 平滑重启Nginx：/usr/local/nginx/sbin/nginx -s reload

html

<div class="layui-form-item layui-inline" >

<label class="layui-form-label" ><font color="red" >文件名称:</font></label>

<div class="layui-input-inline">

<input type="file" name="files[]" style="padding-top: 8px;" multiple="multiple" >

</div>

</div>

<!--layui进度条-->

<div class="layui-form-item layui-inline" style="width:580px;">

<div class="layui-progress layui-progress-big" lay-filter="demo" id="progress_file" style="display:none" lay-showPercent="true">

<div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div>

</div>

</div>

<script>

$(document).ready(function(){ 

window.form.render();

var element = layui.element;

element.init();



$("#btn_file").click(function(){

var formData = new FormData($("#importForm")[0]); // 因为new FormData的参数需要一个HTMLElement类型的数据，而jQuery得到的是个HTMLElement的集合，哪怕只有一个元素。所以需要用[]取其第一个元素。


$("#progress_file").show();

$.ajax({

url:"{:url('fileUpload')}",

async: true, //异步，必须

type: 'POST',

data: formData,

dataType: 'json', //ajax 返回的数据形式为json 格式

processData: false,

contentType: false,

xhr:function(){

myXhr = $.ajaxSettings.xhr();

if(myXhr.upload){

myXhr.upload.addEventListener('progress',function(e){

var loaded = e.loaded;

var total = e.total;

var percent = Math.floor(100*loaded/total)+'%';

element.progress('demo', percent);

}, false);

}

return myXhr;

},

error:function(data){

console.log(data);

layer.msg( '网络错误',{icon:2}, {time:2});

},

success:function(json){

console.log(json);

if ( json.code == 200) {



layer.msg( json.msg,{icon:1}, {time:2}, redirect() );

} else {

layer.msg( 'aa',{icon:2}, {time:2} );

}

}

});

function redirect () {

setTimeout(function(){

layer.closeAll();

window.parent.onhashchange();}, 2500); //onhashchange() 局部刷新

}

})



});

</script>

说明关于：

1、后端就是正常的php 上传文件处理

2、进度条样式用的是 layui

3、 var formData = new FormData($("#importForm")[0]); 获取表单的数据

FormData对象用以将数据编译成键值对，以便用XMLHttpRequest来发送数据。其主要用于发送表单数据，但亦可用于发送带键数据(keyed data)，而独立于表单使用。如果表单enctype属性设为multipart/form-data ，则会使用表单的submit()方法来发送数据，从而，发送数据具有同样形式。

4、为何要 $("#importForm")[0] ，加0

jQuery是一个伪数组对象，本身是对象，能表现出来数组的特点: 有length属性，能够用下标取值；

$(".someClass") // 这个时候将所有匹配到DOM元素对象放在jQuery维护的数组中;

$("#id") // 这个时候将所有匹配到DOM元素对象放在jQuery维护的数组中;

在数组的特征外，jQuery还可以调用next(), last()等方法（返回结果也还是jQuery对象，jQuery链式功能）；

如下图：