PHPで画像アップロード時のプレビュー
CMSでは画像をアップロードする場面が少なくないと思いますが、通常のフォームでは投稿した後にならないと実際のアップロード後のイメージを見ることができません。 そこで、今回要望があって作ることになったんですがファイルを選択した時点で画像のプレビューを表示し、気に入ったものが選択できた時点で他のテキストなどのテータと共に投稿するというインターフェイスを作ってみました。 実際の作り方は以下のとおり。 プレビューの仕組み まず、この仕組みがどうなっているのかを説明しますと、ファイルを選択したイベントでいったんアップロードを行ってしまい画像ファイルを作業ディレクトリに保存します。 そして、その後でJavaScriptでプレビュー領域にimgタグを出力して表示を行います。 ポイントは、アップロードの際に隠しiframeをtargetに指定してすぐにその値を元に戻すという部分の処理です。 それには、以下
gmailで添付ファイルが自動でアップロードされるしくみ - bits and bytes
gmailでメールを書くとき、添付するファイルを選んでからしばらくすると、いつの間にか添付ファイルがアップロードされています。 添付するファイルを選ぶと、はじめファイル名が表示されていたのが 自動的にアップロードされて、名前とファイルサイズが表示されています！ 実は、あまり名前も聞かなくなった Google Page Creator がリリースされたときにいちばんびっくりしたのはページの右下にこのgmailの自動アップロードとよく似たしくみがあったことでした。で、さっそく解析してマネしてみたことがあります。今回はgmailでその仕組みを見てみます。 ちなみにその Google Page Creator には、ログインすると右下にこんな ファイルをアップロードするのに使う部分があります。 gmailの場合、メールが自動保存されるタイミングでアップロードされているかんじでしたが、こっちのはBr
IFRAMEを使って非同期にファイルをアップロードするサンプル - PHPプロ！ニュース
平素より「PHPプロ！」をご愛顧いただき、誠にありがとうございます。 2006年より運営してまいりました「PHPプロ！」ですが、サービスの利用状況を鑑みまして、2018年9月25日（火曜日）をもちましてサービスを終了させていただくことになりました。 サービス終了に伴いまして、2018年8月28日（火曜日）を持ちまして、新規会員登録ならびにQ&A掲示板への新たな質問、回答の投稿を停止させていただきます。 なお、ご登録いただいた皆様の個人情報につきましては、サービス終了後、弊社が責任をもって消去いたします。 これまで多くの皆様にご利用をいただきまして、誠にありがとうございました。 サービス終了に伴い、皆様にはご不便をおかけいたしますこと、心よりお詫び申し上げます。 本件に関するお問い合わせはこちらよりお願いいたします。
2006-09-03
input type="file"のonchangeでファイルを勝手にアップロードしてプレビューをひっぱってくる仕掛けを作ろうとしてたんだが・・・ <form action="登録するとこ"> <input type="file" name="hoge" id="hoge"> </form> ... <form action="あっぷろーだ"> <input type="file" name="piyo" id="piyo"> </form> ... <script じゃばすくりぷと> Event.observe('hoge','change',function( evt ){ $('piyo').value=$('hoge').value; }); </script>というJavascriptコードを書くとFirefoxでセキュリティエラーで蹴られる。 すなわちtype=fileの要素に
非同期ファイルアップロード(not ajax)の検討 - はまろぐ
先の件をとりあえず解決法。 input type="file"がコピーできねぇならフォームのターゲットとアクションを差し替えちゃえ！ 終わったら元のactionに戻す(イベントドリブンだから2つ走ったらぐちゃぐちゃになる気はする) name="hoge"を本当のPOST先につっこみたい。これすなわちアップロードが終わってるファイルのファイルパス prototype.js前提(適当にjs書き換えれば無しでもいけると思うが) バリデータとかは適当に <form action="本番POST" id="hoge_form" method="post" enctype="multipart/form-data" > <iframe "target_iframe"></iframe> <input type="file" name="dummy" id="dummy_input" /> <input
非同期アップロード - はまろぐ
結局iframeとjavascriptで解決。Ajax使う必要は無かった。 iframe内にフォームとinput type=fileのセットを置く input type=fileのonchangeが走ったらsubmitしちゃう アップロードされたファイルのmime-type調べてテンポラリから公開できる場所に移動 そのURLをjavascriptで親のフレームにあるimgタグに突っ込む。 プレビュー表示完了(・∀・)！ ただし、File読み込みのフォームが多いとhttpリクエストが増えまくりなのが問題だ・・・
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
