ajaxでの画像アップロードにバリデーションを設けたい。

実現したいこと

1.アップロードボタンを押してファイルの選択をし、「画像ファイルであること」「jpg,jpeg,png,gif形式であること」「10MB以下であること」のバリデーションをかけ、エラーが出た場合、

error: function(xhr, status, error) {
                // アップロードエラー時の処理
                alert('ファイルのアップロードに失敗しました。');
              }

の部分に個別にエラーメッセージを追加したい

該当のソースコード

product_regist.blade
1<div>
2          <span>写真1</span>
3          <div id="preview1"></div>
4          <input id="uploadInput1" type="file" style="display: none;">
5          <input type="hidden" id="path1" name="path1" value="{{ $path1 ?? '' }}">
6          <button id="imageUpload1" type="button" onclick="selectFile(1)">アップロード</button>
7        </div>
8
9        <div>
10          <span>写真2</span>
11          <div id="preview2"></div>
12          <input id="uploadInput2" type="file" style="display: none;">
13          <input type="hidden" name="path2" value="{{ $path2 ?? '' }}">
14          <button id="imageUpload2" type="button" onclick="selectFile(2)">アップロード</button>
15        </div>
16
17        <div>
18          <span>写真3</span>
19          <div id="preview3"></div>
20          <input id="uploadInput3" type="file" style="display: none;">
21          <input type="hidden" name="path3" value="{{ $path3 ?? '' }}">
22          <button id="imageUpload3" type="button" onclick="selectFile(3)">アップロード</button>
23        </div>
24
25        <div>
26          <span>写真4</span>
27          <div id="preview4"></div>
28          <input id="uploadInput4" type="file" style="display: none;">
29          <input type="hidden" name="path4" value="{{ $path4 ?? '' }}">
30          <button id="imageUpload4" type="button" onclick="selectFile(4)">アップロード</button>
31        </div>

script
1    function selectFile(imageNumber) {
2    document.getElementById('uploadInput' + imageNumber).click();
3  }
4
5    $(document).ready(function() {
6      $('#uploadInput1').change(function() {
7        var input = this;
8        if (input.files && input.files[0]) {
9          var reader = new FileReader();
10          reader.onload = function(e) {
11            
12
13            // ファイルをアップロードする
14            var formData = new FormData();
15            formData.append('image1', input.files[0]);
16            formData.append('_token', $('meta[name="csrf-token"]').attr('content')); // CSRFトークンを追加
17            $.ajax({
18              url: '/image_upload', // アップロード先のURLを指定
19              type: 'POST',
20              data: formData,
21              processData: false,
22              contentType: false,
23              success: function(response) {
24                // アップロード成功時の処理
25                alert('ファイルがアップロードされました！');
26                $('#preview1').html('<img src="' + e.target.result + '" width="200">');
27              },
28              error: function(xhr, status, error) {
29                // アップロードエラー時の処理
30                alert('ファイルのアップロードに失敗しました。');
31              }
32            });
33          };
34          reader.readAsDataURL(input.files[0]);
35        }
36      });
37    });
38
39    $(document).ready(function() {
40      $('#uploadInput2').change(function() {
41        var input = this;
42        if (input.files && input.files[0]) {
43          var reader = new FileReader();
44          reader.onload = function(e) {
45            
46            // ファイルをアップロードする
47            var formData = new FormData();
48            formData.append('image2', input.files[0]);
49            formData.append('_token', $('meta[name="csrf-token"]').attr('content')); // CSRFトークンを追加
50            $.ajax({
51              url: '/image_upload', // アップロード先のURLを指定
52              type: 'POST',
53              data: formData,
54              processData: false,
55              contentType: false,
56              success: function(response) {
57                // アップロード成功時の処理
58                alert('ファイルがアップロードされました！');
59                $('#preview2').html('<img src="' + e.target.result + '" width="200">');
60              },
61              error: function(xhr, status, error) {
62                // アップロードエラー時の処理
63                alert('ファイルのアップロードに失敗しました。');
64              }
65            });
66          };
67          reader.readAsDataURL(input.files[0]);
68        }
69      });
70    });
71
72*長いので3.4は省略

contoroller
1public function imageUpload(Request $request)
2    {
3        $path1 = '';
4        $path2 = '';
5        $path3 = '';
6        $path4 = '';
7    
8        if ($request->hasFile('image1')) {
9            $filename = $request->file('image1')->getClientOriginalName();
10            $image = $request->file('image1');
11    
12            // 画像をstorage/public配下に保存する
13            $path = $image->storeAs('public', $filename);
14            $path1 = str_replace('public/', 'storage/', $path);
15        }
16    
17        if ($request->hasFile('image2')) {
18            $filename = $request->file('image2')->getClientOriginalName();
19            $image = $request->file('image2');
20    
21            // 画像をstorage/public配下に保存する
22            $path = $image->storeAs('public', $filename);
23            $path2 = str_replace('public/', 'storage/', $path);
24        }
25    
26        if ($request->hasFile('image3')) {
27            $filename = $request->file('image3')->getClientOriginalName();
28            $image = $request->file('image3');
29    
30            // 画像をstorage/public配下に保存する
31            $path = $image->storeAs('public', $filename);
32            $path3 = str_replace('public/', 'storage/', $path);
33        }
34    
35        if ($request->hasFile('image4')) {
36            $filename = $request->file('image4')->getClientOriginalName();
37            $image = $request->file('image4');
38    
39            // 画像をstorage/public配下に保存する
40            $path = $image->storeAs('public', $filename);
41            $path4 = str_replace('public/', 'storage/', $path);
42        }
43    
44        // 保存した画像のパスを返す
45        return response()->json([
46            'path1' => $path1,
47            'path2' => $path2,
48            'path3' => $path3,
49            'path4' => $path4,
50        ]);
51    }

補足情報（FW/ツールのバージョンなど）

laravel6
PHP7

行動規範の内容に同意します

回答2件

仕様があいまいです
「jpg,jpeg,png,gif形式であること」＝これは拡張子で判断していいのですか？

javascript
1<script>
2document.addEventListener('submit', e=>{
3  e.preventDefault();
4  const body=new FormData(e.target);
5  const file=body.get("myfile");
6  const reader = new FileReader();
7  reader.addEventListener('load',e=>{
8    if(/^image\/(jpeg|gif|png)/.test(file.type) && file.size<=10**7){
9      fetch(url,{method:"post",body}).then(res=>res.text()).then(console.log);
10    }
11  }); 
12  reader.readAsDataURL(file);
13});
14</script>
15<form method="post" acition="..." enctype="multipart/form-data">
16<input type="file" name="myfile">
17<input type="submit" value="send">
18</form>

投稿2023/06/23 06:47

yambejp

総合スコア117674

ベストアンサー

この回答はGPT-4による自動生成回答です

file('image3')->getClientOriginalName();
$image = $request->file('image3');

        // 画像をstorage/public配下に保存する
        $path = $image->storeAs('public', $filename);
        $path3 = str_replace('public/', 'storage/', $path);
    }

    if ($request->hasFile('image4')) {
        $filename = $request->file('image4')->getClientOriginalName();
        $image = $request->file('image4');

        // 画像をstorage/public配下に保存する
        $path = $image->storeAs('public', $filename);
        $path4 = str_replace('public/', 'storage/', $path);
    }

    return response()->json([
        'path1' => $path1,
        'path2' => $path2,
        'path3' => $path3,
        'path4' => $path4,
    ]);
}


### バリデーションの追加方法
以下のように、`beforeSend`でバリデーションを追加し、エラーメッセージを表示できます。

```javascript
function validateFile(file) {
  // 画像ファイルであること
  if (!file.type.startsWith('image/')) {
    alert('画像ファイルを選択してください。');
    return false;
  }

  // jpg, jpeg, png, gif形式であること
  const validExtensions = ['jpg', 'jpeg', 'png', 'gif'];
  const fileExtension = file.name.split('.').pop().toLowerCase();
  if (!validExtensions.includes(fileExtension)) {
    alert('jpg, jpeg, png, gif形式の画像ファイルを選択してください。');
    return false;
  }

  // 10MB以下であること
  const maxSize = 10 * 1024 * 1024; // 10MB
  if (file.size > maxSize) {
    alert('ファイルサイズは10MB以下にしてください。');
    return false;
  }

  return true;
}

// 以下のように、各ファイルアップロード処理の$.ajax()内にbeforeSendを追加します。
$.ajax({
  // ...
  beforeSend: function() {
    if (!validateFile(input.files[0])) {
      return false;
    }
  },
  // ...
});

このようにして、バリデーションを追加し、エラーメッセージを表示できます。

投稿2023/06/23 06:04