jQuery.ajax()でファイルをアップロードする方法
jQuery.ajax()でファイルをアップロードする方法を紹介します。 １．はじめに jQuery.ajax()で画像ファイルをサーバに送信し、バックエンドのPHPで画像の幅・高さを返却し、それを表示するという簡単なプログラムを組んでみました。 フロントエンド <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script> $(function(){ $('#foo').submit(function(){ $.ajax({ url: "test.php", type: 'POST', data: { 'file': $('#file').val() }, dataType: 'json' }) .done(function( data ) { $('#re
HTML5 の File API でローカルファイルを扱ってみる
HTML5 の File API でローカルファイルを扱ってみる HTML5 の File API を使用することでドラッグ＆ドロップでの複数ファイルの取得や、ローカルファイルのちょっとした加工などができるようになりました。 この記事では、画像とテキストファイルを簡単に表示する方法をご紹介します。 投稿日2012年12月13日 更新日2012年12月13日 html html はファイルをドロップする div と表示する div を用意します。 html <p> ファイルをドロップしてください。</p> <div id="file-input"> <div class="input"></div> <div class="out"></div> </div> cssでドロップするdivを大きくしておくと良い感じだと思います。 css #file-input div.input { padd
jQuery Ajaxでファイルを送りたい！ - かもメモ
input[type="file"]をAjaxで送信したい時 普通にAjaxを使って送ると、ファイルが文字列になってしまい form.submit()した時と違うのでハマったのでメモ。 どうやら FormData を使い Ajaxが自動的に送信データを整形する機能をOFFにすれば form.submit()と同じデータで送れるようです。 ■ フォーム <form id="myForm" name="myForm" method="post" action=""> <input type="file" name="file" id="formFile"/> <input type="text" name="text" id="formText"/> <textarea name="textarea" id="formTextarea"></textarea> <input type="sub
ドラッグ & ドロップでファイルをアップロードする方法 | ScrapEngineer
Ajaxを使用してファイルをドラッグ＆ドロップでサーバにアップロードする方法 ローカルPC上のファイルをドラッグ＆ドロップでサーバに複数ファイルを同時にアップすることが可能になります。 下のgifのようなアップロードが可能になります。 javascriptとHTML側 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ファイルのアップロード</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script> </script> <script type="text/javascript"> $(function () { window.addEventL
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
