項目需求，有這樣的功能上傳圖片方便許多，而且簡書的編輯器就有同樣的功能哦！
動圖演示
實現起來很簡單，已經有人打包了這樣的一個功能，參見：http://git.razko.nl/InlineAttachment/
下載下來，我們需要的是dist目錄下面的inline-attachment.min.js、jquery.inline-attachment.min.js兩個文件，因為我們一般用jQuery比較多。
Paste_Image.png
在Rails中的使用：
1、簡單起見，把jQuery和InlineAttachment的兩個js文件放在public下面（當然正常來說應該放在assets/javascripts下面）；
2、創建控制器；
class UploadController < ApplicationController
protect_from_forgery :except => :upfile
def index
render :layout => nil
end
# 上傳文件
def upfile
if file = params[:file]
if !file.original_filename.empty?
@filename = file.original_filename
FileUtils.mkdir("#{Rails.root}/public/upload") unless File.exist?("#{Rails.root}/public/upload")
#寫入文件
File.open("#{Rails.root}/public/upload/#{@filename}", "wb") do |f|
f.write(file.read)
end
render :json=>{filename: "/upload/#{@filename}"}
else
render :json=>{error: 'Upload error!'}
end
else
render :json=>{error: 'Upload error!'}
end
end
end
3、路由
get 'upload/index'
post 'upload/upfile'
4、視圖 index.rhtml
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery InlineAttachment Demo</title>
</head>
<body>
<textarea rows="10" cols="50"></textarea>
<textarea rows="10" cols="50"></textarea>
<textarea rows="10" cols="50"></textarea>
<script src="/jquery-1.7.1.min.js"></script>
<script src="/inline-attachment.min.js"></script>
<script src="/jquery.inline-attachment.min.js"></script>
<script type="text/javascript">
$(function() {
$('textarea').inlineattachment({
uploadUrl: '/upload/upfile'
});
});
</script>
</body>
</html>
結束！如果想了解具體的實現，可以查看src下面的代碼。
