这几天公司让做一个在线的照片展示系统用来测试两个星期的RoR自学成果,在做到上传照片时,因为是按照<<Web 敏捷开发>>来开发的,书上是将图片保存在数据库中,也就是说在数据库表建立一个名为data,类型为binary的字段,可以成功保存.
可是将图片文件保存到数据库中占有太多的物理空间,并且速度慢,所以改为在数据库中存放图片的url,将图片存放到public/images/目录下,在这里没有使用其他的插件,
在getpicture.rhtml中写下如下的代码
<html>
<head>
<center>
<h1>Select Your Picture and Upload</h1>
</center>
</head>
<body>
<center>
<%= error_messages_for("picture") %>
<% form_for(:picture,
:url => { :action => 'savepicture'},
:html => { :multipart => true }) do |form| %>
Comment: <%= form.text_field("comment") %>
<br/>
Upload Your picture: <%= form.file_field("uploaded_picture") %>
<br/>
<%= submit_tag("Upload file") %>
<%= link_to "Back",{:action => "adminlist"} %>
<% end %>
</center>
</body>
</html>
上传的图片会被保存在uploaded_picture属性中,但数据库理没有这么一个字段,所以在模型对象里做如下设置
def uploaded_picture=(picture_field)
self.name = base_part_of(picture_field.original_filename)
self.content_type = picture_field.content_type.chomp
#self.data = picture_field.read
self.image_url = "/images/" + self.name
File.open("#{RAILS_ROOT}/public/images/#{picture_field.original_filename}", "wb+") do |f|
f.write(picture_field.read)
end
end
def base_part_of(file_name)
File.basename(file_name).gsub(/[^\w._-]/, '')
end
利用File.open一行将图片文件复制到public/images/目录下,并保存了该图片的url
在页面显示的时候直接用
<img src="<%= @picture.image_url%>" width="400" height="400"/>
就可以显示出图片了
分享到：
相关推荐
本文将深入探讨“批量上传图片插件001”，它专注于解决用户一次性选择并上传多个图片到指定文件夹的问题。 批量上传图片功能的核心在于其多选特性，用户不再需要逐个点击上传，而是可以通过拖放或选择文件夹的方式...
图片批量上传控件和插件则进一步增强了这种功能，允许用户一次性上传多个图片，提高了用户交互体验和工作效率。 在ASP中实现图片上传，主要涉及以下几个关键技术点： 1. **文件上传控件**：ASP页面通常会包含一个...
"jQuery批量上传图片插件"是基于jQuery实现的一种功能，旨在为网页应用提供便捷的图片批量上传功能。这个插件通常利用Ajax技术实现异步上传，即在不刷新页面的情况下，用户可以选择多张图片并将其上传到服务器，大大...
在IT领域，图片上传本地预览插件是一个常见的功能组件，尤其在网页应用和桌面软件中，它极大地提升了用户体验。这个插件的核心作用是让用户在实际上传图片到服务器之前，能够在本地环境中预览图片效果，确保图片的...
【cupload本地图片上传预览插件】是一个专为前端开发者设计的实用工具，它使得在网页中实现本地图片的上传和预览功能变得更加简单。这个插件是前端开发中的重要组成部分，尤其对于那些需要用户交互式上传图片的网站...
本主题主要探讨如何在KindEditor中实现多图上传功能，并解决因移除Flash导致的选择图片按钮无法展示的问题，同时添加上传后的图片结果展示。 一、多图上传功能 多图上传是现代富文本编辑器必备的功能之一，它允许...
为了满足这种需求，开发者们通常会通过自定义插件来扩展TinyMCE的功能，实现多图片批量上传。 本文将详细讲解如何为TinyMCE构建一个自定义的多图片批量上传插件，并提供一个使用示范。首先，我们需要理解TinyMCE的...
在IT行业中，H5图片上传插件是一种广泛应用于网页端的组件，它使得用户能够在浏览器上方便快捷地上传图片。这种插件对于个人资料编辑、社交媒体互动、在线表单提交等场景尤其重要，因为它简化了图片处理流程，提高了...
这个“jQuery实现的对上传图片进行裁剪插件”就是为了满足这样的需求而设计的。下面将详细阐述这个插件的工作原理、功能特性以及使用方法。 首先，该插件基于JavaScript库jQuery构建，它允许开发者在客户端（用户的...
Ajax图片上传插件是一种在网页上实现异步图片上传功能的技术解决方案。它通过Ajax（Asynchronous JavaScript and XML）技术，允许用户在不刷新整个页面的情况下，将图片数据发送到服务器进行处理，极大地提升了用户...
页面上传图片插件是网页开发中常用的一种工具，主要用于用户在网页上方便地上传自己的图片。这类插件的出现极大地提升了用户体验，使得用户无需离开当前页面就能完成图片的选取和上传，大大简化了操作流程。下面我们...
本文将深入探讨“JS上传图片插件”的相关知识点，以及如何使用jQuery-File-Upload-9.5.6这个插件来实现图片上传功能。 一、JavaScript图片上传基础 1. HTML5 File API：现代浏览器支持File API，使得通过...
jQuery支持拖拽图片上传的图片批量上传插件.rar jQuery支持拖拽图片上传的图片批量上传插件.rar jQuery支持拖拽图片上传的图片批量上传插件.rar jQuery支持拖拽图片上传的图片批量上传插件.rar jQuery支持拖拽图片...
在IT行业中，尤其是在网页开发领域，单图片上传插件是一个常用的功能组件，它允许用户方便地上传单张图片到服务器。本插件基于HTML5和jQuery技术，这两大技术是现代网页开发的基础，HTML5提供了丰富的功能接口，而...
这个"jQuery支持拖拽图片上传的图片批量上传插件"正是针对这一需求而设计的。jQuery作为一个广泛使用的JavaScript库，提供了丰富的API和简洁的语法，使得开发者能够更轻松地实现复杂的前端功能，比如本例中的拖拽...
"多张图片上传插件"就是为了满足这种需求而设计的前端工具，它允许用户一次性选择并上传多张图片，提供了类似微信或QQ说说发布图片的用户体验。这种功能大大提升了用户交互性和操作便捷性。 在实现多张图片上传时，...
《百度图片上传插件详解与应用》 在互联网时代，图片作为信息传递的重要载体，其上传功能已经成为各类网站和应用程序的必备元素。百度图片上传插件，作为一个高效、易用的解决方案，为开发者提供了强大的图片上传...
在IT行业中，上传图片插件是网页或应用中不可或缺的一部分，尤其在电商平台上，如淘宝。"仿淘宝淘宝上传图片插件"是一个旨在模仿淘宝网图片上传功能的工具，它为用户提供了方便快捷的方式来添加商品图片，提升用户...
为了解决这个问题，开发者创建了“远程图片上传插件”。这个插件的出现使得用户可以直接在编辑器内上传图片到服务器，无需离开编辑界面，极大地提升了工作效率。插件作者对原有的功能进行了升级和集成，确保其与...
本文将深入探讨“jQuery上传图片预览插件”，这是一个实用的工具，旨在提升用户在网页上上传图片时的体验。该插件在浏览器中提供了图片的实时预览功能，尤其在处理图片大小调整和等比例缩放方面表现卓越，同时兼容...