jquery 打开服务器文件管理,javascript - 前端js如何封装一个方法或者是jQuery的插件实现点击一个按钮打开本地文件管理系统，进行上传文件...

世界只因有你2017-05-16 13:38:563楼

前段时间封装的一个方法,使用ajax和formData方法,实现文件上传，在上传的过程中显示上传进度

js

$('#upload').on('click',function(){

var xhr = new XMLHttpRequest();

xhr.open('post','../PHP/post_file.php',true);

// 获取上传进度

xhr.upload.onprogress = (ev)=>{

var scale = Math.round( (ev.loaded/ev.total)*100 );

$('.text').html( scale + '%');

$('.progress').css('width', scale + '%');

};

xhr.onload = ()=>{

console.log('上传成功');

};

// 通过file表单的files属性拿到文件数据 通过formData将数据转换为二进制格式

var fileInfo = new FormData();

fileInfo.append( 'file',$('#iptFile')[0].files[0] );

// 发送数据

xhr.send(fileInfo);

});

html

0%

css

.box{

position: relative;

width: 400px;

height: 50px;

border:1px solid #000;

margin-top:30px;

}

.progress{

width: 0%;

height: 100%;

background-color: red;

}

.text{

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

text-align: center;

}

php (php非本人所写)

header('Content-type:text/html; charset="utf-8"');

$upload_dir = 'uploads/';

if(strtolower($_SERVER['REQUEST_METHOD']) != 'post'){

exit_status(array('code'=>1,'msg'=>'错误提交方式'));

}

if(array_key_exists('file',$_FILES) && $_FILES['file']['error'] == 0 ){

$pic = $_FILES['file'];

if(move_uploaded_file($pic['tmp_name'], $upload_dir.$pic['name'])){

exit_status(array('code'=>0,'msg'=>'上传成功','url'=>$upload_dir.$pic['name']));

}

}

echo $_FILES['file']['error'];

exit_status(array('code'=>1,'msg'=>'出现了一些错误'));

function exit_status($str){

echo json_encode($str);

exit;

}

?>

需要在服务器环境下运行，我用的是wamp,上传的文件会存到和php同级下的uploads文件夹中