Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
こんにちはpo3rinです。Vue.js Advent Calender 2018 9日目の記事です。 8日目の記事は vue.js(nuxt.js) の plugin はとても便利 でした。 11月にフリーの案件で Vue.js + Go言語で画像アップロード機能のあるCMSを作りました。Vue.jsでの実装の際には npmモジュールである vue2-dropzone を使うと、Vue.js にとって便利な機能が提供されており、すぐにアップロード機能が作れました。なので今回は Vue.js + Go言語 で画像アップロードを行う機能の実装をハンズオン形式で紹介していきます。 今回は Vue.js のアドベントカレンダーとしての投稿なので、Go言語の実装を飛ばしたい方向けに、Go言語のインストールが不要になるように、すでにDocker環境を用意してあります。せっかくなので今回は Docke
この記事はなに? ベーシック Advent Calendar 2016 20日目です。 機会があって100万枚近い画像を3時間弱でアップロードできるアップローダを作成しました。今回はアップローダを作成する際の手法をご紹介したいと思います! そもそも何故やることになったのか 僕の携わっているサービスが全面リニューアルをおこなっているのですが、要件の中に、MongoDBからMySQLに乗り換えるというものがありました。その際に大量にある画像を下記理由から再アップロードする必要が出てきました。 MongoDBからMySQLへの変更に伴い、データの持ち方が大きく変わったので、画像パスを再登録する必要があった。 画像を保存しているディレクトリ構造がいけてなく、S3上での検索が困難だったので整えたかった。 また、画像のアップロード作業をする際は、サービスを一時停止、また万が一の為にやり直しをするバッフ
前置き スマートフォンブラウザで画像アップロードしたいという要件があったので、あんまり無理しないで実装できるとこまでやったら、どうなるのかやってみた。 やりたいことは、アップロードに加えて、画像データにリサイズ処理を適用すること。さすがに3G回線で2MB近い画像データを、input[type="file"]でそのまま送りつけるのは無理がある。 某所で書いたブツの要約版なので、某所のほうを見た諸氏はアレでソレして解釈してください : ) サンプルコード 基本方針としては、以下のようなコードで処理することになる。 var elFileInput = document.getElementById('js-select-photo'), elPreview = document.getElementById('js-preview-photo'), createObjectURL = windo
a-blog cmsの開発中、Ajax的にファイルをアップロードする必要があったので、その際の調べ物についてかきます。普通にpostしようにも、JavaScriptでローカルのファイルは扱えないよ、って話で、先輩から「iframeがヒントだ!」的なざっくりとしたアドバイスを頂いたので、それを頼りに調べる。 画面遷移なしでファイルアップロードする方法 - 30からのBlog おお、なるほどなるほど。以下、HTML, JavaScript, PHPのサンプルをメモ。 こんなHTMLをJavaScriptで操作すればいい JavaScript自身が要素の生成を作成してもよいですが、最終的にはこういうHTMLが作成されることになります。 <a href="#" id="uploadTrigger">アップロードするぜー</a> <form id="uploadForm" action="画像POS
Multiple file upload: Allows to select multiple files at once and upload them simultaneously. Drag & Drop support: Allows to upload files by dragging them from your desktop or file manager and dropping them on your browser window. Upload progress bar: Shows a progress bar indicating the upload progress for individual files and for all uploads combined. Cancelable uploads: Individual file uploads c
結構前にGoogle Play Developer APIが公開され、それなりに便利そうな割にはあんまり使ってる人を見かけないので、何が便利でどういう問題があるのか、実際に触れ合ってみました。 最初に書いときますが、APIだけでは個人的に必要な要望を満たせませんでした。 Google Playの機能拡張待ちです。 Google Play Developer APIとは Google Playのコンソール画面(アプリを公開したりする画面)の操作を行えるAPI 2015.4月現在はv2が提供されている 各種言語から扱えるライブラリやサンプルコードが配布されている JavaだとMaven Centralとかで配布 API自体は非常にカンタンに覚えられる Gradleからアップロードしたい Gradleからアップロードできれば、Jenkinsやら流行りのTravisやらCircleやらのCIでアッ
Fine UploaderはJavaScript製、GPL v3のオープンソース・ソフトウェアです。 HTML5になってファイルのアップロード処理は大幅に改善されました。特にドラッグ&ドロップによるファイルアップロードは便利です。そんな機能をさらに便利にしてくれるライブラリがFine Uploaderです。 デモです。ファイルの選択またはドラッグ&ドロップでリストに追加できます。追加後、即アップデートが開始されます。 デザインの拡張性は高いです。 エラーのキャッチもできます。 拡張子によるテストにも対応しています。 画像のサムネイルビューもあります。 アップロード上限の制限に対応しています。 Fine Uploaderを使えばファイルアップロードにおける大抵のニーズには対応できるのではないでしょうか。JavaScriptで細かくカスタマイズしたり、コールバックを使って独自の仕組みを組み込む
In this tutorial we are going to create an AJAX file upload form, that will let visitors upload files from their browsers with drag/drop or by selecting them individually. For the purpose, we will combine the powerful jQuery File Upload plugin with the neat jQuery Knob to present a slick CSS3/JS driven interface. The HTML As usual, we will start off with a basic HTML5 document: <!DOCTYPE html> <ht
Merasakan Manfaat Membaca Artikel Judi BandarQQ Online BiangQQ – Sudah tidak bisa dipungkiri lagi, perkembang judi online sejenis BandarQQ online sangat berkembang pesat di negeri terkasih Indonesia ini. Tidak hanya kalangan muda yang memainkan permainan ini, akan tetapi juga disemua umur kalangan sudah merambat untuk bermain taruhan yang sangat menantang ini. Mereka semua bermain pastinya mempuny
こんにちは。 eclipseからsshを使ってファイルをアップロードして、さらにコマンドを実行するなんてことをやってみたいと思います。今回はAWSのEC2を使ってやってみました。 実行環境 今回使用する環境は以下になります。 Amazon Linux JAVA7 Pleiades All in One 3.7.2 PuTTYgen JARの設定 今回、実行するファイルのアップロードなどはAntを使って実行します。Antって色々なことができますね。 デフォルトの状態ではsshを使えないので必要なjarファイルを設定します。 メニューからWindwo>設定>Antを選択します。 次にAntメニューを開き、ランタイムを選択します。「クラスパス」タブが開かれていますので、「Antホーム項目を」選択し「外部JARの追加」をクリックします。 使用しているpleiades配下のeclipse/plugi
速度制限が毎日続くTakuyaです。こんにちは!。 データセンターにmpeg動画を送信して、サーバー側でffmpeg 掛けてました。節電の為に自宅鯖を停止し、Linuxボックスだけ起動してました。重い処理はサーバーにやらせてました。ファイル送信が3TB超えてついに速度制限を喰らいました。怖いですね。11/01に無事解除されましたが。。。 <input type=file /> の通信状況を見たい。 UP速度制限が100kbpsでした、ブラウザのファイルアップロードに不自由を感じました。iphone4の写真UPに1枚あたり30秒位かかってました。さくらVPSのWEBアプリに写真をアップするだけでも大変でした。ファイル送信状況が見えないと不安しかたありません。< input type=file/> でアップしたファイルの送信状況を見れるようにフォームを改造しました。 $.ajax でHTMLフ
こんにちは、keiです。 今回は、ブラウザからのファイルアップロードを実装する際に、お勧めなJavaScriptライブラリを4つご紹介致します。 ランサーズ上で、大容量ファイルのアップロード機能を実装することになった際に、以下の軸で調査した結果となります。 手軽に実装できる 見た目が今風 (大容量なので)アップロード中にプログレスバーが表示される Uploadify http://www.uploadify.com/ 複数ファイルアップロードが可能なjQueryプラグイン。 HTML5バージョンとFlashバージョンがあります。 長所 豊富なドキュメントとデモ 高いカスタマイズ性 短所 HTML5はライセンスが必要 Plupload http://www.plupload.com/ HTML5、Flash、Silverlightに加え、GearsとBrowserPlusにも対応し
Preface Features: No JS dependencies, Flash or Java applets900 lines of code, 1300 lines of comments18 KiB minified, 6 KiB gzippedHTML5, drag & drop for modern browsersIFrame fallback for legacy agents (IE 6+)Flexible event system with over 15 callbacksMultiple independent FileDrops on one pageReady for jQuery, PHP, ASP.net and others600+ lines of unit tests (tests.html) Internet Explorer only sup
Captcha security check wokay.com is for sale Please prove you're not a robot View Price Processing
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く