1

このリンクをチェックしてください。

コードはどのように機能していますか？srcIFRAMEの属性が に設定されているということは、フォームが送信されたことを#どのようupload.phpに知ることができるのでしょうか?

コードは次のとおりですindex.php::

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>Max's AJAX File Uploader</title>
   <link href="style/style.css" rel="stylesheet" type="text/css" />

<script language="javascript" type="text/javascript">
<!--
function startUpload(){
      document.getElementById('f1_upload_process').style.visibility = 'visible';
      document.getElementById('f1_upload_form').style.visibility = 'hidden';
      return true;
}

function stopUpload(success){
      var result = '';
      if (success == 1){
         result = '<span class="msg">The file was uploaded successfully!<\/span><br/><br/>';
      }
      else {
         result = '<span class="emsg">There was an error during file upload!<\/span><br/><br/>';
      }
      document.getElementById('f1_upload_process').style.visibility = 'hidden';
      document.getElementById('f1_upload_form').innerHTML = result + '<label>File: <input name="myfile" type="file" size="30" /><\/label><label><input type="submit" name="submitBtn" class="sbtn" value="Upload" /><\/label>';
      document.getElementById('f1_upload_form').style.visibility = 'visible';      
      return true;   
}
//-->
</script>   
</head>

<body>
       <div id="container">
            <div id="header"><div id="header_left"></div>
            <div id="header_main">Max's AJAX File Uploader</div><div id="header_right"></div></div>
            <div id="content">
                <form action="upload.php" method="post" enctype="multipart/form-data" target="upload_target" onsubmit="startUpload();" >
                     <p id="f1_upload_process">Loading...<br/><img src="loader.gif" /><br/></p>
                     <p id="f1_upload_form" align="center"><br/>
                         <label>File:  
                              <input name="myfile" type="file" size="30" />
                         </label>
                         <label>
                             <input type="submit" name="submitBtn" class="sbtn" value="Upload" />
                         </label>
                     </p>

                     <iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
                 </form>
             </div>
             <div id="footer"><a href="http://www.ajaxf1.com" target="_blank">Powered by AJAX F1</a></div>
         </div>

</body>   
</html>

upload.php:

<?php
   // Edit upload location here
   $destination_path = getcwd().DIRECTORY_SEPARATOR;

   $result = 0;

   $target_path = $destination_path . basename( $_FILES['myfile']['name']);

   if(@move_uploaded_file($_FILES['myfile']['tmp_name'], $target_path)) {
      $result = 1;
   }

   sleep(1);
?>

<script language="javascript" type="text/javascript">window.top.window.stopUpload(<?php echo $result; ?>);</script>
4

2 に答える 2

3

このコードのフローは、HTML フォーム タグとそれに関連する属性に従う場合、非常に単純です。何が起こっているかは次のとおりです。

  1. アップロードを選択
  2. フォームを送信
  3. onSubmit()は、読み込みを有効にし、アップロード フォームを無効にする JS 関数をトリガーします。* return true* のため、フォームはまだ送信されています。
  4. 「target=」属性により、フォームの送信は iFrame に行われます。そのアクションで、iFrame ソースを「upload.php」にします。
  5. Upload.php は iFrame 内から呼び出されます。
  6. Upload.php の結果は、メイン ウィンドウの JS 関数 'stopUpload' を呼び出します。これは、実行する残りのアクションを通知します。

このスクリプトは機能しますが、結果はブラウザーによって異なる場合があります。これは、高速な AJAX アップロードの実装に適したスクリプトです。

于 2013-02-03T11:40:19.840 に答える
1

フォームアクションをupload.php<form action="upload.php"に設定しているため、送信するとupload.phpはフォームが送信されたことを認識します（あなたの質問を正しく理解していれば、上記の行は真です）

于 2013-02-03T11:35:28.487 に答える