大きな画像をJavaScriptでリサイズしてからAjax送信する方法
さてさて、この間 wordpressみたいなドラッグ・アンド・ドロップをVueで実装という記事を公開しました。この記事の目的はユーザビリティだったのですが、ドラッグ＆ドロップ機能の先では画像のアップロードを想定していました。 最近のウェブサイトでは画像をサーバーへ保存するというのは珍しいことではないでしょうが、実はアップロードする側の状況が変化してきたことである問題が発生するようになってきました。 それが・・・ スマホ・カメラの高解像度化のせいで画像アップロードに時間がかかってしまう というものです。 つまり、サイズが大きなファイルをアップロードするのに時間がかかってしまうということですね。 特にまだ日本のウェブサイトは、以下のように確認ページを挟む場合も多く存在していますので、その場合（バリデーションを厳密にするなら）画像サイズが大きい場合は１番と２番で画像をアップロードする必要がでてき
vuejs でFormData つかってファイルアップロード - 図書館合金 Part 2
ついでなので、ファイルをpostするところまで追加してみる。 <div id="app"> <div> <h2>Select an image</h2> <input type="file" @change="onFileChange"> </div> <div v-if="image"> <h2>{{imgName}}</h2> <img :src="image" /> <button @click="removeImage">Remove image</button> <button @click="submitImage">Submit image</button> </div> </div> var app = new Vue({ el: '#app', data: { image: '', imgName: '', uploadFile: '' }, methods: { onF
Drag and Drop Multiple File Upload UI [Vue.js]
Vue.jsでDrag and DropでMultipleなFileUploadモジュールを作りました。 gifのような動作でファイルのアップロードができるUIです。 上記のイメージのように、このFileUploadUIでは下記の機能をサポートしました。 ☑️ファイル選択(複数) ☑️Drag and Drop(複数) ☑️ファイル追加 ☑️ファイル削除 このサンプルでは送信ボタンを押下したときにファイルのサーバへのアップロードが開始されます。 今後Drag and Drop時にサーバーへアップロードする機能を追加する予定です。 デモ <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awes
![Drag and Drop Multiple File Upload UI [Vue.js]](https://cdn-ak-scissors.b.st-hatena.com/image/square/5dd7eccddf787cd4b483eefdbe1bad840bb6839c/height=288;version=1;width=512/https%3A%2F%2Fmio.yokohama%2Fwp-content%2Fuploads%2F2020%2F05%2Ffie_upload.gif)
【Vue.js】ファイルアップロード（複数ファイル）の渡し方（axios） – カツオ ＠FirebaseとVue.jsとNode.jsでWebサービス開発中
Vue.jsをつかって開発をやっています。画像アップロードを作りたくて、この2日くらい色々調べながら実装をしていました。ようやくそれなりに動くものができましたので、せっかっくなのでブログにも記載させていただきます。 Vue.jsで作りたい画面仕様 フロントはVue.js、axiosを使用 フロントで複数画像をアップロードし、サーバーにpostする処理とする。 画像だけでなくて、テキスト情報も一緒に渡す アップロードした画像はフロントにて表示され確認可能。 画面イメージ ソースコード テンプレート <template> <div> ～～省略～～ </v-card-text> <v-card-actions> <v-btn flat icon @click="pickImage"><v-icon class="primary--text">add_a_photo</v-icon></v-btn
「vue-upload-component」を使ってアップロードコンポーネントを実装する
vue-upload-componentとは 「vue-upload-component」は、ファイルアップロードコンポーネントです。 以下の機能を実装できます。 ファイルアップロードコンポーネント マルチファイルアップロード ディレクトリのアップロード ドラッグアップロード ディレクトリのドラッグ 同時に複数のファイルのアップロード インストール 以下のnpm、CDNを使ってインストールします。 npm npm install vue-upload-component --save CDN <script src="https://cdn.jsdelivr.net/npm/vue-upload-component"></script> gitリポジトリは以下から取得できます。 https://github.com/lian-yue/vue-upload-component 導入手順 si
アップロードするファイルの名前、サイズ、コンテンツタイプを取得する
Result 選択したファイルの名前、サイズ、コンテンツタイプをリストにしてアップロード前に表示します。inputにmultiple入れてますので複数選択も可能です。 jQuery$("#foo").on('click', function () { $("#bar").empty(); var fp = $("#hoge"); var lg = fp[0] .files.length; var items = fp[0].files; var fragment = ""; if (lg > 0) { for (var i = 0; i < lg; i++) { var fileName = items[i].name; // ファイル名を取得 var fileSize = items[i].size; // ファイルサイズを取得 var fileType = items[i].type;
ファイルアップロード機能で学ぶVue.js(1) - 豆腐とコンソメ
日記 会社で有料セミナーにいってもいいと言われると、お高い普段なかなかいけないような勉強会を探したりしています。 これいいな！と思ったらちょっと高かったりして敬遠したことが何度かあったのに、いざ探すとなるとなかなか見つからないものですね。 本題 Vue.jsでファイルアップロード処理をつくった際にいろいろと勉強になったので、作成の過程を残しておくよ！ 正直なところ、バッドプラクティスみたいなものもいっぱいあるかもしれないし、未だにいろいろ悩んでるんだ。 なので指摘をいだけるととすごくうれしいです！ 今回つくりたいもの ファイルとテキスト項目をボタンを押下することで、サーバに送る処理をVueコンポーネントを使ってつくるよ！ 環境 Vue.jsはwebpack(laravel-mix)を使ってコンパイルしているよ！ 日記 本題 今回つくりたいもの 環境 まずはHTML 最初のmain.js サ
スマホ用のクールなアップローダーを作る - Qiita
コンセプトは６つ ・簡単にアップロードできる ・クライアントサイドで画像のサムネイルを作る ・複数のファイルをアップロードできる ・画像をソートしてアップロードできる ・スマホの写真が時々回転してしまうので対策しよう ・そのままスマホの写真を複数アップロードできるようにすると ファイルサイズがえらいこと（１枚４Ｍ！）になったので クライアント側で画像を縮小 ・もちろんAjaxでアップロードだ！ こんなアップローダーを作りたいの。でも、きっと夢ね…。 偉大なるプログラマーに敬意を！ このアップローダーを作るにあたり以下のプログラムを使わせてもらった。 @stomita megapix-image.js https://github.com/stomita/ios-imagefile-megapixel @jseidelin exif-js https://github.com/jseidel
JavaScriptでローカルファイルを自在に操る - File API
※ただし、SafariではFileReaderオブジェクトを、Internet Explorer 10ではreadAsBinaryStringメソッドをサポートしていません。 TIPS 053：ファイルの名前／種類／サイズを取得する Fileオブジェクトを利用することで、ローカルファイルの情報にアクセスできます。 例えば以下は、<input type="file">要素で指定されたファイルの名前やサイズなどを表示するサンプルです。 ［リスト01］ファイルの情報を取得するコード（fileinfo.html） <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>HTML5 TIPS</title> <script> <!DOCTYPE html> <html> <head> <meta charset="UTF-8" />
jQueryでINPUT[type=file]で画像ファイルのプレビューを表示させる実験｜BLACKFLAG
会員制Webサイトやストレージサービスなどで input入力フォームでファイルをアップロードさせる[type=file]を使用する際、 選択されたファイルが画像だった場合にプレビューを表示させる機会が何度かあったので File APIとjQueryを使って試しに作ってみたサンプルを紹介してみます。 まずは動作サンプルから。 「jQueryでINPUT[type=file]で画像ファイルのプレビューを表示させる方法」サンプルを別枠で表示 サンプル画面上にある入力フィールドinputにて画像を選択させた場合、 入力フィールド下に選択した画像が表示されます。 全体構成についてまずはHTMLから。 ◆HTML <div class="imgInput"> <input type="file" name="file1"> </div><!--/.imgInput--> <div class="img
![jQueryでINPUT[type=file]で画像ファイルのプレビューを表示させる実験｜BLACKFLAG](https://cdn-ak-scissors.b.st-hatena.com/image/square/c662e9771e0c7ac0df846a4838fb1480f378049f/height=288;version=1;width=512/https%3A%2F%2Fblack-flag.net%2Fcommon%2Fimg%2Fogp_jquery.png%3F20231001)
File API入門 | 前編 File APIとFileReader APIの利用
読み込み完了時にデータを表示する とても簡単に書けます。HTMLは最初のものと同じです。 var inputFile = document.getElementById('file'); var reader = new FileReader(); function fileChange(ev) { var target = ev.target; var file = target.files[0]; var type = file.type; var size = file.size; if ( type !== 'image/jpeg' ) { alert('選択できるファイルはJPEG画像だけです。'); inputFile.value = ''; return; } reader.readAsDataURL(file); } function fileLoad() { consol
AjaxでFormDataを使ってファイルアップロードする
Ajaxを利用してファイルアップロードする。 今回はFormDataを利用してファイルをアップロードする。 FormData は XMLHttpRequest Level 2 でサポートされたもので、Ajaxでの値の送信をより簡単な物にしてくれる。 FormDataの使い方 FormDataの使い方は簡単で、new して append するだけ。 値をappendした FormData オブジェクトは、ajaxのdataにセットするだけ。 FormDataについては以下を参照 FormData – Web API リファレンス | MDN FormData オブジェクトの利用 – Web developer guide | MDN FormData でファイルの送信をする FormData は、Ajaxを使ったファイルアップロードも簡単に書ける。 こんな感じの簡単なformを作る。 jsは
jQuery Upload Thumbs - 画像アップロード前にプレビューを表示させる jQueryプラグイン - Dekasu.net
Webページから <input type="file"> を使って画像を選択したときに、その画像のプレビューをその場に表示させて画像の確認ができる jQueryプラグイン です。 CSS で画像の大きさを制限すれば、サムネイル表示になります。 アップロードされた画像の差し替え、画像のファイル選択ボタンにも対応しています。 HTML5 の File API という機能で表示させます。（近年のブラウザで対応） HTMLページが HTML5 形式でなくても（例えば XHTML 1.0 でも）、ブラウザが HTML5 に対応していれば使えると思います。 まずは下記サンプルをご覧ください。 Download: スクリプトのダウンロード jquery.uploadThumbs.js (6kb) .. 「対象をファイルに保存」で保存してください。 ※呼び出す HTML と JavaScript のソース
備忘録 File APIを利用してファイルアップロード
「5000枚の写真をアップロードできるWebアプリがほしい」と無茶な依頼があったので、HTML5のFile APIを使ってサンプルを作ってみました。 サンプル） http://5463440d.dotcloud.com/ ソースコード） https://github.com/jou4/multi_fileupload ※上のサンプルは、サーバーが受け取ったファイルを保存しないのでアップするだけのものです。 ※またリクエストのサイズも制限されているので、大きなファイルはアップできません。 ドラッグ＆ドロップは、ondragover, ondragend, ondropといったイベントで制御します。 jQueryを使うのであれば、bindメソッドを利用してこんな感じでしょうか。 $("#holder") .bind("dragover", function(){ this.className
jQuery plugin for FileAPI
Добавить файлы в очередь загрузки, например изображения ;]
jQuery.upload | jQuery Plugin Registry
Learning Center Forum Twitter IRC GitHub Copyright 2024 OpenJS Foundation and jQuery contributors. All rights reserved. See jQuery License for more information. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - weixiyen/jquery-filedrop: jQuery plugin - drag and drop desktop files and POST to a URL to handle files.
Upload
Blog - Diamond Casino Online
Designscrazed.org Is For Sale
