服务器设置
. 修改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链式功能);
如下图: