两个不同的表单通过PHP和AJAX只执行一次POST - Two distinct forms doing just one POST through PHP and AJAX

Two distinct forms doing just one POST through PHP and AJAX

我制作了两个页面，每个页面都有一个form通过指向save.php的ajax脚本向localhost发送选定的图像(包含重命名，重新分配和使用目标文件夹/filename更新MySQL的代码)。

第一种形式可以正常工作。但是当第二个页面加载并且文件被选中时，什么也没有发生。就像我不能两次使用$_FILES变量一样。

这里是第一页的html(第二页是相同的，但我把f_chassi改为f_nmotor .

$(document).ready(function(){
$("#btn").on('click', function(){
var data = new FormData();
data.append('f_chassi', $('#f_chassi')[0].files[0]);
$.ajax({
url: 'salvar.php',
data: data,
processData: false,
contentType: false,
type: 'POST',
});
});
});

function filePreview(input) {
if (input.files) {
var reader = new FileReader();
reader.onload = function (e) {
$('#fotoPreview + img').remove();
$('#fotoPreview').before('<center><img src="'+e.target.result+'" width="75%"/></center>');
}
reader.readAsDataURL(input.files[0]);
}
}
$("#f_chassi").change(function () {
filePreview(this);
});

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<body>
<div id="wrapper">
<div class="titulo">O.S. <?php echo $_SESSION['novaOS']; ?></div>
<div id="novaos">
<div class="subtitulo">
<?php
echo "Placa: <i>".$_SESSION['placa']."</i>";
?>
</div>
<div class="subtitulo">FOTO CHASSI</div>
<form method="post" enctype="multipart/form-data" id="fotoPreview" action="fotoNumMotor.php">
<input type="file" name="f_chassi" id="f_chassi" accept="image/*" capture="camera">
<button type="button" id="btn">SALVAR</button>
<div>
<input type="submit" value="PRÓXIMA">
</div>
</form>
</div>
</div>
</body>

save.php代码:

<?php   
if (!empty($_FILES['f_chassi'])){
    $dir_img = "../uploads/fotos/";
    $prefix  = time()."_";
    $fn  = $prefix."chassi_".$_FILES['f_chassi']['name'];
    $src = $dir_img.$fn;
    move_uploaded_file ($_FILES['f_chassi']['tmp_name'], $src);
    $chassi = $src;
    mysql_query ("UPDATE imagens SET chassi='$chassi' WHERE                 idp='".$_SESSION['novaOS']."'");
}
if (!empty($_FILES['f_nmotor'])){
    $dir_img = "../uploads/fotos/";
    $prefix  = time()."_";
    $fn  = $prefix."nmotor_".$_FILES['f_nmotor']['name'];
    $src = $dir_img.$fn;
    move_uploaded_file ($_FILES['f_nmotor']['tmp_name'], $src);
    $nmotor = $src;
    mysql_query ("UPDATE imagens SET nmotor='$nmotor' WHERE idp='".$_SESSION['novaOS']."'");
}?>

我解决了这个问题，改变脚本如下:

<script type="text/javascript">
$(function(){
$('form').submit(function(){
var dados = new FormData();
dados.append('fotoNumMotor', $('#f_nmotor').prop('files')[0]);
$.ajax({
url: 'salvar.php',
data: dados,
type: 'POST',
processData: false,
cache: false,
contentType: false
});
});
});
</script>

同时，感谢@JeremyHarris让我注意到.append变量