Question

我试图了解错误......

我有一个允许用户上传CSV的网络应用。如果文件类型不是CSV，则不会发生任何事情，页面只显示＆＃34;无效的文件类型。＆＃34;

如果用户尝试上传无效的文件类型并反复单击触发处理上传的PHP文件的按钮，则PHP文件最终会无响应，并且网站崩溃时出现以下错误：

"tcp_error: The Web Server may be down, too busy, or experiencing other problems preventing it from responding to requests. You may wish to try again at a later time"

我认为这与它是一个持久的HTTP连接以及它被请求淹没的事实有关吗？

如果用户反复尝试上传无效的文件类型，我想知道这个的确切来源以及避免崩溃的最佳修复方法。

HTML摘录：

<script type="text/javascript">
        function stopUpload(success){
              console.log(success);
              var csv1 = success['csv1'];
              var csv2 = success['csv2'];
              var csv3 = success['csv3'];
              var csv4 = success['csv4'];
              var csvError = success['error'];
              var id = success['id'];
              $('.js-wf-error').text(csvError);
              if (!csvError) {
                runWF(id, csv1, csv2, csv3, csv4);
              }
        }
</script>

<iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid

<form id="wf-form" class="js-wf-form" method="post" action="wf/csv-upload.php" enctype="multipart/form-data" target="upload_target">
    <input type="file" name="csv1" value="" class="text ui-widget-content ui-corner-all csv-upload" />
    <input type="file" name="csv2" value="" class="text ui-widget-content ui-corner-all csv-upload" />
    <input type="file" name="csv3" value="" class="text ui-widget-content ui-corner-all csv-upload" />
    <input type="file" name="csv4" value="" class="text ui-widget-content ui-corner-all csv-upload" />
  <a  href="#" onclick="$(this).closest('form').submit(); return false;" type="submit"class="button redButton largeButton run-wf-button">Run Walking Farm</a>
</form>

CSV-upload.php的

(...upload handling...)
?>
<script language="javascript" type="text/javascript">
    window.top.window.stopUpload(<?php print json_encode($returnData); ?>);
</script>

Answer 1

尝试给它一个镜头。它可以工作，但不能保证：通过html表单上传文件时，可能需要几秒钟才能成功上载表单并显示响应页面（PHP）。人们可能会感到不耐烦，并多次单击“上传”按钮，这可能导致重复的表单提交或上传。通常它确实是一个问题＆amp;你可能希望防止这种情况发生。您可以使用javascript来处理它：第一步是为您的提交按钮提供唯一ID，例如id =＆＃34; myButton＆＃34;：

<input type="submit" value="Submit" id="myButton" />

第二步（也是最后一步）是给标签提供两个Javascript命令。第一个将告诉浏览器在提交表单后禁用提交按钮，第二个将更改按钮文本以让用户了解发生了什么。这是要添加到表单标记的代码：

onsubmit="document.getElementById('myButton').disabled=true;

document.getElementById('myButton').value='Uploading to  server, please wait...';"

您的表单标签看起来像是：

<form action="wf/cs-vupload.php" method="post"
onsubmit="document.getElementById('myButton').disabled=true;
document.getElementById('myButton').value='Uploading to  server,please wait...';"

>

那就是它。这个技巧应该适用于大多数现代浏览器（IE 5 +，FireFox，Opera，...）。

还有一种使用Cookie的方法，这些快速修复可以防止多次提交表单。请尝试以下链接：http://myphpform.com/prevent-multiple-form-submissions.php

是的，我错过了一些事情，知道它是否属实。

Answer 2

我觉得浏览器超时是因为你的服务器忙于处理所有其他（上传）请求。

有一个名为one()的jQuery方法只执行一次事件，这应该可以很好地解决这个问题。

例如：

<form id="wf-form" class="js-wf-form" method="post" action="wf/csv-upload.php" enctype="multipart/form-data" target="upload_target">
    <input type="file" name="csv1" value="" class="text ui-widget-content ui-corner-all csv-upload" />
    <input type="file" name="csv2" value="" class="text ui-widget-content ui-corner-all csv-upload" />
    <input type="file" name="csv3" value="" class="text ui-widget-content ui-corner-all csv-upload" />
    <input type="file" name="csv4" value="" class="text ui-widget-content ui-corner-all csv-upload" />
  <a  href="#" id="submit_link" type="submit"class="button redButton largeButton run-wf-button">Run Walking Farm</a>
</form>

<script type="text/javascript">
    $("#submit_link").one( "click", function() {
        $("#wf-form").submit();
    });
</script>

为了完整起见：如果它不是一个链接而是一个按钮，你可以简单地在onClick事件中禁用提交按钮（在submit()之后），以禁止多次提交文件。

Answer 3

您可以将XMLHttpRequest Javascript类用于ajax上传文件，将FormData用于表单类。

<iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>

    <form id="wf-form" class="js-wf-form" method="post" action="wf/csv-upload.php" enctype="multipart/form-data" target="upload_target">
        <input type="file" name="csv1" value="" class="text ui-widget-content ui-corner-all csv-upload" />
        <input type="file" name="csv2" value="" class="text ui-widget-content ui-corner-all csv-upload" />
        <input type="file" name="csv3" value="" class="text ui-widget-content ui-corner-all csv-upload" />
        <input type="file" name="csv4" value="" class="text ui-widget-content ui-corner-all csv-upload" />
<input type="hidden" value="1000000" name="MAX_FILE_SIZE">
      <a  href="#" onclick="fcsvUpload(); return false;" type="submit"class="button redButton largeButton run-wf-button">Run Walking Farm</a>
    </form>

    <script type="text/javascript">

         function fcsvUpload(){
            var oData = new FormData(document.getElementById("wf-form"));
            var result = true;



            var oReq = new XMLHttpRequest();
            oReq.open("POST", "wf/csv-upload.php", false);

            oReq.send(oData);

            if (oReq.status === 200) {
                return result;
            } else {
                return result;
            }
        });
    </script>

你在iframe的html行中有错误。 iframe标签未关闭。也许是因为它不起作用。看：

<iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid

用户反复尝试上载无效文件类型时，站点崩溃

3 个答案: