PHPはアップロード前に選択した画像を表示します

Question

私はCodeigniterのアップロードライブラリを使用してユーザーのアバターの画像をアップロードしています。私はJcropも使用しています。これにより、ユーザは、切り抜く領域を選択できます。

http://www.webresourcesource.com/wp-content/uploads/2012/04/jcrop.jpg

私はトリミングするPHPで使用しますテキスト入力で選択された領域の全ての座標を保存しています。

アップロードする前に選択した画像を表示することはできますか？

アップロード形式：

<?php echo form_open_multipart('upload/do_upload');?> 

<input type="file" name="userfile" size="20" /> 

<input type="submit" value="upload" /> 

</form> 

私はこのまたは2回をアップロードするための重いJSを避ける​​ためにしようとしている可能ならば。

だけでなく（アップローダーのコンピュータ内の画像へのパスを）画像のパスを取得するために、その機能を使用する方法があります：ファイルを選択するとき、私はそれの名前が表示されていることに気づきますか？理論的には、イメージタグでそれを使用し、jsなしでイメージを表示することができます。

Answer 1

は明確にするために、あなたは右、あなたの現在のソリューションで二回ファイルをアップロードしていませんか？一度アップロードするだけで一時的な場所に保存し、それをクロップページに表示してから、2番目の操作でクロップパラメーターを送り返してください。

伝統的に、ファイルの内容やファイルアップロードフォームの値にアクセスする方法はありませんでした。 Webページにファイルシステムの構造を知らせるセキュリティ上のリスクがあります。 （あなたはWindows上で、管理者アカウントでは...？）これまでにあなたはこれを行うことができましたが、私たちは賢明になりました。

The File API introduced in HTML5は、この情報を明らかにすることなくファイルにアクセスすることを可能にし、そしてあなたのクライアント側のアプリケーションで使用可能ないくつかのクールなオプション、ファイル入力とURL.createObjectURLのfilesプロパティーであるキーのものがあります。

フォームを変更すると、fileInput.files（FileList）オブジェクトを使用して、入力内のファイルの内部表現が公開されます。 APIはバイトを読むことができるが、イメージのソースとして設定したい場所に存在します。

ファイルがURLではないため、URL.createObjectURLは、ページと同じ原点のiframeでのみ使用できるファイルの周りに仮想URLを作成します。 URLを取り消してjQueryの切り抜きプラグインをキックオフ、オンロードそして、これに画像を設定します。

input.addEventListener('change', function() { 
    preview.src = URL.createObjectURL(this.files[0]); 
}); 

preview.addEventListener('load', function() { 
    URL.revokeObjectURL(this.src); 

    alert('jQuery code here. Src: ' + this.src + ', W: ' + this.width + ', H: ' + this.height); 
}); 

は、少なくともChromeとFirefoxでthis jsFiddleを試してみてください。これは明らかにすべてのブラウザのための解決策ではありませんが、それをサポートしているブラウザ用に改善するための素晴らしい方法です。

Answer 2

あなたはcss（http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-property.html）を使って潜在的に行うことができますが、統合するのは非常に難しいでしょうjcropで...

アップロードするまでユーザーを待たせることをお勧めします。これは、Facebookや他のほとんどのウェブサイトが作物を許可するものです。

いずれにしてもアップロード処理が高速化されないため、それほど大きな理由はありません。

完全なファイルパスを取得できません。 http://forums.asp.net/t/1077850.aspx/1

Answer 3

まあ、他のクロッパーのライブラリを使用することができますが、1つの不具合のようなプレビューが付属しています。

http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/