Question

我想通过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";
  }
?>

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

Answer 1

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

因为类型是提交而且它是在形式中它正在执行按钮类型的默认功能提交而不是ajax

Answer 2

您可以将您的js代码更改为：

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

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

Answer 3

如果您想实现这一目标，可以在现代浏览器的客户端尝试此操作。这对我来说可以。在W3c File对象中，从Blob继承属性＆＃39; size＆＃39;。 https://www.w3.org/TR/FileAPI/#dfn-Blob

在Chrome上次更新中测试过。

<!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>

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

3 个答案: