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

问题描述

一个按钮点击后执行一个事件的方式，打开本地文件管理系统，然后选中文件，然后选中上传

问题解答

前段时间封装的一个方法,使用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

<form action=''><input type='file' id='iptFile'><input type='button' value='点击上传'/> </form> <p class='box'><p class='progress'></p><p class='text'> 0%</p> </p>

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非本人所写)

<?phpheader(’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文件夹中 回答2：

前两天刚好遇到前端上传图片的问题，这个文章是我的记录，你看看有没有帮助。传送门

可以使用<input type='file' />来实现，然后通过css改变input的样式就可以了