無料ES5 / ES6 JavaScriptファイルアップロードプラグイン - アッピー

設計するのが最も難しいフォーム入力の1つは ファイルアップロード. デフォルトのHTMLスタイルですが、世界で最も美しいものではありません。.

不気味 ファイルのアップロードをまったく新しいレベルに引き上げます。 カスタムインターフェース そして 動的なAjaxスタイルの読み込みプロセス.

それ ES5 / ES6コードで動作, そのため、最新のJavaScript標準を使ってWebアプリケーションを構築できます。そして、それも クラウドストレージサイトからのファイルアップロードをサポート DropboxやGoogle Driveなどです。 多面的なファイルアップロードスクリプト ウェブ用.

不幸です 完全無料でオープンソース, GitHubのレポを使って。ただし、このプラグインをインストールする最も簡単な方法は、npmまたはYarnを使用することです。 実際のパッケージのように実行する.

あなたのファイルがあなたのウェブサイトに追加されたら、あなたは Uppy.jsファイルとCSSコードを含める. それから、あなたはあなたが望むどんな入力フィールドでもターゲットにし、そしてUppyは残りの面倒を見る.

それはユニークなインターフェースを持っています 1つの大きな正方形の配置のように見えます ファイルをドラッグ＆ドロップする。あなたもすることができます ハードドライブからアイテムを選択する あるいは 外部URLからリモートでファイルをアップロードする. かなりクレイジー!

あなたはドキュメンテーションページでセットアッププロセス全体を見つけることができます、しかしそれはそれです ECMAScript 6について少なくともある程度の理解が必要ですか。. このライブラリはスクリプトの将来を見据えており、純粋な単純なJavaScriptを使用するのが最も簡単なものではありません。.

しかし、Web開発を真剣に考えているなら、とにかくES6を学ぶ価値があります。発見できる オンラインのリソースのトン 自習のために、あなたもあなたの最初としてUppyを使用することができます “リアル” 飛び込み、学び始めるプロジェクト.

ダッシュボードの例をチェックしてください。 Uppyの動作を見る. このページの アップロードはトリガーボタンの後ろに隠れています, ボタンをクリックしてモーダルアップロードフィールドを表示する場所.

そこから、写真をアップロードするかどうかを選択できます コンピュータから、Webから、あるいはWebカメラから!

Examplesページには、次のような内容が垣間見られます。 ドラッグ＆ドロップの例, と一緒に 国際化デモページ.

しかし、これがどのように機能するのかを実際に学ぶには、ドキュメントを読み飛ばしてメインのGitHubリポジトリを閲覧することをお勧めします。 Twitterの@transloaditであなたの考えをクリエイターと共有することもできます。.