剪切并粘贴图像文件并将其上传到表单提交

Question

我有代码，可以将图像剪切并粘贴到

div

中，它将上传图像并将文件存储在目录中。我尝试更改代码以在提交时上传剪切和粘贴文件数据。

readastext

似乎将数据存储在隐藏字段中。它还将提交时的数据传输到 php 文件处理器，但目标目录中没有创建文件。我做错了什么？

$(document).ready(function() {
  $('#pasteTarget').on('paste', function(e) {
    e.preventDefault();
    var data = e.originalEvent;
    
    if (data.clipboardData && data.clipboardData.items) {
      var items = data.clipboardData.items;
      for (var i = 0; i < items.length; i++) {
        if (items[i].type.indexOf('image') !== -1) {
          var file = items[i].getAsFile();
          var reader = new FileReader();
          reader.onload = function() {
            $("<input>").attr("type", "hidden").attr("name", "file[]").appendTo("form").val(reader.result);
          };
          reader.readAsText(file);
        }
      }
    }
  });
  
  $('#subfile').on('click', function(e) {
    var form = $('form')[0];
    var data = new FormData(form);
    
    $.ajax({
      type: "POST",
      url: 'postfileuploader.php',
      data: data,
      contentType: false,
      processData: false,
      cache: false,
      success: function(result) {
        console.log(result);
      },
      error: function(error) {
        console.log(error);
      }
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <div style="width: 200px; height: 200px; background: grey" id="pasteTarget">
    Click and paste here.
  </div>
  <button type="button" name="sub" id="subfile" class="btn btn-primary">Create Tasks</button>
</form>

这是 postfileuploader.php

 <?php

echo $fileName = $_FILES['file'][0]['name'];
echo $fileType = $_FILES['file'][0]['type'];
echo $fileError = $_FILES['file'][0]['error'];
?>

这给了我一个错误注意：未定义的索引：文件在 F:\xampp745\htdocs\xxx\postfileuploader.php 上线

print_r($_POST) 给了我

数组（ [文件] => 数组 （ [0] =>文件信息代码

Answer 1

FileReader.readAsText()

将文件读取为纯文本字符串。您应该使用

FileReader.readAsDataURL()

，以便图像数据可以作为值包含在表单中。您可以在这里阅读更多内容：readAsDataURL