0

私が達成しようとしていること

[x] 1) ユーザーがフォームに記入する

[x] 2) ユーザーが「ドラッグ アンド ドロップ (html5)」または「クリックして画像を選択」してフォームに画像を追加すると、プレビューがページに表示されます。(完了) ここで、サーバーへのこれらの画像のアップロードをトリガーするコードを追加するのは簡単ですが、私はまだそれを望んでいません。

[x] 3) ユーザーが [自分と自分のデスクを追加] をクリック --> ユーザー アカウントがまだ存在しない場合は作成

デスク [x] 4) デスクが追加され、適切なユーザーへの接続も追加されます。

[x] 5)folderでsame name (id) as the desk_id.

::::THE QUESTION::::

6) -->>ドラッグ アンド ドロップまたは選択した画像を取得しnowたい。uploadto that folder

:::::::::::::::::::

http://www.html5rocks.com/en/tutorials/file/dndfiles/ (実際のページは本当に素晴らしい! 9

私はこの素晴らしいソリューションについて知っています: http://blueimp.github.com/jQuery-File-Upload/ しかし、私がやろうとしていることはやり過ぎです. 、そして私は本当に私がとても近いと思います。

出てくる単語や表現: read blob、check array blob、read from sandbox、canvas.toDataURL()

答えはここにあると思います: http://www.html5rocks.com/en/tutorials/file/xhr2/または ここhttp://www.html5rocks.com/en/tutorials/file/dndfiles/またはここ/ http://www.html5rocks.com/en/tutorials/file/filesystem/ (「ユーザーが選択したファイルの複製」の下)、またはこちらhttp://robertnyman.com/2010/12/16/utilizing-the- html5-file-api-to-choose-upload-preview-and-see-progress-for-multiple-files/

この後、私は次のステップにいると言えます:アップロードする前に画像をプレビューします が、おそらく正しい方向にプッシュできるでしょうか? :)

もちろん、私はこれらを見てきました: Facebook js api - HTML5 キャンバスを写真としてアップロードする前に、HTML5 Pre-resize images

現在、次のような DND ファイルからプレビューを表示しています。

for (var i = 0, f; f = uppladdadeFiler[i]; i++) {

    // Only process image files.
    if (!f.type.match('image.*')) {
      continue;
    }

    var reader = new FileReader();

    // Closure to capture the file information.
    reader.onload = (function(theFile) {
      return function(e) {
        // Render thumbnail.
        var span = document.createElement('span');
        span.innerHTML = ['<img class="thumb preview" src="', e.target.result,
                          '" title="', escape(theFile.name), '"/>'].join('');
        document.getElementById('listImages').insertBefore(span, null);

        var span2 = document.createElement('span');
        span2.innerHTML = ['<img class="thumb inside" src="', e.target.result,
        '" title="', escape(theFile.name), '"/>'].join('');
        document.getElementById('huvudbilden').insertBefore(span2, null);
      };        
    })(f);
        $('#valdaBilder').show();

    // Read in the image file as a data URL.
    reader.readAsDataURL(f);
  }
4

1 に答える 1

1

あなたを正しい方向に導くことを願って、私はあなたにいくつかの情報を提供します。2つの理由から、既製の実用的な回答を提供していないことに注意してください.それの...だからここに行く：

最初に行うことは、たとえば「ファイルのアップロード」という名前のボタンを用意し、 のように fn を添付することですuploadFiles()。この関数は次のようになります。

function uploadFiles()
{
    var file = files[0]; 
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function()
    { 
        if (xhr.readyState==4 && xhr.status==200) 
        alert(xhr.responseText);
    };   
    xhr.open('POST', '/upload.php', true);
    xhr.setRequestHeader('X-FILE-NAME', file.name);
    xhr.send(file);
}

わかりましたので、説明：

var file = files[0];

オブジェクト配列は、ドラッグ アンド ドロップ イベントリスナー関数で作成するものである必要があります。filesこれは、ドロップゾーンにドロップしたファイルを表すファイル オブジェクトになります。通常、次のように作成します。files = event.dataTransfer.files;これにより、FileList object名前付きが作成されますfiles。この例では、ドロップゾーンの最初のファイルのみを考慮しています-したがって、files[0]

コードの残りの部分は一目瞭然だと思います。注意すべき点は次のとおりです。

 xhr.setRequestHeader('X-FILE-NAME', file.name);
 xhr.send(file);

ご覧のとおり、生のバイナリ データ コンテンツをサーバーに送信しています。したがって、post 操作は、ファイルに含まれる生のバイナリ データをサーバー ストリームに書き込みます。サーバーがこの投稿されたデータを読み取る方法に影響するため、これは重要なポイントです。

サーバー側の upload.php: アップロードされたファイルの最初の 1000 バイトを読み取り、それをクライアントに出力します (上記の JavaScript コードに基づいて、ブラウザーに警告します)。

<?php
$streamHandle = fopen("php://input","rb");
$streamContent = fread($streamHandle,1000);
echo $streamContent;
?>

多くの人がサーバー側でコンテンツを読み取る方法について混乱し$_POST、 、 またはを使用することを考え$_FILESますが、 を使用してデータを送信する場合は、実行中の php プロセスの標準入力ストリームであるX-FILE-NAMEハンドルを開いて読み取る必要があります。 php://input.

ストリームを読み取ったらfwrite、任意のディレクトリに新しいファイルを作成するだけです。

先ほど言ったように、これは特定のコードにコピー アンド ペーストするだけのターンキー ソリューションではありませんが、HTML5 のドラッグ アンド ドロップと、それをサポートするJavascript。

于 2012-08-13T04:30:22.047 に答える