时光荏苒,回忆大二的时候刚学会JSP,就迫不及待自己做个网站练练手。当时就想到了要做一个方便生活的网站,它可以方便多个用户之间传输文件,进行交流,也因此自己学了很多东西,在有关JSP的网页网站的制作上收获颇多。当时奋进的心情记忆犹新,然而已成过往……
本博客介绍ruby sinatra 上传文件网站,这样局域网的计算机就可以方便传文件了,理论上比。(我是为了和ubuntu方便传东西,因为是局域网也比较快)
目的介绍
使用sintra 建立一个具有文件传输,文字拷贝功能的网站,便于在自己的不同电脑上传一些小数据。
本次参考的教程有
sinatra 上传文件实现
利用heroku搭建ruby网站项目 这个是我之前的博客
sintra 教程
预览
为了方便,反正是给自己用,布局就简单多了。后台也不做各种非法情况的检查了。
页面分为两部分,左面是用来拷贝文字的,右面是用来上传下载文件的。
具体也不多描述,可以看代码了解。
需要安装的包
gem install sinatra -N
gem install sinatra-contrib -N
代码
后台目录结构如下
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> \
<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" />
<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>