文件互传，局域网计算机传文件

最新推荐文章于 2023-12-19 21:44:31 发布

长虹剑

最新推荐文章于 2023-12-19 21:44:31 发布

阅读量482

点赞数

分类专栏： ruby 实用工具文章标签： sinatra web ruby 文件上传

本文链接：https://blog.csdn.net/hongmaodaxia/article/details/85785304

版权

ruby 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

实用工具

7 篇文章 0 订阅

订阅专栏

时光荏苒，回忆大二的时候刚学会JSP，就迫不及待自己做个网站练练手。当时就想到了要做一个方便生活的网站，它可以方便多个用户之间传输文件，进行交流，也因此自己学了很多东西，在有关JSP的网页网站的制作上收获颇多。当时奋进的心情记忆犹新，然而已成过往……

本博客介绍ruby sinatra 上传文件网站，这样局域网的计算机就可以方便传文件了，理论上比。（我是为了和ubuntu方便传东西，因为是局域网也比较快）

目的介绍

使用sintra 建立一个具有文件传输，文字拷贝功能的网站，便于在自己的不同电脑上传一些小数据。
本次参考的教程有
sinatra 上传文件实现
 利用heroku搭建ruby网站项目这个是我之前的博客
sintra 教程

预览

为了方便，反正是给自己用，布局就简单多了。后台也不做各种非法情况的检查了。
结果预览
页面分为两部分，左面是用来拷贝文字的，右面是用来上传下载文件的。
具体也不多描述，可以看代码了解。

需要安装的包

gem install sinatra -N
gem install sinatra-contrib -N

代码

后台目录结构如下
tree

run.rb

require 'sinatra'
require 'sinatra/reloader'
require 'erb'
# gem install sinatra-reloader

configure :development do
  register Sinatra::Reloader
  set :server, "webrick"
  set :bind, '0.0.0.0'
end

usedir="xxx"
#set :public_folder,File.dirname(__FILE__)+usedir
#set :views, File.dirname(__FILE__)+usedir

set :public_folder,"./cite"
set :views, "./cite"

get '/' do
    #return Dir.pwd.to_s
    redirect to("/copy")
    #redirect '/copy'
end

get '/copy' do
  fp=File.open("file/copy.txt")
  @copy_text=fp.read
  fp.close
  #p @copy_text

  files=Dir["./file/files/*"].sort_by{ |f| File.mtime(f) }

  if files.size > 10
    File.delete files[0]
    files.delete_at 0
  end

  files.reverse!

  html="<ol>"
  files.each do|e|
         html+="<li><a href='/download/#{e}'>#{e}</a>&nbsp; &nbsp;\
          <a href='/file_del/#{e}'>删除</a></li>"
  end

  html+="</ol>"

  @file_list=html
  erb :copy
end

post '/copy_text_submit' do
   #p params.keys
   p params["info"]
   fp=File.open("file/copy.txt","w")
   fp.puts params["info"]
   fp.close
   'OK '+params["info"]
end

#https://blog.csdn.net/vah101/article/details/41676695
post '/upload' do
    @error = ""
    unless params[:file] &&
           (tempfile = params[:file][:tempfile]) &&
           (filename = params[:file][:filename])
        @error = 'No file selected'
        redirect to('/copy')
    end

    target = "./file/files/#{filename}"
    File.open(target, 'wb') {|f| f.write tempfile.read }

    redirect '/copy'

end

get '/file_del/*' do
    fname=params['splat'][0]
    #p fname
    File.delete fname
    redirect '/copy'
end


get '/download/*' do
    fname=params['splat'][0]
    #p fname
    send_file fname
end

copy.erb
注意这里传输文字的地方我使用了 ajax。

<!DOCTYPE html>
<html>
<body>

<div id="main" style="width:900px">

<div id="left" style="width:400px;float:left;">
<textarea id="copy_text" name="message" rows="10" cols="30">
<%=@copy_text%>
</textarea>

<button type="button" onclick="submit_ajax()">提交！</button>

<div id="output" name="output" style="height:200px;width:400px;font-size:18px"></div>

</div>

<div id="right" style="width:480px;float:left; margin-left:20px">

<form action='/upload' enctype="multipart/form-data" method='POST'>
    请选择上传的文件 </br> <input name="file" type="file" /> &nbsp;&nbsp;
&nbsp;&nbsp;
    <input type="submit" value="Upload" />


    <p> <%=@error%>  </p>

</form>

</br>

<div>
<%=@file_list%>
</div>

</div>

</div>

<script type="text/javascript">
    function submit_ajax() {
        var text = document.getElementById('copy_text').value;
        if (text.length < 1) {
            //alert('格式不正确！');
            return;
        }

        var req="info="+text;

        var xmlhttp;
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp=new XMLHttpRequest();

        xmlhttp.onreadystatechange=function()  {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                document.getElementById("output").innerHTML=xmlhttp.responseText;
            }
        }


        xmlhttp.open('post', '/copy_text_submit', true);
        xmlhttp.onload = function(resp) {
            if (xmlhttp.status == 200) {
                //alert('提交成功！'+ req);
            } else {
                alert('Error:' + xmlhttp.status);
            }
        };
        xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        //req=encodeURI(req)
        xmlhttp.send(req);
    }
</script>

</body>
</html>

长虹剑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文件互传，局域网计算机传文件

时光荏苒，回忆大二的时候刚学会JSP，就迫不及待自己做个网站练练手。当时就想到了要做一个方便生活的网站，它可以方便多个用户之间传输文件，进行交流，也因此自己学了很多东西，在有关JSP的网页网站的制作上收获颇多。当时奋进的心情记忆犹新，然而已成过往……目的介绍使用sintra 建立一个具有文件传输，文字拷贝功能的网站，便于在自己的不同电脑上传一些小数据。本次参考的教程有sinatra 上传文...
复制链接

扫一扫

专栏目录