8

Codeigniter のアップロード ライブラリを使用して、ユーザー アバターの画像をアップロードしています。また、ユーザーがトリミングする領域を選択できるJcropも使用しています。

ここに画像の説明を入力
(ソース: webresourcesource.com )

選択した領域のすべての座標をテキスト入力に保存しています。これをphpで使用してトリミングします。

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

アップロードフォーム:

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

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

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

</form>

可能であれば、これのために重い js を避けるか、2 回アップロードすることを避けようとしています。ファイルを選択すると、ファイルの名前が表示されることに気付きました。

ここに画像の説明を入力

その機能を使用して画像パス (アップローダーのコンピューター内の画像へのパス) も取得する方法はありますか? 理論的には、それをイメージタグで使用して、js なしでイメージを表示できます。

4

3 に答える 3

7

明確にするために、現在のソリューションではファイルを 2 回アップロードしていませんよね? 一度だけアップロードして、一時的な場所に保存し、トリミング ページに表示してから、2 番目のアクションでトリミング パラメータを送り返す必要があります。

従来、ファイルのコンテンツやファイル アップロード フォームの値にアクセスする方法はありませんでした。Web ページにファイル システムの構造を知らせてしまうと、セキュリティ上のリスクが生じる可能性があります。(管理者アカウントで Windows を使用していますか?) 何年も前にこれを行うことができましたが、私たちは賢くなりました。

HTML5 で導入された File APIを使用すると、この情報を公開せずにファイルにアクセスできます。また、クライアント側アプリケーションで使用できる優れたオプションがいくつかあります。重要なものfilesは、ファイル入力のプロパティとURL.createObjectURL.

フォームを変更すると、入力内のファイルの内部表現が、fileInput.fileswhich isFileListオブジェクトを使用して公開されます。バイトを読み取ることができる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 でこの jsFiddleを試してください。これは明らかにすべてのブラウザーのソリューションではありませんが、それをサポートしているブラウザー向けに強化する優れた方法です。

于 2012-07-08T03:37:25.297 に答える
1

css (http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-property.html) を使用して実行できる可能性がありますが、jcrop と統合するのは非常に困難です。 .

アップロードされるまでユーザーを待たせることをお勧めします。これは、トリミングを許可する Facebook や他のほとんどの Web サイトで行われていることです。

いずれにせよ、アップロード プロセスが高速化されるわけではないので、これを行う理由はあまりありません。

完全なファイルパスを取得できません。セキュリティ上の問題になります: http://forums.asp.net/t/1077850.aspx/1

于 2012-07-07T22:48:33.107 に答える
1

さて、defusion のようなプレビューが付属する他のクロッパー ライブラリを使用できます。

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

于 2012-07-07T23:10:45.587 に答える