我在here找到了一支笔，我试图将其应用到我的表单中。经过多次尝试，我意识到它仅通过选择文件选项上传图像。如果我尝试拖放文件，则不会发送到我的 php 代码，但如果我使用它来选择文件，我会在服务器端获取文件 我不太擅长js，请帮忙吗？ 下面是我的 php 代码，用于将文件上传到数据库 PHP
if($_POST){
if(isset($_FILES['files']['name'][0]) && $_FILES['files']['size'][0] != 0 && $_FILES['files']['error'][0] == 0)
{
$filesCount = count($_FILES['files']['name']);
for($i = 0; $i < $filesCount; $i++) {
$ext = pathinfo($_FILES['files']['name'][$i], PATHINFO_EXTENSION);
$new_filename = time().$i.'.'.$ext;
move_uploaded_file($_FILES['files']['tmp_name'][$i], '../assets/field-photos/'.$new_filename);
$allfiles[] = $new_filename;
}
$uploaded_img = implode(',',$allfiles);
}
else{
$uploaded_img = '';
}
var_dump($uploaded_img);
}
这是 html 表单
<form action="add-products.php" method="POST" enctype="multipart/form-data">
<input type="text" name="name">
<input type="text" name="lastname">
<input type="text" name="product">
<input type="text" name="city">
<input type="text" name="address">
<label for="photo">UPLOAD Photos</label>
<div id="drop-area">
<div class="my-form-file ">
<input type="file" name="files[]" id="fileElem" multiple accept="image/*" onchange="handleFiles(this.files)">
<label class="button" for="fileElem"><i class="fe fe-upload fe-24 "></i> Select or drag & drop files</label>
</div>
<progress id="progress-bar" max=100 value=0></progress>
<div id="gallery" /></div>
</div>
<button type="submit">Submit</button>
</form>
这是js代码
let dropArea = document.getElementById("drop-area")
// Prevent default drag behaviors
;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, preventDefaults, false)
document.body.addEventListener(eventName, preventDefaults, false)
})
// Highlight drop area when item is dragged over it
;['dragenter', 'dragover'].forEach(eventName => {
dropArea.addEventListener(eventName, highlight, false)
})
;['dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, unhighlight, false)
})
// Handle dropped files
dropArea.addEventListener('drop', handleDrop, false)
function preventDefaults (e) {
e.preventDefault()
e.stopPropagation()
}
function highlight(e) {
dropArea.classList.add('highlight')
}
function unhighlight(e) {
dropArea.classList.remove('active')
}
function handleDrop(e) {
var dt = e.dataTransfer
var files = dt.files
handleFiles(files)
}
let uploadProgress = []
let progressBar = document.getElementById('progress-bar')
function initializeProgress(numFiles) {
progressBar.value = 0
uploadProgress = []
for(let i = numFiles; i > 0; i--) {
uploadProgress.push(0)
}
}
function updateProgress(fileNumber, percent) {
uploadProgress[fileNumber] = percent
let total = uploadProgress.reduce((tot, curr) => tot + curr, 0) / uploadProgress.length
console.debug('update', fileNumber, percent, total)
progressBar.value = total
}
function handleFiles(files) {
files = [...files]
initializeProgress(files.length)
files.forEach(uploadFile)
files.forEach(previewFile)
}
function previewFile(file) {
let reader = new FileReader()
reader.readAsDataURL(file)
reader.onloadend = function() {
let img = document.createElement('img')
img.src = reader.result
document.getElementById('gallery').appendChild(img)
}
}
function uploadFile(file, i) {
var url = 'add-products.php'
var xhr = new XMLHttpRequest()
var formData = new FormData()
xhr.open('POST', url, true)
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest')
// Update progress (can be used to show progress indicator)
xhr.upload.addEventListener("progress", function(e) {
updateProgress(i, (e.loaded * 100.0 / e.total) || 100)
})
xhr.addEventListener('readystatechange', function(e) {
if (xhr.readyState == 4 && xhr.status == 200) {
updateProgress(i, 100) // <- Add this
}
else if (xhr.readyState == 4 && xhr.status != 200) {
// Error. Inform the user
}
})
formData.append('upload_preset', 'ujpu6gyk')
formData.append('file', file)
xhr.send(formData)
}
为了同时提交文本表单数据（姓名、地址等）和多个文件（通过拖放或多选），您可以通过
formData.append所以诀窍是
由于我不知道你如何使用文本数据，所以我通过发送一封电子邮件来演示效果，邮件正文中包含所有数据
因此，使用以下 HTML
<script>
// declare necessary arrays
allfiles = [];
myfile=[];
xfile=[];
xfilename=[];
// initialize / clear all past array data below
allfiles.length = 0;
myfile.length = 0;
xfile.length = 0;
xfilename.length = 0;
var init=0;
var init2=0;
var formData = new FormData();
</script>
<table border=0>
<tr><td>Name: <td><input type="text" name="name" id=name>
<tr><td>Lastname: <td><input type="text" name="lastname" id=lastname>
<tr><td>Product: <td><input type="text" name="product" id=product>
<tr><td>City: <td><input type="text" name="city" id=city>
<tr><td>Address: <td><input type="text" name="address" id=address>
<tr><td colspan=2><input type=button onclick="javascript:uploadFile0();" value="Submit Data">
</table>
<br>
<div id="drop-area">
<p>Upload multiple files with the file dialog or by dragging and dropping images onto the dashed region</p>
<input type="file" id="fileElem" multiple accept="image/*" onchange="handleFiles(this.files)">
<label class="button" for="fileElem">Select some files</label>
<progress id="progress-bar" max=100 value=0></progress>
<div id="gallery" /></div>
</div>
<style>
body {
font-family: sans-serif;
}
a {
color: #369;
}
.note {
width: 500px;
margin: 50px auto;
font-size: 1.1em;
color: #333;
text-align: justify;
}
#drop-area {
border: 2px dashed #ccc;
border-radius: 20px;
width: 480px;
// margin: 50px auto;
padding: 20px;
}
#drop-area.highlight {
border-color: purple;
}
p {
margin-top: 0;
}
.my-form {
margin-bottom: 10px;
}
#gallery {
margin-top: 10px;
}
#gallery img {
width: 150px;
margin-bottom: 10px;
margin-right: 10px;
vertical-align: middle;
}
.button {
display: inline-block;
padding: 10px;
background: #ccc;
cursor: pointer;
border-radius: 5px;
border: 1px solid #ccc;
}
.button:hover {
background: #ddd;
}
#fileElem {
display: none;
}
</style>
<script>
// ************************ Drag and drop ***************** //
let dropArea = document.getElementById("drop-area")
// Prevent default drag behaviors
;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, preventDefaults, false)
document.body.addEventListener(eventName, preventDefaults, false)
})
// Highlight drop area when item is dragged over it
;['dragenter', 'dragover'].forEach(eventName => {
dropArea.addEventListener(eventName, highlight, false)
})
;['dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, unhighlight, false)
})
// Handle dropped files
dropArea.addEventListener('drop', handleDrop, false)
function preventDefaults (e) {
e.preventDefault()
e.stopPropagation()
}
function highlight(e) {
dropArea.classList.add('highlight')
}
function unhighlight(e) {
dropArea.classList.remove('active')
}
function handleDrop(e) {
var dt = e.dataTransfer
var files = dt.files
handleFiles(files)
}
let uploadProgress = []
let progressBar = document.getElementById('progress-bar')
function initializeProgress(numFiles) {
progressBar.value = 0
uploadProgress = []
for(let i = numFiles; i > 0; i--) {
uploadProgress.push(0)
}
}
function updateProgress(fileNumber, percent) {
uploadProgress[fileNumber] = percent
let total = uploadProgress.reduce((tot, curr) => tot + curr, 0) / uploadProgress.length
progressBar.value = total
progressBar.value = 100;
}
function updateProgresscompleted(fileNumber, percent) {
uploadProgress[fileNumber] = percent
let total = uploadProgress.reduce((tot, curr) => tot + curr, 0) / uploadProgress.length
progressBar.value = 100;
}
function handleFiles(files) {
files = [...files]
initializeProgress(files.length)
files.forEach(previewFile)
for(i=0; i < files.length; i++ ) {
allfiles.push(files[i].name);
xfile[init]=files[i];
xfilename[init]=files[i].name;
init++;
}
}
function previewFile(file) {
let reader = new FileReader()
reader.readAsDataURL(file)
reader.onloadend = function() {
let img = document.createElement('img')
img.src = reader.result
document.getElementById('gallery').appendChild(img)
}
}
function uploadFile0()
{
for(i=0; i < init; i++ ) {
init2=i;
uploadFile1();
}
}
function uploadFile1() {
var url = './add-products.php'
var xhr = new XMLHttpRequest()
xhr.open('POST', url, true)
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest')
xhr.upload.addEventListener("progress", function(e) {
updateProgress(init2, (init2 * 100.0 / init) || 100)
})
xhr.addEventListener('readystatechange', function(e) {
if (xhr.readyState == 4 && xhr.status == 200) {
updateProgresscompleted();
var response = xhr.responseText;
// the above is return data from ajax call
}
else if (xhr.readyState == 4 && xhr.status != 200) {
// Error. Inform the user
alert("Upload Error!");
}
})
formData.append('myfile', xfile[init2], xfilename[init2]);
formData.append('init', init2);
formData.append('name', document.getElementById('name').value);
formData.append('lastname', document.getElementById('lastname').value);
formData.append('product', document.getElementById('product').value);
formData.append('city', document.getElementById('city').value);
formData.append('address', document.getElementById('address').value);
xhr.send(formData)
}
</script>
并使用以下 PHP (add-products.php)
<?php
$ext = pathinfo($_FILES['myfile']['name'], PATHINFO_EXTENSION);
$filename = pathinfo($_FILES['myfile']['name'], PATHINFO_FILENAME);
$new_filename = $filename . "_". time() . '_.' . $ext;
if (copy($_FILES['myfile']['tmp_name'],'./upload/'. $new_filename ) ) {
echo "File Uploaded: " . $_FILES['myfile']['name'] ;
}
if ($_POST["init"]==0)
{
$to = "[email protected]";
$subject = "Stackoverflow TEST" ;
$txt = "";
$txt .= "Name:" . $_POST["name"] . "\n";
$txt .= "LastName:" . $_POST["lastname"] . "\n";
$txt .= "Product:" . $_POST["product"] . "\n";
$txt .= "City:" . $_POST["city"] . "\n";
$txt .= "Address:" . $_POST["address"] . "\n";
$headers = "From: [email protected]" . "\r\n" ;
mail($to,$subject,$txt,$headers);
}
?>