Maison > Article > développement back-end > ajax +upload 詭異的現象?
<code><form method="post" name="form" id="form" enctype="multipart/form-data"> <textarea name="post" rows="3" maxlength="100" id="post"></textarea> <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> <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所有值的方法嗎?包括圖片上傳?
你开启浏览器的 F12 开发者工具,进入 network 选项卡。然后再点一下发布按钮,看看有没有多次请求了。
看不懂,,楼主你是台湾or港澳人士吗?怎么还用繁体字交流,大陆人早都使用简体字了