下記のサイトのソースをもとに、
ドラッグ&ドロップで複数画像をアップロードする仕様を
実装しようとしています。
https://studio-key.com/Sample2/FileDragUpload/sample1.html

うまくいけば#imageboxの中に、
アップした画像が表示されるのですが、表示されません。
ご教示いただけますと幸いです。どうぞよろしくお願いいたします。

<!doctype html>
<html>
<head>
<meta charset="utf-8">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<style>
#iamgeArea{
  background-color: #f4f4f4;
  margin: 10px;
  padding: 10px;
  border: #ddd dashed 5px;
  height: 200px;
  width: 350px;
  text-align: center;
}
#imagebox img{
  width: auto;
  height: 200px;
}
</style>
</head>
<body>
<script type="text/javascript">
function dragover(e) {
    e.preventDefault();
}

function drop(e) {
  e.preventDefault();
  var files = e.dataTransfer.files;
  for (var i=0; i<files.length; i++) {
    if (!files[i] || files[i].type.indexOf('image/') < 0) {
      continue;
    }
      FileUpload(files[i]);
  }
}

function FileUpload(fd) {
    var formData = new FormData();
    formData.append('image', fd);
    $.ajax({
      async: true,
      type: 'POST',
      contentType: false,
      processData: false,
      url: 'test.html',
      data: formData,
      dataType :'xml'
    }).done(function(xml){
      var mes  = $(xml).find("mes").text();
      var file = $(xml).find("file").text();
      var flag = $(xml).find("flag").text();
      if(flag == 1){
        $('#imagebox').append('<img src="upload/'+file+'">');
      }
    });
}
</script>


<div id="container">
  <section class="padding20">
    <article>
      <section class="padding10">
        <div id="iamgeArea" ondragover="dragover(event)" ondrop="drop(event)">ファイルをドラッグアンドドロップ</div>
        <div id="imagebox"></div>
      </section>
    </article>
  </section>
</div>

</body>
</html>

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

回答2件

ajaxのurlがtest.htmlになっています。
画像を保存する処理をphp等で作成してそのurlを設定してください。

投稿2020/05/26 06:28

tabuu

総合スコア2480

mikiko.s

2020/05/28 02:38

ありがとうございます。

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

ベストアンサー

すでに回答があるようにサーバー側のapi次第ですが
複数ファイルの処理を命題としている割に、ajaxの成功時の
img追加が単数処理になっているように見受けられます。
そのあたりも再検討が必要です

動作確認用サンプル

form.html

HTML
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
2<script>
3$(function(){
4  $('#f').on('change',function(){
5    if($(this).prop('files').length>0){
6      var fd=new FormData($(this).prop('form'));
7      $.ajax({
8      url:"send.php",
9      type: 'POST',
10      contentType: false,
11      processData: false,
12      data:fd,
13      }).done(function(data){
14        console.log(data);
15      });
16    }
17  });
18});
19</script>
20<form>
21<input type="file" id="f" name="f[]" style="width:100%;height:300px;background-Color:yellow;" multiple>
22</form>