QA@IT

javascriptのドラッグアンドドロップでのローカルファイル作成について

4236 PV

ドラッグアンドドロップされたローカルファイルを
別のローカルフォルダにコピーするような処理を考えています。

対応ブラウザはIE11のみとします。

ドラッグアンドドロップで取得したfileオブジェクトを元に
別のローカルフォルダにコピーすることは可能なのでしょうか?

<input type="file">

での取得であれば、パスが取得できるので実装は容易ですが、
現在パスの取得方法がわからず、困っています。
パスを使用しなくとも、何かしらの方法でファイルを目的の階層にコピー又は作成できれば問題ありません。
使用言語はPHP,javascriptになります。PHPを利用した方法でも構いません。

最終的には、バイナリデータを加工して、画像を全てjpg形式に変えれるような処理も行えたらとは
考えていますが、こちらの問題は重視していないため解決できなくても構いません。

申し訳ありませんが、どうかお願いします。

<div id="drag_zone"></div>
<script type="text/javascript">
    $(document).on('dragover', '#drag_zone', function(evt){
        evt.stopPropagation();
        evt.preventDefault();
        evt.originalEvent.dataTransfer.dropEffect = 'copy';
    });
    $(document).on('drop', '#drag_zone', function(evt){
        // 移動先ファイルパス宣言
        var path = 'C://hoge/';
        // fileオブジェクト読込
        var files = evt.target.files;
        for(var i = 0; i < files.lenght;i++){
            // ここでパスを取得してファイルをコピーするか、
            // バイナリデータか何かしらを使用してフォルダに新しいファイルを
            // 新規作成したい。
        }
    });
</script>

回答

状況、理解しました。それを制約条件として、私がパッと思い浮かぶ実装案を挙げてみます。とりあえずNASは置いておいて、単体での実装を実現すべきです。

  1. 「クライアント側のPCの専用のPC」にWebサーバを導入します。世にはXAMPPという便利なものがあるので、ZIP圧縮版のそれを使うことにします。
  2. XAMPPで「http://localhost/uploader.php」に、クライアント側からサーバ側の「C:\data\」へアップロードするPHPのファイルアップローダを実装します。もちろんXAMPPはクライアントPCで稼働していますから、サーバPC=クライアントPCです。つまり、クライアント側から別のクライアント側ローカルフォルダへのコピーを実現したことになります。
  3. PHPで「バイナリデータを加工して、画像を全てjpg形式に変えれるような処理」を追加します。
  4. XAMPPをフォルダごとZIP圧縮すれば、どこにでも移植できるPHPプログラム一式のできあがりです。
編集 履歴 (0)
  • 返信ありがとうございます。
    私には思いつかない目から鱗な方法だなと思い、感激したのですが、上と相談してみた結果、やはり難しいとの結論に至りました。
    実はというと、先日お答えして頂いたコメントの件と、猶予があまり残っていないのもあり、ドラッグアンドドロップではなく、<input type="file">で行うことになりました。
    -
  • 画像の加工処理に関しましても、今までのシステムではお客様がご自身で加工されていたらしく、今回のシステムでも加工していただくか、代わりに加工専用ページを軽く導入することでお願いしてみようかと思っている次第です。 -
  • クライアント側にもソースを置くとなると管理も複雑化し、猶予が無いのに対して、工数が足りないとも判断いたしました。
    これ以上工数をファイルアップロードに割くのが厳しいため、申し訳ありませんが今回は上記のような方法で実装することにいたします。
    XAMPPに関しては新しくシステム開発を行う場合に要件にマッチしていれば使用させていただこうかなと考えております。
    -
  • 今回はこれで〆させていただきます。
    ご丁寧な対応ありがとうございました!!
    -

ドラッグアンドドロップされたローカルファイルを

ここでいう「ローカル」は、クライアント側のローカルだとして、

別のローカルフォルダにコピーするような処理を考えています。

こちらの「ローカル」は、サーバ側のローカルですか? それともクライアント側ですか? 前者だとアップロード処理になりますので、「PHP ファイル アップロード」などで検索するとサンプルがあるはずです。後者の場合、Webブラウザからクライアント側のローカルに対して書き込む行為になります。…が、これが何を意味しているかはお分かりですよね。

最終的には、バイナリデータを加工して、画像を全てjpg形式に変えれるような処理も行えたらとは
考えていますが、こちらの問題は重視していないため解決できなくても構いません。

データコンバータのようなものを想定されているのだとしたら、Webアプリケーションではなく、素直にクライアントアプリケーション(VB.NETやC#など)で実装するのが手っ取り早いと思われますが、その選択肢はありませんか?

編集 履歴 (0)
  • 返信ありがとうございます。別のローカルファイルとはクライアント側の事ですね。更に言うなら社内のNASの事です。もちろんよくない処理だと認識していて、それでも尚且つ実装するのが最善だと判断して書き込ませて頂きました。詳しくはお話できませんが、クライアント側のPCの専用のPCを購入していただいて、そちらを使用して貰う前提でしか動かないプログラムにしています。 -
  • クライアントアプリケーション(VB.NETやC#等)につきましては、システムの関係とクライアントアプリケーションの作成経験の少なさにより、工数が膨れ上がってしまうため、不可能と判断しています。 -
ウォッチ

この質問への回答やコメントをメールでお知らせします。