ajax +upload 詭異的現象？-php教程-PHP中文網

ajax +upload 詭異的現象？

WBOY

發布： 2016-09-19 09:16:37

原創

1198 人瀏覽過

<code><form method="post" name="form" id="form" enctype="multipart/form-data">
              <textarea name="post" rows="3" maxlength="100"  id="post"></textarea></td>
                 
                  <input type="file" name="myFile">
                 
                          <button type="submit" id="post_btn">發佈</button> <span id="show"></span>
              </form>
              
$("#post_btn").click(function(e){
     e.preventDefault();

        if (post.value=='')
        {
            post.focus();
            document.getElementById("show").innerHTML = "勿為空";
            return (false);
        }
        else
        {
            var timelinedata = new FormData($("#form")[0]);
            
            $.ajax({
                type:"POST",
                url:"ing",
                data: timelinedata,
                cache: false,
                contentType: false,
                processData: false,
                success:function(data){
                    $("#show").html(data);
                }
            });
        }
    
});</code>

登入後複製

ing

<code>$post = htmlspecialchars(preg_replace("/[\'\"]+/" , '' ,$_POST['post']),ENT_QUOTES);
$addtime = time();
          
$SQL_RE = mysql_query("SELECT * FROM `xxx`
WHERE `post` = '".$post."'
");    

if(mysql_num_rows($SQL_RE)==0)
{
        $allowTime = 60; 
        $allowT = md5();
      if (time() - $_SESSION[$allowT] > $allowTime)
      {
          $_SESSION[$allowT] = time(); 
          
          $sql = mysql_query("INSERT INTO `xxx`
          (`post`,`id`,`addtime`)
          VALUES
          ('".$post."','".$_SESSION['userid']."','".$addtime."') 
              ");

          echo '已發佈';
      }
      else
      {
          echo '過於頻繁，請稍候';
          
      
      }
}
else
{
    echo '你發佈了相同的內容';
}</code>

登入後複製

首先因為可以上傳圖片
所以好像必須加上 enctype="multipart/form-data" 跟ajax裡面的

<code>contentType: false,
processData: false,</code>

登入後複製

我把ing裡面的上傳圖片的判斷拿掉因為我試過了跟這個沒有關係
問題來了
如同我的ing裡面的判斷
以下是我描述發生的情形(火狐也一樣)：

我發表了一個叫000的post
他會在#show出現：已發布
然後下一秒變成：你發布了相同的內容
好然後我再按一次發布(內容一樣是000)
此時出現"你發布了相同的內容" 這個正確
但這時候突然網頁會完全不動大概3秒左右之後才有反應(有沒有反應的判斷當我移至鼠標會出現手掌因為我有css加上cursor: pointer所以這樣能判斷網頁有沒有反應)
然後我再按一次發布(內容一樣是000)，狀況依然如上一行
此時呢我內容變成00000按發布後成功發出去
但是一樣會在#show出現：已發布
然後下一秒變成：你發布了相同的內容
然後網頁又卡了3秒左右.....

所以我不懂是什麼原因導致這種情況？
我覺得跟

<code>contentType: false,
processData: false,</code>

登入後複製

關係很大
然後我把它拿掉之後就無法成功success了
好像跟上傳圖片有關係
因為如果不用上傳圖片只要簡單的表單提交是沒問題的
然後這個寫法是我去stackoverflow爬文的結果
就像這樣：http://stackoverflow.com/ques...
恩....很好奇難道他們不會有這種情形嗎？
是這個寫法是錯了嗎？有其他可以直接抓到from所有值的方法嗎？包括圖片上傳？

回覆內容：

<code><form method="post" name="form" id="form" enctype="multipart/form-data">
              <textarea name="post" rows="3" maxlength="100"  id="post"></textarea></td>
                 
                  <input type="file" name="myFile">
                 
                          <button type="submit" id="post_btn">發佈</button> <span id="show"></span>
              </form>
              
$("#post_btn").click(function(e){
     e.preventDefault();

        if (post.value=='')
        {
            post.focus();
            document.getElementById("show").innerHTML = "勿為空";
            return (false);
        }
        else
        {
            var timelinedata = new FormData($("#form")[0]);
            
            $.ajax({
                type:"POST",
                url:"ing",
                data: timelinedata,
                cache: false,
                contentType: false,
                processData: false,
                success:function(data){
                    $("#show").html(data);
                }
            });
        }
    
});</code>

登入後複製

ing

<code>$post = htmlspecialchars(preg_replace("/[\'\"]+/" , '' ,$_POST['post']),ENT_QUOTES);
$addtime = time();
          
$SQL_RE = mysql_query("SELECT * FROM `xxx`
WHERE `post` = '".$post."'
");    

if(mysql_num_rows($SQL_RE)==0)
{
        $allowTime = 60; 
        $allowT = md5();
      if (time() - $_SESSION[$allowT] > $allowTime)
      {
          $_SESSION[$allowT] = time(); 
          
          $sql = mysql_query("INSERT INTO `xxx`
          (`post`,`id`,`addtime`)
          VALUES
          ('".$post."','".$_SESSION['userid']."','".$addtime."') 
              ");

          echo '已發佈';
      }
      else
      {
          echo '過於頻繁，請稍候';
          
      
      }
}
else
{
    echo '你發佈了相同的內容';
}</code>

登入後複製

首先因為可以上傳圖片
所以好像必須加上 enctype="multipart/form-data" 跟ajax裡面的

<code>contentType: false,
processData: false,</code>

登入後複製

我把ing裡面的上傳圖片的判斷拿掉因為我試過了跟這個沒有關係
問題來了
如同我的ing裡面的判斷
以下是我描述發生的情形(火狐也一樣)：

所以我不懂是什麼原因導致這種情況？
我覺得跟

<code>contentType: false,
processData: false,</code>

登入後複製

你開啟瀏覽器的 F12 開發者工具，進入 network 標籤。然後再點一下發布按鈕，看看有沒有多次請求了。

看不懂，，樓主你是台灣or港澳人士嗎？怎麼還用繁體字交流，大陸人早都使用簡體字了