■default ---■fontsize --70% --80% --100% --120% --140% --- --■scroll_switch

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

dropzone.jsが使えない




一年前くらいからユーチューブのアップロードも変わりましたが、最近のwebページはドラッグandドロップ(以下.D&D)の操作でファイルのアップロードができるようになっています。
これは超便利です。
便利って言うか、効率いいし、スマートです。
私も使ってみたいと思って、調べてみると「HTML5から対応」とか「Jqueryを使えば簡単」とか出てきます。
意味が分かりません。
簡単そうで全く持って超特A級のハッカーで無ければ使いこなせないやつでした。
そんな中でもこれなら簡単というのが、dropzone.jsでありましょう。
グーグルクロームでしか試していませんが、私でもできました。
webkitエンジンは大丈夫だと思います。

とはいってもですよ。
どこのページに行っても「dropzoneは簡単」「だれでもできる」「これでできなきゃ人間失格」「フラリッシュの基本技」「D&D様のなんだからありがたくやれ」の一点張り。
確かに手順簡単です。

1.dropzone.jsダウンロード +=http://www.dropzonejs.com/
2.HTMLのヘッダにJS追加 < script type="text/javascript" src="js/dropzone.js">< /script>
3.HTMLにフォーム追加 < form action="?" class="dropzone" id="my-awesome-dropzone"> < /form>
4.PHPに保存体制追加 普通に$_FAILSに送られてくるので、そのtempを自分の好きな場所に移動。と一般的なやつ。

この4つだけやればとりあえず動きます。
5.見た目をかえるのに、スタイルシートの空いてる場所に.dropzone{}を書けばある程度はいいと思います。

なのですが、これが何度やっても動きません。
バージョン変えても動きません。
なんかHTMLの表示は「~~KB、OK」とか出るのですがその下にX。
どっちよ。
これで随分と悩みましたが、正解は「これであってました」
ファイルがちゃんとアップロードできてるかどうか print_r($_FAILS);とかで見ていたのですが、これが出ません。
だからずっとアップロードできていないと思いましたら、できていました。
どうも、そのマイクロソフトの技術?XHR?とかいうのを別ページで見えないように作って送っているらしく、
「今いるページからは一歩も動きません」。
だから、 print_r($_FAILS);と書いておいても私の見えないところでは反応していますが、表には出てきません。

ということなので、実験する時は、既存の送信フォームを作ってから、それと全く同じURL(action="?"の部分)に送るようにすると良いと思います。
で、デバック的なページを出せないので、ファイルを直接見ると良いと思います。
ちなみに複数ドラッグもできます。
できますが、1ページずつ送られるようなので、送信フォームのmultiとは違う挙動を起します。
私は「inputタグにFILEのアドレスを一旦入れる」という様な動きかと思いましたが、マウスはなした瞬間に送信されます。


それで、なんとかアップロードはできたのですが、次の問題に当たりました。
もともと、どういうプログラムに使おうとしていたかというと、
画像ファイルを送る->PDFにして返してくれる。
うちの会社のコピー機がおばかさんなので、スキャナーのデフォルトが何故かTIFFなもんで。
マルチページのTIFFを送られて喜ぶ人はいません。
気が付かれない場合もあるしトラブルの元です。PDFなら皆さん見てくれます。
なのでPDFで取りたいのですが、今書いたようにデフォルトがTIFF。
10枚ぐらいスキャンして、ガッテーむ、ということが多々有ります。
中身一緒なのに変換するのに手間取ります。
フリーソフトで簡単に変換するのもあるのでしょうが、半年に一辺しかないテヘペロでソフトの名前なんか覚えているはずも無し。
検索して探す羽目になり、ベクターにたどり着き、「女神を育てろ」みたいなオンラインゲームの宣伝が出て、後ろの席の人に「こいつまたネットサーフィンしてるよ。オーストラリアのサンタかよ」と思われ、結局どれだか分からず3個くらいダウンロードして、「64ビットでは使えません」とか言われ、実働1時間、精神安定まで10時間かかります。
それを解消するために作りました。
これなら5秒で終わります。しかも、PHPなので誰でも使えます。
友達がいないので、誰にも紹介していませんが。

そんな事はどうでもよいのですが、スペック的にinputのFILEのタグのonchangeイベントにサブミットをライトオンしていまして、テイクオフのセンチメンタルジャーニーであります。
簡単に言うとファイル選ぶとすぐダウンロード画面が出てくるようにして有りました。

ところがこのdropzone.jsを使うと、さっきも書いたようにページが動きません。
他のフォームに入力されるわけではないので、途中で送信止めて他のスクリプトを動かすというような事もできません。
HTMLのeventも動かないので( ondragdropも反応無し)dragした時の判別が付きません。
なので、FILEアップロードとダウンロードを別の操作にしないといけません。
素直に簡単になってくれません。
アクションのところに環境変数くっつけてメソッドをgetにしてみたりdropzone.jsの処理が終わりそうな所にページを飛ばす一行を足してみたりいろいろして見ましたが、取り合えずたどり着いた解決策。

■dropzone.jsの512行目くらいのところでページを飛ばす
complete: function(file) {
location.href = "?mode=down_処理";///////////////足した所
if (file._removeLink) {
return file._removeLink.textContent = this.options.dictRemoveFile;
}
},
■ファイルを見失わないようにsessionに仮IDを振っておく。
$_SESSION["仮ID"]

この二つ。
dropzone.jsは一応イベントが設定してあって、そこに差し込めばいいのですが、どれがどれだかよく分からないので
(元のプログラムは優れていますが私が優れていないので)いろいろ試しましたが、コンプリートのところで飛ばせばとりあえずアップロード処理は終わっているようです。D&Dしてコンプリートまで待つ。
うまい事もとのスクリプトに書き加えないでオーバーライト的な事もできるのでしょうが、私には分かりません。

もう一つ問題はアップロードとダウンロードが二手に分かれる所。
アップロードからPDFを作るまでは一気にやってしまえばいいですが、PDFができてからダウンロードするまでに空白の時間が有ります。限られたネットワークではレアケースですが、同時に複数の人が同じファイルを含むPDFを作ろうとするとバグってしまいます。
どうやら秘密裏に動いているアップロードの方も一応自分が動かしている事になっているようで、セッションが生きています。
なので、適当なID、sessionIDとか日付とか適当なのを決めて、
ページを読み込んだ時に$_SESSION["仮ID"]に入れる。
アップロードと処理が終わったらファイル名を$_SESSION["仮ID"]にする。
別ルートできたダウンロードは$_SESSION["仮ID"]ができるまで待つ。
ダウンロードするときのファイル名とか、ファイルができたかどうかのフラグとかもセッションにいれればOKのようです。

常識かもしれませんが、忘れないようにめもっておきます。
スポンサーサイト
ブログ内検索ワード
マジック / フラリッシュ / デザイン / ~のコツ / プログラム関連 /
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。