我有代码,可以将图像剪切并粘贴到 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>
<?php
echo $fileName = $_FILES['file'][0]['name'];
echo $fileType = $_FILES['file'][0]['type'];
echo $fileError = $_FILES['file'][0]['error'];
?>
this gives me an error Notice: Undefined index: file in F:\xampp745\htdocs\xxx\postfileuploader.php on line
print_r($_POST) 给了我
Array ( [file] => Array ( [0] =>file information code
最佳答案
FileReader.readAsText()
将文件读取为纯文本字符串。您应该使用 FileReader.readAsDataURL()
以便图像数据可以作为值包含在表单中。您可以在这里阅读更多信息:readAsDataURL
关于javascript - 剪切并粘贴图像文件并将其上传到表单提交中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/77569692/