プロフィール画像をアップロードする画面を作りたい

Question

TwitterやInstagramのように、アカウントを作成する際のプロフィール画像をアップロードの

画像が表示される円をタップ⇒ファイルから画像を選択（一時アップロード？）⇒1:1にトリミング⇒円で表示されていることを確認⇒アップロード

というのを作りたいと思っています。

使用するもの
jQuery-File-Upload-10.31.0
Croppie
（一応PHPも？）

現在
htmlはこのような感じです。

profile.html

<meta http-equiv="X-UA-Compatible"content="IE=edge"/>
<meta http-equiv="content-type"content="text/html; charset=UTF-8"/>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"name="viewport"/>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//blueimp.github.io/jQuery-File-Upload/js/vendor/jquery.ui.widget.js"></script>
<script src="//blueimp.github.io/jQuery-File-Upload/js/jquery.iframe-transport.js"></script>
<script src="//blueimp.github.io/jQuery-File-Upload/js/jquery.fileupload.js"></script>
<script src="//blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js"></script>
<script src="//blueimp.github.io/jQuery-File-Upload/js/jquery.fileupload-process.js"></script>
<script src="//blueimp.github.io/jQuery-File-Upload/js/jquery.fileupload-image.js"></script>
<script src="croppie.js"></script>
<link rel="stylesheet" href="croppie.css">

<script>
        $(function() {
            var url = "...";        // ※ファイルをアップロードする URL
            $('#fileupload').fileupload({
                url: url,
                dataType: 'json',
                autoUpload: true,       // ※ファイルを選択したら、即、アップロード
                acceptFileTypes: /(.|/)(gif|jpe?g|png)$/i,
                maxFileSize: 5000000, // 5 MB
                // Enable image resizing, except for Android and Opera,
                // which actually support image resizing, but fail to
                // send Blob objects via XHR requests:
                disableImageResize: /Android(?!.*Chrome)|Opera/
                    .test(window.navigator.userAgent),
                previewMaxWidth: 100,
                previewMaxHeight: 100,
                previewCrop: true
            }).on('fileuploadadd', function (e, data) {
                data.context = $('<div/>').appendTo('#files');
                $.each(data.files, function (index, file) {
                    var node = $('<p/>')
                            .append($('<span/>').text(file.name));
                    node.data(data)
                    node.appendTo(data.context);
                });
            }).on('fileuploadprocessalways', function (e, data) {
                var index = data.index,
                    file = data.files[index],
                    node = $(data.context.children()[index]);
                if (file.preview) {
                    node
                        .prepend('<br>')
                        .prepend(file.preview);
                }
            });
        });
        </script>
```Croppie.html
```html
<div class="demo"></div>
<script>
$('.demo').croppie({
    url: '',
});
</script>
<!-- or even simpler -->
<img class="my-image" src="" />
<script>
$('.my-image').croppie();
</script>

コピペしたものですがうまくいかず、私自身JavaScriptは初心者なので、足りないところや修正したほうが良いところがあれば教えていただきたいです。

追記
上記のように使用しているのはjQuery-File-Upload-10.31.0ですが、他にもjQuery関連のファイルもダウンロードしたほうが良いのでしょうか？

Comments

[m.ts10806]

「ファイルをアップロードする URL」ではどんな処理をしてるんでしょう。
この手のものは「コピペしとけば動く」ようなものではないことのほうが多いです。
個々の機能をきちんと理解して組み合わせることになるので。

[退会済みユーザー]

URL先にアップロードされるのか、URL先の画像がアップロードされるのか、正直分かりません。
似たような構文で、いくつかのサイトではURL先(別のサイト)の画像が表示されているようでした。

[退会済みユーザー]

ただ試していないので、URLのところをCorrpie.htmlに設定することで、もしかしたらトリミングのページにアップロードされるのかもしれません。

[dameo]

個人的にはコピペだけで内容を理解せずに動かそうとしている人なら、アドバイスしたくないのですが、回答する気もないのにそれを言わずに無責任なコメントをする方がいるため、質問した方が期待してしまうのも無理ありません。

まずは「うまく行かない」ではなく、具体的に何を見て「うまく行かない」と思ったのか、お手数ですがエラーメッセージなどそう思った根拠を提示して頂けないでしょうか？

[退会済みユーザー]

今自分なりに試行錯誤しているので、現状を説明させていただきます。

https://foliotek.github.io/Croppie/
こちらのサイトの下から二番目の『Upload Example (with exif orientation compatability)』を参考に、
少し長くなりますが下記のようにしました。

HTML
<script>
$(function() {
var url = "http://localhost/profile_image.html"; // ※ファイルをアップロードする URL
$('#fileupload').fileupload({
url: url,
dataType: 'json',
autoUpload: true, // ※ファイルを選択したら、即、アップロード
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
maxFileSize: 5000000, // 5 MB
// Enable image resizing, except for Android and Opera,
// which actually support image resizing, but fail to
// send Blob objects via XHR requests:
disableImageResize: /Android(?!.*Chrome)|Opera/
.test(window.navigator.userAgent),
previewMaxWidth: 100,
previewMaxHeight: 100,
previewCrop: true
}).on('fileuploadadd', function (e, data) {
data.context = $('<div/>').appendTo('#files');
$.each(data.files, function (index, file) {
var node = $('<p/>')
.append($('<span/>').text(file.name));
node.data(data)
node.appendTo(data.context);
});
}).on('fileuploadprocessalways', function (e, data) {
var index = data.index,
file = data.files[index],
node = $(data.context.children()[index]);
if (file.preview) {
node
.prepend('<br>')
.prepend(file.preview);
}
});
});
$uploadCrop = $('#upload-proimage').croppie({
enableExif: true,
viewport: {
width: 200,
height: 200,
type: 'square'
},
boundary: {
width: 300,
height: 300
}
});
</script>

実際にページを開いてみましたが、ファイル選択ボタンが表示されており、画像を選択すると画像中央から1:1になった画像が表示されてるだけです。トリミングしておりません。

ちなみにexif.jsもまだダウンロード？しておりません。

[m.ts10806]

質問は編集できますので適宜質問本文を更新してください。

[dameo]

@m.ts10806様
無責任なコメントを控えてもらえますか？

@JackRay様
まずやりたいことは、
「ファイルのアップロードの際に、選択された長方形の画像ファイルからユーザーが選択した任意の部分を円形で切り出した画像をアップロードしたい」
ということですか？
その手段として、
「jQuery + jQuery-File-Upload + Croppyを使用しクライアントサイドで切り抜いた画像を作成してアップロード」
を考えているということですか？
そして、現状では、
「そこら辺から持ってきたサンプルコードを貼り合わせたけど、動かない」
ということですか？

[退会済みユーザー]

まとめるとその通りです。
無知で申し訳ないのですが、jQueryとjQuery-File-Uploadはやはり別物なのでしょう
か？

[m.ts10806]

dameoさん
指摘に対しては質問本文を更新するのが基本です。
無責任だという決めつけは非常に迷惑です。
質問内容が他者が応えられるほど充実してないのでこちらで追記依頼をしています。

[m.ts10806]

それに「追記修正依頼をしたからと絶対に回答しなければならない」ルールはないです。
本件はカテゴリとして応えられない内容ではないですが、質問内容の不足は誰もが感じるところ（だからあなたも指摘してるんでしょ？）
多くは指摘しても対応しない反応すらしない、暴言すらはく人がいる。それで「回答しない」となって無責任と解釈するのは横暴です。

[dameo]

なるほど・・・だとすると、まずは
(1)phpでファイルのアップロードをできるようになりましょう。
それが出来たら、
(2)HTMLとJavaScriptで、画像を表示しその画像を切り替えられるようになりましょう。
その次に
(3)jQueryで切り替えられるようになりましょう。
そこまで出来たら、
(4)jQueryで画像ファイルの画像を表示しつつその画像ファイルをアップロードできるようになりましょう。
それが出来たら、
(5)Croppyを使って画像ファイルの画像を加工してその加工した画像をアップロードしてみましょう。
なお「できるようになる」はコピペではなく内容をちゃんと理解し、自力でも書けないとダメです。
(1)～(5)を順番にやっていって、疑問があったら、個別に質問を立てていけばいいと思います。
(1)～(4)が出来ないのに(5)をやっても教えることが多すぎて、解決できません。

jQueryとjQuery-File-Uploadは別物ですね。jQuery-File-UploadはjQueryを使用した便利ツールです。
https://github.com/blueimp/jQuery-File-Upload#mandatory-requirements

というわけで、私はこれで失礼しますね。頑張ってください。

[退会済みユーザー]

一通りの流れを教えていただき、ありがとうございます。
どういった手順で進めれば良いのかも分からない状況だったので、助かります。