jqueryでファイルアップロードにオススメなプラグイン「jQuery-File-Upload」 | ホームページ作成、システム設計 glic株式会社
こんにちわ。 プログラマの湊です。 今回は、jqueryでファイルアップロードにオススメなプラグイン「jQuery-File-Upload」をご紹介いたします。 今まで使用した中でも、抜群のカスタマイズ性があるのでオススメですよ☆ ダウンロード ソースコードはGithubに上がっております。 https://github.com/blueimp/jQuery-File-Upload デモページはこちらから 使い方 指定のJS,CSSファイルを下記のように読み込み、呼び出してあげるだけでOK。 僕の場合は、composerを利用し、アップデートを楽にしております。（composerについてはまた別の機会に） bootstrapにも対応しておりますので、簡単にスタイル設定されます。 jqueryベースですので、jqueryは読み込んであげて下さい。(コードはサンプルのものを抜粋しております。)
[JavaScript] Ajaxでファイルをアップロード【jQuery使用】 - Qiita
<form id="my_form"> <input type="file" name="file_1"> <button type="button" onclick="file_upload()">アップロード</button> </form> 【注意点】 ボタンに type="button" が無い場合は submit と見なされ、ボタン押下時にブラウザーが勝手にアップロードしてしまいます(現画面を再更新)。そのため、下記 JavaScript によるアップロード処理中には意図しない status が返ってくるため、成功したり失敗したり、不可解な動きとなります。 function file_upload() { // フォームデータを取得 var formdata = new FormData($('#my_form').get(0)); // POSTでアップロード $.ajax({
![[JavaScript] Ajaxでファイルをアップロード【jQuery使用】 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/6f7580cb2aa91402287c6c00933e589f24e2c7fd/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCUyMEFqYXglRTMlODElQTclRTMlODMlOTUlRTMlODIlQTElRTMlODIlQTQlRTMlODMlQUIlRTMlODIlOTIlRTMlODIlQTIlRTMlODMlODMlRTMlODMlOTclRTMlODMlQUQlRTMlODMlQkMlRTMlODMlODklRTMlODAlOTBqUXVlcnklRTQlQkQlQkYlRTclOTQlQTglRTMlODAlOTEmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTY0ODdiYjNmM2JhZjA3OGM2M2VjNGM4NDNmMzI5MDQ4%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQweWFzdW1vZGV2JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1hZGVmYjFjYWYyMmRmM2Q0ZTE2MDg4NGE0ZTg3MjExNg%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Dd4874a06e75ab172c161d55785d87480)
ajax(jQuery)でファイルをアップロードする - Qiita
<form> <input type="file" name="upfile"> <button id="upButton" type="button">送信</button> </form> let $upfile = $('input[name="upfile"]'); let fd = new FormData(); fd.append("upfile", $upfile.prop('files')[0]); $('#upButton').on('click', function () { $.ajax({ url:'index.php', type:'post', data: fd, processData: false, contentType: false, cache: false, }).done(function (data) { // 成功時の処理 }).fail(fu
機能全部入りアップローダー実装jQueryプラグイン「Fine Uploader」:phpspot開発日誌
Fine Uploader a.k.a valums file-uploader 機能全部入りアップローダー実装jQueryプラグイン「Fine Uploader」。 プログレスバー付きでアップロード後の即時サムネイル表示、ドラッグ＆ドロップアップロード、複数ファイルアップロード対応など全部入り。 BootStrapのテーマにあわせることもできます。IE7移行も対応しています。 モダンなアップローダーを作るなら１つの選択肢になりそうです 関連エントリ 画像選択時にサムネイルが出て分かりやすい進捗付きjQueryファイルアップローダー「jQuery File Upload Demo」 HTML5を使ったファイルアップロード用プログラム集
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://www.dropzonejs.com/
画面遷移なしのAjaxでファイルアップロードするjQueryプラグイン10:phpspot開発日誌
