Jquery Mobile - 下载不会开始

时间:2014-07-10 13:06:05

标签: php jquery html mobile

我遇到了以下问题:

我希望用户可以单击HTML表单中的按钮,然后开始下载。

Button使用POST方法调用名为“working.php”的新php文件。

在working.php中,它会生成一个文件并将其保存在我的服务器上。 之后,客户可以下载该文件。 在桌面版本上,它可以工作,但是使用JQuery它将无法工作,我不知道为什么:(

这是我的index.php代码:

<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Mobile</title>

    <link rel="stylesheet" type="text/css" src="styles.css" />

    <link rel="stylesheet" href="themes/sl_theme.min.css" />
    <link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>

<body>

<div data-role="page">
    <div data-role="header" data-position="inline">
        <h1>Mobile</h1>
    </div>
    <div data-role="content">

        <a href="#"><img src="../imgs/header.png"/ style="max-width:100%;"></a>
        <form action="../working.php" method="post">
            <input name="sc_url" type="text" size="50" class="textbox"> <br /> <br />
            <input type="submit" value="GO">
        </form>

    </div>

    <div data-role="footer">
        <h1>&copy; 2014 by ###</h1>
    </div>

</div>

这里是working.php的代码

    function savefile($id, $title) {
    $dir = "files";
    $file = file_get_contents($id);
    $thetitle = "";
    $titlelen = strlen($title) - 2;
    $thetitle = substr($title, 1, $titlelen);

    $thetitle = str_replace("/", " - ", $thetitle);
    $thetitle = str_replace("\\", " - ", $thetitle);

    if(strlen($thetitle) === 0) {
        die('<html>
                <head>
                    <link href="_styles.css" type="text/css" rel="stylesheet" media="all">
                </head>
                <body>
                    <div id=content>Sorry, but I cannot find a Track/Trackname :/ <br /> <br />
                    <a href="index.php" style="text-decoration: underline;">Home</a> </div>
                </body>
            </html>');
    }

    $filename = $dir . "/" . $thetitle . ".mp3";

    file_put_contents("$filename", $file);

    header('Pragma: public');
    header('Expires: 0');
    header('Cache-Control: must-revalidate, post-check=0, pre-check=0');
    header('Cache-Control: public');
    header('Content-type: audio/mpeg');     
    header("Content-Transfer-Encoding: binary");
    header('Content-Length: '.filesize("$filename"));
    readfile("$filename");
}

当我点击按钮时,它只显示一个空白页面(working.php),但下载不会开始。

有人可以帮我吗?

问候, 帕斯卡

1 个答案:

答案 0 :(得分:0)

jQuery Mobile默认情况下在表单上使用AJAX行为,下载或上传工作需要一个完整的帖子,你应该使用属性

data-ajax="false"

因此表单不使用ajax行为

<form action="../working.php" method="post" data-ajax="false">
    <input name="sc_url" type="text" size="50" class="textbox"> <br /> <br />
    <input type="submit" value="GO">
</form>

如果要全局禁用,请使用jquery全局对象,有关详细信息,请参阅此处:

Tip: Disable AJAX On jQuery Mobile Forms

jQuery Mobile Forms Demo