ドラッグ＆ドロップでファイルをアップロードしたい

実現したいこと

https://koheik.hatenablog.com/entry/2016/07/08/152936
このようにドラッグ＆ドロップでファイルアップロードを実現させたい

発生している問題・分からないこと

bootstrap3で実現させたことはあるがbootstrap5では初めて行う

該当のソースコード

  <div id="drag-drop-area">
    <div class="drag-drop-inside">
      <p class="drag-drop-info">ここにファイルをドロップ</p>
      <p>または</p>
      <input type="file" value="ファイルを選択" name="image">
      <p class="drag-drop-buttons"><input id="fileInput" type="file" value="ファイルを選択" name="image"></p>
      <input type="value" value="送信">
    </div>
  </div>
  <script>
if (!isset($_FILES['image']['error']) || !is_int($_FILES['image']['error'])){
  echo "ファイルアップロードエラー";
} else {
  $file_name = $_FILES['image']['name'];
  $extension = pathinfo($file_name, PATHINFO_EXTENSION); //拡張子取得
  $tmp_path = $_FILES['image']['tmp_name'];
  $file_dir_path = "upload/";
  $uniq_name = date("YmdHis").md5(uniqid(microtime(),1)).session_id() . "." . $extension;

  if (is_uploaded_file($tmp_path)) {
    if(move_uploaded_file( $tmp_path, $file_dir_path . $uniq_name)) {
      chmod($file_dir_path . $uniq_name, 0644);
    } else {
      echo "Error:アップロードできませんでした。";
    }
  }
} 

</script>

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

なにもかわらない。これでできるかもわからない
コンソールを見るとエラーがあるみたい
それで出来なかった様子
プログラムはよくわからず原因がつかめないので別の参考サイトをみて実現

補足

こちらの参考サイトがわかりやすい
https://mo2nabe.com/input-file-design/

結局これで実現
https://blog.kimizuka.org/entry/2020/08/11/080000

Lhankor_Mhy

2024/04/02 01:03

参考にされたページにも書かれていますが、JavaScriptが必要になりますので、お試しください。

m.ts10806

2024/04/02 01:19 編集

> bootstrap3で実現させたことはあるが手順は同じです。参考記事のコードもBootstrapは無関係に組まれているように見受けられます。送る部分はクライアントの仕事で、アップロード自体の処理はサーバの仕事。サーバ側は変わりません。クライアント側もあくまでレイアウトだけでは？ jQueryの仕様有無は関係あると思うけど、参考記事ではjQuery使われてないみたいだし、現在のコードだけではそもそもBootstrap3で出来てたというのが怪しいです。

m.ts10806

2024/04/02 08:10

本当に何も分からないのでしたら、回答がついてもそれが解決に繋がるものか判断できないのではと思います。自身の都合の良いコードを書いてくれる人はいないし、作業依頼をする場でもないので、自身が理解できるように努めるか、全部業者に丸投げするかどっちかになります。

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

回答2件

現在のメジャーブラウザでは <input type=file> がファイルのドロップに対応しています。見た目を気にしなければ何もしなくてもよいでしょう。
<input type=file> 以外の要素でドロップを受け付けたいなら、参考サイトの最後のコードを <script> タグ内に書けば実現できると思います。

基礎的な知識が足りてないように感じます。入門書などを読んで体系的な知識を得るのがおすすめです。

投稿2024/04/02 01:00

編集2024/04/02 01:26

int32_t

総合スコア20909

こんな感じで

javascript
1<style>
2.droppable{
3  border:1px solid;
4  position:relative;
5  height:200px;
6}
7.droparea{
8  position:absolute;
9  top:0;
10  width:100%;
11  height:100%;;
12  opacity:0;
13}
14</style>
15<form method="post" action="upload.php" enctype="multipart/form-data">
16<div class="droppable">
17<div>ドロップして</div>
18<input type="file" class="droparea" name="userfile" onchange="this.form.submit()">
19</div>
20</form>