Rat's

一个可以将本地文件上传至VPS服务器的工具:jQuery-File-Upload精简美化版
说明:之前老有人问博主除了FTP还有啥方法能把本地文件上传到VPS服务器,这里就分享个工具jQuery-File-...
扫描右侧二维码阅读全文
05
2018/10

一个可以将本地文件上传至VPS服务器的工具:jQuery-File-Upload精简美化版

说明:之前老有人问博主除了FTP还有啥方法能把本地文件上传到VPS服务器,这里就分享个工具jQuery-File-Upload,一个文件上传工具,该工具可以上传任何文件,支持在线预览视频,上传后也可以在线删除等等,很方便,而且个人觉得上传比FTP要稳。由于原文件样式很不好看,所以博主就找前端大佬Zero博主帮忙进行精简和美化了下,也小小的适配了手机端。

截图

请输入图片描述

下载

文件下载:jQuery-File-Upload.zip

为了考虑国内服务器的加载速度,该源码所有资源都本地化了,所以体积比简化前还大。

使用

环境要求:Nginx/ApachePHP

1、直接使用
如果你自己有建站环境,直接将源码丢进网站根目录,再给予server/php/files目录可写入权限即可。上传后的文件保存在server/php/files文件夹,相关上传配置可在server/php/UploadHandler.php里修改。

2、Docker安装
如果你只是单纯的想上传文件,这里博主就制作了个Docker镜像,很快就装好了。

安装Docker

#CentOS 6
rpm -iUvh http://dl.fedoraproject.org/pub/epel/6/x86_64/epel-release-6-8.noarch.rpm
yum update -y
yum -y install docker-io
service docker start
chkconfig docker on

#CentOS 7、Debian、Ubuntu
curl -sSL https://get.docker.com/ | sh
systemctl start docker
systemctl enable docker

安装jQuery-File-Upload

docker run --name upload -d -p 6800:80 -v /home:/var/www/server/php/files moerats/jquery-file-upload:latest

#参数说明
-p 6800:80 前面的6800为容器映射到外部的端口,等于你访问ip:6800就等于访问程序,可自行修改
-v /home:/var/www/server/php/files 将程序里上传的文件映射到服务器的/home文件夹,可自行修改

完成后我们可以通过ip:6800访问程序,并上传文件至/home文件夹。

注意我们需要给映射的文件夹777权限,不然会上传失败。

chmod 777 /home

部分CentOS系统可能需要开启防火墙端口,不然会打不开。

#CentOS 6
iptables -I INPUT -p tcp --dport 6800 -j ACCEPT
service iptables save
service iptables restart

#CentOS 7
firewall-cmd --zone=public --add-port=6800/tcp --permanent
firewall-cmd --reload

总结

该程序配合无上传功能的H5aiDirectoryLister目录索引一起使用挺不错的。特别是Docker可以直接将上传目录映射到具体的文件夹,有兴趣的可以玩玩。

如果你服务器空间很大,需要分批上传多个文件夹,可以多开几个Docker容器,比如分批传到/home/rats文件夹,可分别运行命令

#记得--name参数和-p端口映射得不一样
docker run --name Linux -d -p 6800:80 -v /home:/var/www/server/php/files moerats/jquery-file-upload:latest
docker run --name Win -d -p 6877:80 -v /rats:/var/www/server/php/files moerats/jquery-file-upload:latest

这时候可以分别访问ip:6800ip:6877上传到/home/rats文件夹了。

Vultr新用户注册送100美元/16个机房按小时计费,支持支付宝,【点击查看】。
最后修改:2018 年 10 月 07 日 04 : 28 PM

发表评论

33 条评论

  1. rat's fans

    大佬,能不能更新下直接上传文件夹的功能呢?

  2. 蚊子

    请问上传的文件无法在线删除是怎么回事呢?

    1. Rat's
      @蚊子

      看下是不是权限问题

      1. 蚊子
        @Rat's

        不太明白,挂载用创新建的upload文件夹,用户root,root,755,无法上传,sudo 为777之后可以上传;上传后文件用户www-data,www-data,644,无法删除,sudo 为777之后依然无法删除。

        1. 蚊子
          @蚊子

          找到原因了,用IP:port时可以删除,但不知道为什么用域名的时候不能删除。(用了cloudflare的dns解析和cdn,用nginx监听808端口转发到6800端口)

          1. Rat's
            @蚊子

            这种情况可能与缓存有关

  3. Null

    博主大大,请问可以通过修改UploadHandler.php文件来指定上传的目录吗?

    1. Rat's
      @Null

      貌似不能,你试试改下。

  4. weimo

    有两个问题(其实是一个):

    413 request Entity too LargeThe uploaded file exceeds the upload_max_filesize directive in php.ini
    在文件比较大的时候会出现上面两种错误,当然可以修改nginx和php的配置来提高文件大小限制。

    不过对于更大的文件,比如200M 300M的这样就不太适用了。
    猜测上传方式不是分片上传?这个不是很懂。
    不知道有没有更好一点的修改方法?感谢 :)

    1. Rat's
      @weimo

      上传方法我好像发了不少,你看看这个https://www.moerats.com/archives/766/。

      1. weimo
        @Rat's

        谢谢

  5. !!!!

    不支持中文是怎么肥事。

    1. Rat's
      @!!!!

      你是说上传的文件?

  6. open san

    先感谢版大分享的上传好工具。
    另外,
    我自己的做法,
    是在docker hub 找其他整合好的HTTP server + PHP镜像,
    如:
    https://hub.docker.com/r/trafex/alpine-nginx-php7/
    alpine + ngnix + PHP 7

    指令打:(port 依预设 80)
    docker run --name anp7 -d -p 80:80 -v /var/www/jQuery-fileupload解压资料夹:/var/www/html trafex/alpine-nginx-php7

    1. soyosan
      @open san

      也感谢这位旁友的方法~

    2. Rat's
      @open san

      只要能行得通都行,我喜欢从纯净系统做起。

  7. 黑猫

    如果可以选择上传路径就好了。配合H5ai、DirectoryLister食用时,可以选择上传至任一子目录。

    1. Rat's
      @黑猫

      不过可以使用多个docker分开指向指定目录也行。

  8. 黑猫

    Zero博主的网站挂了吗?

    1. Rat's
      @黑猫

      他网站好像在北岸,所以暂时得关闭几天。

  9. haha

    看大佬你docker用的这么溜,能指导一下怎么修改镜像用的privoxy吗https://www.good21.com/2016/11/23/nas-docker-ss-cloudsync/

    1. Rat's
      @haha

      这个你是要修改配置文件吗?直接拉取github上的源码,然后修改/rootfs/etc/privoxy/里的配置文件,再用里面的Dockerfile文件建个镜像就行了。

      1. haha
        @Rat's

        问题解决了/entrypoint.sh权限改为755重新打包就好了

        1. Rat's
          @haha

          里面的脚本肯定需要执行权限的。

      2. haha
        @Rat's

        忘贴教程地址了https://dwz.cn/VFcd7muL

      3. haha
        @Rat's

        按照这篇教程创建了镜像,三、利用 Dockerfile 来创建镜像。
        不过运行报错
        docker: Error response from daemon: Container command '/entrypoint.sh' could not be invoked..
        网上搜索一番后添加了--privileged=true还是有问题

  10. feiyuyu

    博主你好,上传文件失败,报错SyntaxError: Unexpected token < in JSON at position 0,这个怎么办呢?

    1. Null
      @feiyuyu

      我也遇到这个问题了,只要给server/php/files目录写权限就行

      1. Rat's
        @Null

        对,好像是有这个要求,我说明一下。

    2. Rat's
      @feiyuyu

      这个好像是js问题,你用什么环境搭建的,还是docker?

      1. feiyuyu
        @Rat's

        是用的nginx,我不会改js

        1. Rat's
          @feiyuyu

          按照楼上说的给server/php/files目录写入权限就行了。

          1. feiyuyu
            @Rat's

            谢谢,给权限后就可以了