[英]HTML5 file drag-and-drop upload with Ruby on Rails
在我的Ruby on Rails應用程序中,我有一個簡單的文件上傳按鈕,我正在嘗試使用HTML5中的File / FileReader API替換拖放框,具體使用本教程 。 我使用Ruby腳本將文件上傳到我的public / data文件夾。 我不確定如何將拖放腳本與其集成。 我的想法是制作我已經隱藏的文件上傳按鈕,並在用戶嘗試提交時使用Javascript將其值設置為拖放圖像的路徑。
但是,當我嘗試提交時,我收到錯誤:
文件名太長 - 公共/數據/數據:image / jpeg; base64,/ 9j / 4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP / sABFEdWNreQABAAQAAABkAAD / 4QMtaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNj ....
因為HTML5給出的臨時文件存儲名稱太長了,我猜。
我嘗試將字符串連接到前60個字符,然后它給出了錯誤:
沒有這樣的文件或目錄 - 公共/數據/數據:image / jpeg; base64,/ 9j / 4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAA
在任何情況下,該文件都不會添加到public/data
文件夾中。
我的HTML:
<%= form_tag( { :action => 'create' }, :multipart => true ) %>
<div id="dropbox"><span id="droplabel">Drop file here...</span></div>
<img id="preview" alt="[ preview will display here ]" />
<%= hidden_field_tag :uploadfile, :id => "uploadfile", :name => "uploadfile" %>
<br /><br />
<div id="submit">
<%= submit_tag( "Upload file" ) %>
</div>
紅寶石:
def create
name = params[:uploadfile]
directory = "public/data"
path = File.join(directory, name)
File.open(path, "wb") { |f| f.write(params[:uploadfile].read) }
@project = Project.new({:filename => name, :location => path})
respond_to do |format|
if @project.save
format.html { redirect_to @project, notice: 'Project was successfully created.' }
format.json { render json: @project, status: :created, location: @project }
else
format.html { render action: "new" }
format.json { render json: @project.errors, status: :unprocessable_entity }
end
end
end
和JS:
$("#submit input").click(function() {
$("#uploadfile").val($("#preview").attr("src"));
});
問題看起來像是將文件作為Base64編碼的數據URL發送,這很好,但是當您向服務器發送POST時,文件名不會隨之發生。 您可能需要在將文件轉換為數據URL之前提取文件名,以便將其與params中的文件一起發送。 或者,像Madao建議的那樣創建一個新的文件名(UUID)。
這至少應該修復你的文件名問題:
def create
##
file = params[:uploadfile]
name = params[:filename] || SecureRandom.uuid
##
directory = "public/data"
path = File.join(directory, name)
File.open(path, "wb") { |f| f.write(file.read) }
@project = Project.new({:filename => name, :location => path})
respond_to do |format|
if @project.save
format.html { redirect_to @project, notice: 'Project was successfully created.' }
format.json { render json: @project, status: :created, location: @project }
else
format.html { render action: "new" }
format.json { render json: @project.errors, status: :unprocessable_entity }
end
end
end
關鍵是使用params [:uploadfile]作為名稱值是不必要的,如果你想要一個唯一的密鑰,你可以使用SecureRandom.uuid
。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.