Home  >  Article  >  Backend Development  >  ajax +upload strange phenomenon?

ajax +upload strange phenomenon?

WBOY
WBOYOriginal
2016-09-19 09:16:371172browse

<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>

First of all, because you can upload pictures
, it seems that you must add enctype="multipart/form-data" with ajax

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

I removed the judgment of uploading pictures in ing because I tried it and it has nothing to do with it
The problem is
It is like the judgment in my ing
The following is what I described as happening (the same is true for Firefox):

I published a post called 000
It will appear in #show: Published
Then the next second it will become: You posted the same content
Okay, then I press publish again (the content is the same as 000)
At this time "You posted the same content" appears. This is correct
But at this time, the webpage suddenly stops moving at all and only responds after about 3 seconds (to judge whether there is a response, when I move the mouse, the palm of my hand will appear because I have css added cursor: pointer, so we can judge whether the webpage is responsive or not)
Then I click publish again (the content is still 000), and the situation is still the same as the previous line
At this time, my content changes to 00000 and is successfully sent after pressing publish
But it will still appear in the #show appeared: Published
Then the next second it changed to: You published the same content
Then the webpage was stuck for about 3 seconds...

So I don’t understand what causes this situation?
I think so

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

It has a lot to do with it
Then I couldn’t succeed after I removed it
It seems to have something to do with uploading pictures
Because if you don’t need to upload pictures and just submit a simple form, it’s no problem
Then I went to stackoverflow to crawl this article. The result
is like this: http://stackoverflow.com/ques...
Well... I'm curious, don't they have this situation?
Is this the wrong way to write it? Is there any other way to directly capture all values ​​from? Including image upload?

Reply content:

<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>

First of all, because you can upload pictures
, it seems that you must add enctype="multipart/form-data" with ajax

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

I removed the judgment of uploading pictures in ing because I tried it and it has nothing to do with it
The problem is here
Just like the judgment in my ing
The following is what I described as happening (the same is true for Firefox):

I published a post called 000
It will appear in #show: Published
Then the next second it will become: You posted the same content
Okay, then I press publish again (the content is the same as 000)
At this time "You posted the same content" appears. This is correct
But at this time, the webpage suddenly stops moving at all and only responds after about 3 seconds (to judge whether there is a response, when I move the mouse, the palm of my hand will appear because I have css added cursor: pointer, so we can judge whether the webpage is responsive or not)
Then I click publish again (the content is still 000), and the situation is still the same as the previous line
At this time, my content changes to 00000 and is successfully sent after pressing publish
But it will still appear in the #show appeared: Published
Then the next second it changed to: You published the same content
Then the webpage was stuck for about 3 seconds...

So I don’t understand what causes this situation?
I think so

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

It has a lot to do with it
Then I couldn’t succeed after I removed it
It seems to have something to do with uploading pictures
Because if you don’t need to upload pictures and just submit a simple form, it’s no problem
Then I went to stackoverflow to crawl this article. The result
is like this: http://stackoverflow.com/ques...
Well... I'm curious, don't they have this situation?
Is this the wrong way to write it? Is there any other way to directly capture all values ​​from? Including image upload?

You open the F12 developer tools of your browser and enter the network tab. Then click the publish button again to see if there are multiple requests.

I don’t understand. Are you from Taiwan or Hong Kong and Macao? Why are you still using traditional Chinese characters to communicate? Mainlanders have already used simplified Chinese characters

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn