ドラッグ&ドロップでファイルとフォルダをアップロードする - Qiita
目標 この記事では指定したフィールド上にファイルやフォルダをドラッグ&ドロップ(以後D&Dと呼びます)するとinputでファイルやフォルダを複数アップロードした時と同じ結果を得られるようにすることを目標とします。 Fileオブジェクト ファイルには5つのプロパティがあります(Deprecatedされたものは除いてます)。 lastModified: ファイルの最終更新時刻 name: ファイルの名前 webkitRelativePath: Fileの相対パス(標準化されてません) size: ファイルのサイズをバイト単位 type: ファイルのMIME タイプ inputの動作確認 お手本とするinputの動作を確認します。ファイルだけを扱う場合とフォルダだけを扱う場合で挙動が異なるので分けて紹介します。 ファイル 複数ファイルをinputする場合は属性にmultipleを与えることででき
WebアプリやCMS等に組み込む為のオープンソースのWYSIWYG HTMLエディター・「miniB HTML editor」 - かちびと.net
miniB HTML editorはWebアプリやCMS等に組み込む為のオープンソースのWYSIWYG HTMLエディターです。Talwind.cssでスタイリング、VanillaなJavaScriptとファイル操作にPHPが用いられています。 よくあるWYSIWYGエディターの機能が一通りそろえられており、undo/redo、各見出し、太文字やイタリック化、リスト、カラー変更、リンク指定、画像アップロード、テーブル挿入、コードブロック挿入などのほか、スニペットの登録、HTMLコードとの切り替え、保存、HTMLのダウンロード、プレビュー、ダークモード、ショートカットなどの機能も備えられています。 UIはシンプルでボタンも見やすいですが、モダンなスタイリングとは言えないものの、Tailwindベースなので使い慣れていれば思い通りにカスタマイズできるのではないかと思います。操作性も軽量で使いや
ファイルを分割してアップロードする(Javascript, PHP) | バシャログ。
どうもfujiharaです。本日はファイルを分割してアップロードする方法をご紹介します 背景 ファイルをアップロードするシステムを作るときに容量の要望にアップロードサイズ、アップロード時間の変更で対応するには 大きすぎるサイズだったので分割してアップロードして、結合するという方法にしました。 ファイル構成 以下のようになります。uploadsはアップロード先になりますので作成しておいて下さい。 ├── js │ └── upload.js ├── index.html ├── upload.php └── uploads HTML まずは簡易HTMLです <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Upload</title> </head> <body> <p>input size <sp
w3c tutorial
Web チュートリアル HTMLチュートリアル HTML HTML5 XHTML CSS CSS3 ブラウザ・スクリプト JavaScript HTML DOM DHTML AJAX jQuery JSON E4X . . サーバ・スクリプト SQL ASP PHP リファレンス HTML4.01 HTML5 JavaScript PHP XSLT XML DOM XPath XSL-FO HTML DOM JQuery Color Picker XMLチュートリアル XML DTD XML DOM XSLT XSL-FO XPath XQuery XLink XPointer Schema XForms SOAP WSDL RDF RSS Web サービス ホーム
window.open で開いた窓に対して Post する | バシャログ。
いやあ、もうすぐスーパーマリオ3Dワールドの発売日だねえ！って言ったら「もうマリオはいいでしょ…」って言われた kimoto です。 なんでだよ！すっげえ面白そうじゃんかよ！よくないよ！ さて、本日はちょっと小ネタで、window.open で開いた窓に対して Post でデータを渡す方法です。 利用場面としては、フォームの確認画面を小窓で開きたい時などですね。 URL にデータを乗っけて Get で開く方法も無くはないですが、データ量に制限もあったりなど、いろいろと問題があります。 ということで、開いた窓に対して Post でデータを投げる方法です。 function open_preview() { window.open("about:blank","preview","width=600,height=450,scrollbars=yes"); document.input_for
スマートフォン・デスクトップそれぞれに最適な画像を表示する -Adaptive Image
画像を自動判定して、スマートフォンやデスクトップなどそれぞれの表示サイズに合わせて、最適なサイズに変更して画像を表示するPHP&JavaScriptを紹介します。 導入も簡単で、5分くらいでできる感じです。 Adaptive Images in HTML [ad#ad-2] Adaptive Imagesのデモ オリジナルの画像はサイズ1900x1069px、容量631Kbで、ブラウザのサイズに合わせて、ファイルサイズを変更して画像を表示します。 ファイルサイズの変更に伴い、サイズ自体も最適化されます。
{{ mustache }}
Logic-less templates. Available in Ruby, JavaScript, Python, Erlang, Elixir, PHP, Perl, Raku, Objective-C, Java, C#/.NET, Android, C++, CFEngine, Go, Lua, ooc, ActionScript, ColdFusion, Scala, Clojure[Script], Clojure, Fantom, CoffeeScript, D, Haskell, XQuery, ASP, Io, Dart, Haxe, Delphi, Racket, Rust, OCaml, Swift, Bash, Julia, R, Crystal, Common Lisp, Nim, Pharo, Tcl, C, ABAP, Elm, Kotlin, SQL,
どこでも活躍できるテンプレートエンジン「Mustache」 - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） 世にテンプレートエンジンは多くあれど、 これ程多くの場所で活躍出来るテンプレートエンジンはなさそうです。 本稿はそんなテンプレートエンジン「Mustache」の試用レビューです。 Mustacheについて {{ mustache }} “Mustache”というのは口ひげを指す言葉で、「ますたっしゅ」とか発音する様です。 テンプレートタグに使用されている「{」が口ひげに似てるので、そこらへんが由来っぽいです。 公式を見れば分かるとおり、Mustacheは1言語にとどまらず、 様々な言葉で開発されているテンプレートエンジンです。 知らない言語も入ってたりしますね…。 Available in Ruby, JavaScript, Python, Erlang, PHP, Perl, Go, Lua, ooc, C++, Action
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Parked Domain name on Hostinger DNS system
Use PHP Functions In JavaScript: PHP.JS