HatenaRailsでプログラミングを始めた私ですが、今回の記事はRailsじゃなくて別にhtmlやjavascriptの話だなと思い、まとめました。事の発端はユーザープロフィール画像のアップロード機能を作っていたところです。以下のような問題が起こったので自作のファイル選択アップロードボタンを作ることになりました。・SIMフリースマホで見ると英語表示になる・ファイル選択後にファイル名が出ない・ファイル名にfakepathと出てしまうちなみにブラウザによってファイル選択アップロードボタンは表示が変わる事が多く、このように自作する人が殆どなんだそうです。ほうぼうの参考サイトや海外サイトを見ても、一部のみ書いてあったりして全容を記述してる記事が無くてここに全体を書きます。type=”file”でC:\fakepath\が入る問題の解決策もカバーしています。type=”file”ファイル選択アップロードボタンの実装全容html部分とcss部分とjavascript部分は以下のようになります。type=”file”ファイル選択アップロードボタンの説明ここでやっているのは、もともとあるファイルアップロードボタンをCSSで見えなくして、自作のファイルアップロードボタンを作り、これをクリックしたら、もともとあるファイルアップロードボタンがクリックされた事にしてファイル選択ダイアログを出す..ということをやります。/>以下のようにcssで見えなくします。none;}それからボタンのところから説明します。id="select_file_button">選択</button>ボタンにはid=”select_file_button”を指定しまして、javascriptでこれがクリックされたらどう動く、という記述をしています。})select_file_buttonがクリックされたら、file_buttonをクリックする挙動です。type=”file”のボタンが押されたことになり、ファイル選択ダイアログが出現します。>このテキストボックスを配置し、初期値valueは空で、readonly(ユーザー編集不可)にします。2つ目のjavascriptです。})</script>#file_buttonが変更されたら、#filenameの値を表示せよ、とします。これによって選択したファイル名がテキストボックス内に表示されます。replaceのところは何をしてるかというと、chromeブラウザだと「fakepath」などというファイルパスが出てしまうので、それを消す事をやっています。丸の中に右向きの矢印があるボタンというかアイコンというか。...【CSS】初心者のためのココだけは押さえておきたい基本の使い方ここではCSS初心者のために基本的な使い方、書き方をお伝えしています。作成中のサイトで縦横比の異なる画像4枚を横にいい感じで並べたいと思いました。Village」でインタビューさせていただきました!新着記事ネットワークエンジニアは「楽」と「きつい」が同居する仕事ネットワークエンジニアの方にヒアリングしたことがあります。...SESの闇はヤバいのか?やめとけと言われる理由とホントのところ今日はSESを中心に受託開発や自社開発の話をしたいと思います。ここにこのブログに寄せられるよくある質問を書いていきます。TOPグループサイト|Happiant。