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

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

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

$('#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

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文件夹中

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

jsp向服务器上传文件,jsp ftp 上传文件到服务器
jsp ftp 上传文件到服务器内容精选换一换安装传输工具在本地主机和Windows云服务器上分别安装数据传输工具,将文件上传到云服务器.例如QQ.exe.在本地主机和Windows云服务器上分 ...
Confluence wiki上传文件时报“不能上传文件至Confluence中，服务器可能已失效”
Confluence wiki 上传文件时报"不能上传文件至Confluence中,服务器可能已失效"的解决方法. 一. 后台管理修改配置首先用管理员登陆Confluence后台 ...
服务器如何接收curl上传文件,linux curl上传文件到服务器
linux curl上传文件到服务器内容精选换一换为了实现通过NAT Server可使用SSH协议跳转到SAP HANA节点的功能,以及SAP HANA节点和NAT Server互相通过SSH协 ...
用ftp上传到服务器视频文件夹,ftp 上传文件夹到服务器
ftp 上传文件夹到服务器内容精选换一换上传的文件和上传的文件夹中包含的文件支持的格式请参见支持的文件格式.文件上传:从本地上传:在Projects Explorer视图中选中一个文件夹,依次单 ...
c winform 上传文件到mysql_WinForm上传文件至服务器
/// /// WebClient上传文件至服务器 /// /// 文件名,全路径格式 /// 服务器文件夹路径 /// public bool Upload(string localFilePath ...
向服务器上传文件的命令,上传文件到远程服务器的命令
上传文件到远程服务器的命令内容精选换一换将文件上传至Windows云服务器一般会采用MSTSC远程桌面连接的方式.本节为您介绍本地Windows计算机通过远程桌面连接,上传文件至Windows云 ...
Java服务器与客户端传文件,java实现上传文件到服务器和客户端.pdf
java实实现现上上传传文文件件到到服服务务器器和和客客户户端端这篇文章主要为大家详细介绍了java实现上传文件到服务器和客户端,具有一定的参考价值,感兴趣的小伙伴们以参考一下 JAVA编写一个 ...
内网xshell传输文件命令_Xshell 上传文件到服务器以及常用的lunix 命令
Xshell 上传文件到服务器 1:输入rz命令,看是否已经安装了lrzsz,如果没有安装则执行 yum -y install lrzsz命令进行安装. 2:安装成功后查看是否安装成功 3:输入rz ...
linux xshell上传文件夹,XShell上传文件到Linux服务器上
Xshell很好用,然后有时候想在windows和linux上传或下载某个文件,其实有个很简单的方法就是rz,sz. 首先你的Linux上需要安装安装lrzsz工具包,(如果没有安装请执行以下命令,安 ...

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

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

最新文章

热门文章