非常感谢您阅读并回答我们的问题。你看，我们有一个简单的 html 表单，操作链接到上传文件的 php，php 按工作顺序进行验证，表单具有 encytype multipart/form-data 和文件的输入类型，如果您选择，一切都会正常工作表单上带有按钮的文件 没有 随后的拖放脚本 我们必须具有拖放功能，我们已经使用它一点一点地分解了脚本，文件将立即上传是一个整体，它不会运行 php，因此即使单击按钮添加文件也不起作用。它破坏了整个事情。如果您需要我添加所有内容，我会添加，但错误必须来自此脚本，而不是来自其他部分，因为它可以在没有脚本的情况下工作，但我们无法拖放任何内容，代码再次如下 从 html 开始，以破坏它的脚本结束。
<div class="container" role="main">
<form action="upload.php" method="POST" enctype="multipart/form-data" class="box">
<div class="box__input">
<svg class="box__icon" xmlns="http://www.w3.org/2000/svg" width="50" height="43" viewBox="0 0 50 43">
<path d="M48.4 26.5c-.9 0-1.7.7-1.7 1.7v11.6h-43.3v-11.6c0-.9-.7-1.7-1.7-1.7s-1.7.7-1.7 1.7v13.2c0 .9.7 1.7 1.7 1.7h46.7c.9 0 1.7-.7 1.7-1.7v-13.2c0-1-.7-1.7-1.7-1.7zm-24.5 6.1c.3.3.8.5 1.2.5.4 0 .9-.2 1.2-.5l10-11.6c.7-.7.7-1.7 0-2.4s-1.7-.7-2.4 0l-7.1 8.3v-25.3c0-.9-.7-1.7-1.7-1.7s-1.7.7-1.7 1.7v25.3l-7.1-8.3c-.7-.7-1.7-.7-2.4 0s-.7 1.7 0 2.4l10 11.6z"/>
</svg>
<input type="file" name="file" class="box__file">
<label for="file">
<strong>Choose a file</strong>
<span class="box__dragndrop">or drag it here</span>
.
</label>
<button type="submit" name="submit" class="box__button">
UPLOAD
</button>
</div>
</form>
</div>
'use strict';
;
(function(document, window, index) {
// feature detection for drag&drop upload
var isAdvancedUpload = function() {
var div = document.createElement('div');
return (('draggable' in div) || ('ondragstart' in div && 'ondrop' in div)) && 'FormData' in window && 'FileReader' in window;
}();
// applying the effect for every form
var forms = document.querySelectorAll('.box');
Array.prototype.forEach.call(forms, function(form) {
var input = form.querySelector('input[type="file"]'),
label = form.querySelector('label'),
errorMsg = form.querySelector('.box__error span'),
restart = form.querySelectorAll('.box__restart'),
droppedFiles = false,
showFiles = function(files) {
label.textContent = files.length > 1 ? (input.getAttribute('data-multiple-caption') || '').replace('{count}', files.length) : files[0].name;
},
triggerFormSubmit = function() {
var event = document.createEvent('HTMLEvents');
event.initEvent('submit', true, false);
form.dispatchEvent(event);
};
// letting the server side to know we are going to make an Ajax request
var ajaxFlag = document.createElement('input');
ajaxFlag.setAttribute('type', 'hidden');
ajaxFlag.setAttribute('name', 'ajax');
ajaxFlag.setAttribute('value', 1);
form.appendChild(ajaxFlag);
// automatically submit the form on file select
input.addEventListener('change', function(e) {
showFiles(e.target.files);
});
// drag&drop files if the feature is available
if (isAdvancedUpload) {
form.classList.add('has-advanced-upload');
// letting the CSS part to know drag&drop is supported by the browser
['drag', 'dragstart', 'dragend', 'dragover', 'dragenter', 'dragleave', 'drop'].forEach(function(event) {
form.addEventListener(event, function(e) {
// preventing the unwanted behaviours
e.preventDefault();
e.stopPropagation();
});
});
['dragover', 'dragenter'].forEach(function(event) {
form.addEventListener(event, function() {
form.classList.add('is-dragover');
});
});
['dragleave', 'dragend', 'drop'].forEach(function(event) {
form.addEventListener(event, function() {
form.classList.remove('is-dragover');
});
});
form.addEventListener('drop', function(e) {
droppedFiles = e.dataTransfer.files;
// the files that were dropped
showFiles(droppedFiles);
});
}
// if the form was submitted
form.addEventListener('submit', function(e) {
// preventing the duplicate submissions if the current one is in progress
if (form.classList.contains('is-uploading'))
return false;
form.classList.add('is-uploading');
form.classList.remove('is-error');
if (isAdvancedUpload) // ajax file upload for modern browsers
{
e.preventDefault();
// gathering the form data
var ajaxData = new FormData(form);
if (droppedFiles) {
Array.prototype.forEach.call(droppedFiles, function(file) {
ajaxData.append(input.getAttribute('name'), file);
});
}
// ajax request
var ajax = new XMLHttpRequest();
ajax.open(form.getAttribute('method'), form.getAttribute('action'), true);
ajax.onload = function() {
form.classList.remove('is-uploading');
if (ajax.status >= 200 && ajax.status < 400) {
var data = JSON.parse(ajax.responseText);
form.classList.add(data.success == true ? 'is-success' : 'is-error');
if (!data.success)
errorMsg.textContent = data.error;
} else
alert('Error. Please, contact the webmaster!');
};
ajax.onerror = function() {
form.classList.remove('is-uploading');
alert('Error. Please, try again!');
};
ajax.send(ajaxData);
} else // fallback Ajax solution upload for older browsers
{
var iframeName = 'uploadiframe' + new Date().getTime(),
iframe = document.createElement('iframe');
$iframe = $('<iframe name="' + iframeName + '" style="display: none;"></iframe>');
iframe.setAttribute('name', iframeName);
iframe.style.display = 'none';
document.body.appendChild(iframe);
form.setAttribute('target', iframeName);
iframe.addEventListener('load', function() {
var data = JSON.parse(iframe.contentDocument.body.innerHTML);
form.classList.remove('is-uploading')
form.classList.add(data.success == true ? 'is-success' : 'is-error')
form.removeAttribute('target');
if (!data.success)
errorMsg.textContent = data.error;
iframe.parentNode.removeChild(iframe);
});
}
});
// restart the form if has a state of error/success
Array.prototype.forEach.call(restart, function(entry) {
entry.addEventListener('click', function(e) {
e.preventDefault();
form.classList.remove('is-error', 'is-success');
input.click();
});
});
// Firefox focus bug fix for file input
input.addEventListener('focus', function() {
input.classList.add('has-focus');
});
input.addEventListener('blur', function() {
input.classList.remove('has-focus');
});
});
}(document, window, 0));
在被请求使用 var data = JSON.parse(iframe.contentDocument.body.innerHTML); 运行 console.log 后； console.log("Data: "+ data); 对于ajax响应，我收到以下错误
未捕获的 ReferenceError:iframe 未定义于:1:23(匿名)@ VM407:1 2VM408:1 未捕获的语法错误:XMLHttpRequest.ajax.onload (index.php:367) 处的 JSON.parse () 处的 JSON 输入意外结束/p>
index.php 第 367 行是 ` form.classList.add(data.success == true ? 'is-success' : 'is-error');
最佳答案
抱歉，我没有足够的分数来发表评论，所以我不得不在此处输入一条消息，您是否尝试过在控制台中记录来自 Ajax 请求的响应内容？据我所知，您的表单依赖于响应，如果您没有收到响应，则错误可能出现在您发送到的文件中。也许你还没有 echo'd json_encode ？
关于javascript - 为什么拖放 Js 会破坏 php 文件的上传过程？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49761785/