非常感谢您阅读和回答我们的问题。你看，我们有一个简单的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("Data: " + data);的console.log进行ajax响应后，我收到以下错误
未捕获的ReferenceError：iframe未在以下位置定义：1：23（匿名）@ VM407：1 2VM408：1未捕获的SyntaxError：JSON.parse（）在XMLHttpRequest.ajax.onload（index.php：367）处的JSON输入的意外结束< / p>
index.php第367行是`form.classList.add（data.success == true？'is-success'：'is-error'）;
答案 0 :(得分：-1)
抱歉，我没有足够的评分来评论所以我必须在这里输入一条消息，您是否尝试在控制台中记录Ajax请求中的响应内容？从我可以看到你的表单依赖于响应，如果你没有收到回复，你的错误可能在你发送到的文件中。也许你没有回应json_encode？