如何在上传文件时调整警报框和确认框的此代码

时间:2012-02-29 20:05:53

标签: php javascript

我有一个应用程序here,其中应用程序的代码如下:

<script type="text/javascript">


var qnum = 1;

function insertQuestion(form) {   


    var $tbody = $('#qandatbl > tbody'); 
    var $tr = $("<tr class='optionAndAnswer' align='center'></tr>");
    var $qid = $("<td class='qid'>" + qnum + "</td>");
    var $image = $("<td class='image'></td>");


            var $imagefile = $('<input />')
        .attr({
            type: 'file',
            name: 'imageFile',
            class: 'imageFile'
        });

        $image.append($imagefile);

            var $imageclear = $('<input />')
        .attr({
            type: 'button',
            name: 'imageClear',
            class: 'imageClear',
            value: 'Clear File'
        });

        $image.append($imageclear);


    $tr.append($qid);
    $tr.append($image);   
    $tbody.append($tr); 

}


function validation() {


    var alertValidation = "";
    // Note, this is just so it's declared...


    if (alertValidation != "") {
        alert(_alertValidation);
        return false;
    }

    return true;
}

             function showConfirm(){

         var confirmMsg=confirm("Make sure that your details are correct, once you proceed after this stage you would not be able to go back and change any details towards Questions, Options and Answers for your Session." + "\n" + "\n" + "Are you sure you want to Proceed?" + "\n" );

         if (confirmMsg==true)
         {
         submitform();   
     }
}

            function submitform()
            {

        var sessionMarksO = document.getElementById("sessionMarks");

          sessionMarksO.submit();

            }


</script>

</head>

<body>

<form id="enter" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" onsubmit="return validateForm(this);" >
<div id="detailsBlock">


<table id="questionBtn" align="center">
<tr>
<th>
<input id="addQuestionBtn" name="addQuestion" type="button" value="Add Question" onClick="insertQuestion(this.form)" />
</th>
</tr>
</table>

</div>
<hr/>

<div id="details">
<table id="qandatbl" align="center">
<thead>
<tr>
    <th class="qid">Question No</th>
    <th class="image">Image</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>

</form> 


<form action="session_marks.php" method="post" id="sessionMarks">

<p><input id="submitBtn" name="submitDetails" type="submit" value="Submit Details" onClick="myClickHandler(); return false;" /></p>

</form>

         <script type="text/javascript">

function myClickHandler(){
     if(validation()){
                showConfirm();
     }
}

</script>



</body>
</html>

在应用程序中,单击“添加问题”按钮,将添加新的表格行。现在选择一个文件并单击“提交”,将出现确认框。

现在我要做的是以下内容:

我想在下面的代码中包含此代码,该应用程序通过服务器端检查文件格式和文件限制:

<?php
    if(isset($_POST["submit"])){
        $allowedtypes=array("jpg"=>true,"png"=>true,"gif"=>true,"txt"=>true);
        $filename = $_FILES['imageFile']['name'];  
        $source = $_FILES['imageFile']['tmp_name'];  
        $file_size=$_FILES['imageFile']['size'];
        $saveloc = "uploads/" . $filename;
        $maxfilesize=1024*1024*10;
        $nameext=explode(".",$filename);
        if(preg_match('/^[A-Za-z0-9\-\_]{1,}\.[a-zA-Z0-9]{0,4}$/',$filename)){
            if(!empty($allowedtypes[strtolower($nameext[1])]) && $allowedtypes[strtolower($nameext[1])]===true){
                if($file_size<=$maxfilesize){
                    if(!file_exists($saveloc)){
                        if(move_uploaded_file($source, $saveloc)) { 
                            chmod($saveloc,644);
                            echo "Successful upload. <a href='".$saveloc."'>Fájl megtekintése</a>";
                        }
                        else echo "<scirpt type='text/javascript'>alert('Cannot move');</script>";
                    }
                    else echo "<scirpt type='text/javascript'>alert('Existing file');</script>";
                }
                else echo "<scirpt type='text/javascript'>alert('Too big File');</script>";

            }
            else echo "<scirpt type='text/javascript'>alert('Not allowed extension');</script>";
        }
        else echo "<scirpt type='text/javascript'>alert('Only alphanumeric files allowed');</script>";

?>

我想知道的是如何调整代码,以便在文件无效时通过validation()函数显示警告,如果文件有效,则应显示当前的确认消息通过myClickHandler()函数显示?

由于

1 个答案:

答案 0 :(得分:0)

听起来你可能正在将服务器端和客户端混合在一起。 Javascript是一种客户端语言,这意味着它可以在用户的​​计算机上,在浏览器中运行。 PHP是一种服务器端语言,这意味着它可以在您的网络服务器上运行,您的用户可以通过它发送回浏览器的网页查看它。

现在,问题是你想在Javascript中做一些只能在PHP中完成的事情:验证文件。 Javascript永远不会这样做,因为浏览器制造商已经严格限制,以防止JS访问您计算机上的文件(这样任何恶意网站都不会窃取您的个人文件)。但是,您希望在文件上传之前提示您的用户,并且不可能(没有浏览器插件或其他内容)这样做。

您可以做的是使用旧式的AJAX秘密地将文件发送到您的服务器,以便您可以对其进行验证,然后查看返回的响应以决定告诉用户的内容。我不能为你编写所有代码,但它的基本要点是:

  • 将您的文件输入放在一个特殊的表单中,该表单以隐藏的iframe
  • 为目标

例如:

<iframe id="foo"></iframe>
<form id="bar" target="foo" action="yourServerFile.php">
    <input type="file" id="baz"/>
</form>
  • 使用您想要的服务器端逻辑将文件(例如“yourServerFile.php”)添加到您的服务器

  • 将onReady处理程序添加到隐藏的IFRAME(例如$(“#foo”)。ready(function()...);当它触发时,它应该查看IFRAME的html,并且然后根据它在那里看到的内容(或不是)适当地提醒用户

完成所有这些后,基本流程应为:

  1. 用户点击文件输入并选择文件
  2. 用户点击提交按钮,或点击输入(或者您可以在文件输入中添加onBlur处理程序以使其触发表单提交)
  3. 文件被发送到服务器(特别是发送到yourServerFile.php或其他任何名称)
  4. 服务器查看该文件,判断其是否有效,并在响应中打印出它是否有效(这是您问题的PHP行所在的位置)
  5. 当该响应从服务器返回到隐藏的iframe时,它会触发您的onReady处理程序
  6. 你的onReady处理程序查看隐藏的iframe的html,并获取服务器想要发回的任何验证消息(步骤4)
  7. 现在您的onReady处理程序知道文件是否已经过验证,它可以正确地通知用户。
  8. 希望有所帮助。