正好最近有做这个,显示进度是客户端的操作。我并没有使用上传的插件。首先在head
标签里面加上
<meta name="_token" content="{ csrf_token() }">
然后是js代码:
$("#upload_file").on('change',function(){
if(!this.files.length) return false;
var formData=new FormData();
var file=this.files[0];
formData.append('upfile',file,file.name);
var xhr = new XMLHttpRequest();
xhr.open('post','{ action('FileController@upload') }?dir={ $currentDir }',true);
xhr.setRequestHeader('X-CSRF-TOKEN',$("meta[name=_token]").attr('content'));
xhr.onload = function() {
if (xhr.status === 200) {
layer.alert("上传完成!",{},function(){
location.reload(true);
});
} else {
alert('An error occurred!');
}
};
/*主要是这里*/
xhr.upload.onprogress=function(evt){
$("#info").html('正在上传...'+Math.floor(100*evt.loaded/evt.total)+"%");
}
xhr.send(formData);
});
upload_file
是上传按钮的id。info
是显示进度的div的id。里面还有用到layer.alert
,你可以认为就是alert
。当然最重要的一点是低版本的浏览器并不支持。。