jquery 的ajax无刷新上传文件之后,页面还是会莫名的刷新-----解决办法

Posted 牛顿的小脑

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery 的ajax无刷新上传文件之后,页面还是会莫名的刷新-----解决办法相关的知识,希望对你有一定的参考价值。

文件上传用到全局数组: $_FILES

 

只需要把下面的 <button onclick="post()">提交</button> 改为 <input type="button" onclick="post()" value="提交"/>就不会刷新页面了!!!

参考 http://bbs.csdn.net/topics/391852021

 

what fuck ... sb html   我在那愣是提交了半个小时,还是一直刷新,找不到问题所在。 原因是我的提交按钮用的是button标签,后来改成了 <input type="button"> 就尼玛可以了   真是无语了

 

file.html

<html>
<head>
<meta content="" charset="UTF-8"/>
 <script src="./jquery.js"></script>
 </head>
 <form enctype="multipart/form-data" enctype="multipart/form-data">
     请选择文件<input type="file" name="file"/>
     <button onclick="post();">提交</button>
 </form>
 <script>
    function post() {
        alert("in post");
        var formData = new FormData();
        //var formData = new FormData($("form")[0]);
        formData.append(\'file\', $(\'input[name=file]\')[0].files[0]);
        $.ajax({
            url: \'./file.php\',
            type: \'POST\',
            cache: false,
            data: formData,
            processData: false,
            contentType: false,
            async: true 
        }).success(function(){
            alert("success!");
            }).error(function(){
                alert("error");
                }); 
            
    }   

</script>
</html>

  

file.php

<?php
file_put_contents("./a.txt", var_export($_FILES, true));
//var_dump($_FILES);exit;


if ((($_FILES["file"]["type"] == "image/gif")
        || ($_FILES["file"]["type"] == "image/jpeg")
        || ($_FILES["file"]["type"] == "text/plain"))
        && ($_FILES["file"]["size"] < 20000))
{

    file_put_contents("./a.txt", "\\n in \\n", FILE_APPEND);
    if ($_FILES["file"]["error"] > 0)
    {   
        echo "Return Code: " . $_FILES["file"]["error"] . "<br />";
    }   
    else
    {   

        file_put_contents("./a.txt", "\\n in else\\n", FILE_APPEND);
/*        echo "Upload: " . $_FILES["file"]["name"] . "<br />";
        echo "Type: " . $_FILES["file"]["type"] . "<br />";
        echo "Size: " . ($_FILES["file"]["size"] / 1024) . " Kb<br />";
        echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br />";
 */

        if (file_exists( $_FILES["file"]["name"]))
        {   
   //         echo $_FILES["file"]["name"] . " already exists. ";
            file_put_contents("./a.txt", "\\n already exists \\n", FILE_APPEND);
        }   
          else
        {   
            file_put_contents("./a.txt", "\\n in create file \\n", FILE_APPEND);
            move_uploaded_file($_FILES["file"]["tmp_name"],
                                $_FILES["file"]["name"]);
     //       echo "Stored in: " . $_FILES["file"]["name"];
        }
    }
}
else
{
    echo "Invalid file";
}
?>

  

 

这样的结果才是正确的,页面 /file.html 没有刷新, 解决办法是submit 按钮改成了

<input type="button" value="提交"/>

 

---------------------------------

而之前的按钮是 <button>提交</button>,这样文件上传成功之后是会刷新页面的,去请求 /file.html?file=file.txt 这个路径的文件,很是奇怪!!!

点击提交

 

以上是关于jquery 的ajax无刷新上传文件之后,页面还是会莫名的刷新-----解决办法的主要内容,如果未能解决你的问题,请参考以下文章

ie8实现ajax无刷新文件上传

js实现无刷新表单提交文件,将ajax请求转换为form请求方法

Django使用Ajax实现页面无刷新评论回复功能

[Asp.net mvc]jquery.form.js无刷新上传

前端之web上传文件的方式

JQUERY关于无刷新页面