如何通过jquery ajax发布表单数据时从php检索回显数据

How to retrieve echoed data from php when posting form data via jquery ajax?

本文关键字：数据 php 检索 表单 ajax jquery 何通过 布表单      更新时间：2023-09-26

我想通过ajax将文件从文件输入表单传递到php脚本，并处理我的php脚本回显的消息。
这是我的 html 表单：

<form id="fileUploadForm"  method="POST" enctype="multipart/form-data">
  <input name="fileToUpload" id="fileToUpload" type="file">
  <button type="submit" name="submit" id="submit">Upload</button>
</form>

我的JS代码：

$('#submit').click(function() {
  var file_data = $('#fileToUpload').prop('files')[0];
  var form_data = new FormData();
  form_data.append('fileToUpload', file_data);
  $.ajax({
    url: 'form.php',
    dataType: 'text',
    data: form_data,
    processData: false,
    contentType: false,
    type: 'post',
    success: function(data) {
      alert(data);
    },
});

和我的（简化）PHP 脚本：

<?php
  //some code
  if(fileTooLarge){
    echo "Your file is too large!";
  }
  if(success){
    echo "Your file has been uploaded";
  }
?>

我想要实现的是，如果文件上传成功或文件太大/扩展名错误，用户会收到一条消息，而无需重新加载页面。

<button type="submit" name="submit" id="submit">Upload</button>将type更改为按钮

  1. 因为类型是提交并且它是形式上的，所以它正在执行按钮类型提交的默认功能，而不是 ajax 默认函数
您可以将

JS代码更改为：

$('#submit').click(function(evt) {
evt.preventDefault();
...

或者，您可以将输入类型更改为按钮而不是提交

如果你想实现这一点，你可以在现代浏览器中的客户端尝试这个。它对我来说效果很好。在 W3c 文件中，对象从 Blob 继承属性"size"。https://www.w3.org/TR/FileAPI/#dfn-Blob

在铬上上次更新中测试。

<!DOCTYPE html>
<html>
<head>
    <title>InputFileTest</title>
    <!--<script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
    <script type="text/javascript" src="inputFile.js"></script>!-->
    <script type="text/javascript">
        function validateSize(pFile){
            if (pFile.files[0].size > 9999999999999) {
                alert("Your file is not valid, it exceed our limit!")
                return false
            } 
            return true
        }
        function validateExtension(pFile){
            var fileName = pFile.files[0].name;
            var extension = "";
            for (var i = fileName.length - 1; i >= 0; i--) {
                if (fileName[i] == ".") {
                    break
                } else {
                    extension = fileName[i] + extension;
                }
            }
            if (extension == "bmp") {
                alert("Extension not permited!")
                return false;
            }
            return true;
        }
        function validatingFile(){
            var file = document.getElementsByClassName("file")[0];
            if (file.files.length > 0) {
                valid = validateSize(file);
                valid = validateExtension(file);
                if (valid) {
                    alert("Upload it!");
                }
            } else {
                alert("Select a valid file!");
            }
        }
    </script>
</head>
<body>
    <input type="file" name="file" class="file">
    <button onclick="validatingFile()">Sumit</button>
</body>
</html>
相关文章：