Posted at

FORM でファイルをアップロードしようとしているファイルのサイズを javascript で得る

More than 3 years have passed since last update.


概要

FORM タグの input type='file' でファイルをアップロードしようとした際に、その「アップロードされようとしている」ファイルのサイズを取得し、容量チェックなどに役立てたいという事があった。


サンプル

jQuery および coffeescript で記述しています。HTML は haml です。


dashboard.js.coffee

$ ->

$("#some_model_upload_file").change ->
previewFile = $(this).prop('files')[0]
if previewFile
# 取得できるファイルサイズは bytes 単位
previewSize = $(this).prop('files')[0].size
if previewSize > 1024768
alert "アップロードしようとしているファイルのサイズは 1MB よりも大きいです"
else
alert "アップロードしようとしているファイルのサイズは 1MB 以内です"


dashbard.html.haml

  = form_for(@some_model, url: dashboard_submit_path, html: {method: "post"}) do |f|

= f.file_field :upload_file
= f.submit '送信'