質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.62%

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

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 87

score 1

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

<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関連のファイルもダウンロードしたほうが良いのでしょうか?

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • m.ts10806

    2021/09/15 20:17

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

    キャンセル

  • JackRay

    2021/09/15 23:45

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

    キャンセル

  • JackRay

    2021/09/15 23:48

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

    キャンセル

  • dameo

    2021/09/16 18:41

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

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

    キャンセル

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.62%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る