我发现了一个笔here，我试图实现到我的表格.经过这么多次try ，我意识到它只上传图像通过 Select 文件选项只.如果我try 拖放文件不会发送到我的php代码，但如果我使用它一个 Select 文件，我得到的文件在服务器端. 我不是很擅长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)
}
