我尝试使用AJAX在textarea中上传文件和一些文本。我在接收数据的PHP页面中收到以下错误:
注意:未定义索引:文件/路径中的guion /此处第X行
表示该文件未被发送。尝试var_dump $_FILES
并输出:
array(0) { }
HTML代码:
<div id="_AJAX_"></div>
<div role="form">
<div id="fileGuionGroup" class="form-group">
<label for="guion">Archivo Guión</label>
<input id="fileGuion" type="file" name="guion">
</div>
<div id="txtComentarioGroup" class="form-group">
<label for="comentario">Comentario</label>
<textarea id="txtComentario" class="form-control" name="comentario" rows="4" placeholder="Ejemplo: Solicito que por favor se monte este curso en plataforma."></textarea>
</div>
</div>
<button id="send_request" type="button" class="btn btn-primary btn-block" onclick="submitSolicitud(`{$cursoKey}`)"><i class="fa fa-fw fa-cogs"></i> Solicitar Montaje</button>
Javascript代码:
function submitSolicitud(cursoKey) {
var fileGuion = document.getElementById('fileGuion');
var txtComentario = document.getElementById('txtComentario');
var formGroupGuion = document.getElementById('fileGuionGroup');
var formGroupComentario = document.getElementById('txtComentarioGroup');
formGroupGuion.className = "form-group";
formGroupComentario.className = "form-group";
var guion = fileGuion.value;
var comentario = txtComentario.value;
var formData = new FormData();
formData.append('guion', guion);
formData.append('comentario', comentario);
connect = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
connect.onreadystatechange = function () {
onRSCallback(cursoKey);
};
connect.open('POST', '?view=modalsMatriz&modal=montaje&id=' + cursoKey + '&action=solicitarMontaje', true);
connect.setRequestHeader("Content-Type", "multipart/form-data");
connect.setRequestHeader("X-File-Name", guion.name);
connect.setRequestHeader("X-File-Size", guion.size);
connect.setRequestHeader("X-File-Type", guion.type);
connect.send(formData);
};
PHP代码:
case 'solicitarMontaje':
// This is the line that has the error of undefined index.
die($_FILES['guion']);
try {
if (!isset($_FILES['guion'])) {
# Code 1: Archivo Guión Field vacía
throw new Exception(1);
} elseif (!isset($_POST['comentario']) || $_POST['comentario'] == "") {
# Code 2: Comentario Field vacío
throw new Exception(2);
}
$tmp_file = $_FILES['guion']['tmp_name'];
$filename = $_FILES['guion']['name'];
move_uploaded_file($tmp_file, 'uploads/guiones/'.$filename);
die(0);
//$curso->crearSolicitudMontaje($_POST['comentario']);
} catch (Exception $e) {
# Output message to the screen so that Ajax captures it via connect.responseText @curso_FormMontaje.js
echo $e->getMessage();
}
break; # ./ case 'solicitarMontaje'
我已经使用FormData()
和Content-Type multipart/form-data
尝试了它,但它根本不起作用。相反,它使页面嵌入_AJAX_
div中,显示从服务器返回的消息(例如成功消息,某些字段的错误,即发送为空的字段)。< / p>
这是我在点击提交按钮时使用FormData
得到的结果:
答案 0 :(得分:0)
这是一个非常简单的表单数据示例,给出了您提供的内容:
<script>
$(document).ready(function(){
// I don't know what your form is called...
$('.uploader').submit(function(e) {
// Clone the file input
var getFileInput = $("#fileGuion").clone();
// Stop form from submitting
e.preventDefault();
$.ajax({
url:'/url/to/ajax/dispatcher.php',
// Use FormData object, pass form
data: new FormData($(this)[0]),
processData: false,
contentType: false,
type: 'post',
success: function(response) {
// Put html back into placeholder
$('#_AJAX_').html(response);
// Replace the input
$("#fileGuion").replaceWith(getFileInput);
}
});
});
});
</script>
<div id="_AJAX_"></div>
<form class="uploader">
<label for="guion">Archivo Guión</label>
<input id="fileGuion" type="file" name="guion">
<label for="comentario">Comentario</label>
<textarea id="txtComentario" class="form-control" name="comentario" rows="4" placeholder="Ejemplo: Solicito que por favor se monte este curso en plataforma."></textarea>
<label>
<input type="checkbox" id="ackCheckbox"> <i>He revisado y estoy seguro de continuar con esta acción.</i>
</label>
<input type="submit" value="Upload">
</form>
答案 1 :(得分:0)
原来导致问题的是HTTP标头( setRequestHeader )。我删除了它们并稍微编辑了代码,这就是现在看起来完全正常运行的内容:
JavaScript代码:
function submitSolicitud(cursoKey) {
var fileGuion = document.getElementById('fileGuion');
var txtComentario = document.getElementById('txtComentario');
var guion = fileGuion.files[0];
var comentario = txtComentario.value;
var formData = new FormData();
formData.append('guion', guion);
formData.append('comentario', comentario);
connect = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
connect.onreadystatechange = function () {
onRSCallback(cursoKey);
};
connect.open('POST', '?view=modalsMatriz&modal=montaje&id=' + cursoKey + '&action=solicitarMontaje', true);
connect.send(formData);
};
正如预期的那样,PHP可以识别数据如下:
文件“ guion ”进入PHP的$ _FILES数组($_FILES['guion']
)。
“ comentario ”字段(textarea)在PHP的$ _POST数组($_POST['comentario']
)内发送。
最后, HTML 和 PHP 代码保持不变,结论是,如果不设置HTTP标头,它们似乎会自动采用正确的值,以便请求正确处理。