更新せずにファイルをアップロードする Ajax 実装の詳細な例-PHPチュートリアル-php.cn

ホームページ

バックエンド開発

PHPチュートリアル

更新せずにファイルをアップロードする Ajax 実装の詳細な例

小云云

Dec 19, 2017 pm 01:21 PM

ajax リフレッシュする成し遂げる

この記事は主にファイルを更新せずにアップロードするための ajax の機能を詳しく紹介します。興味のある方はぜひ参考にしてください。

詳細なコードは次のとおりです

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ajax无刷新上传文件</title>
<script>
window.onload = function(){
  var oBtn = document.getElementById(&#39;btn&#39;);
  var oMyFile = document.getElementById(&#39;myFile&#39;);

  oBtn.onclick = function() {
    //alert(oMyFile.value); //获取到的是file控件的value值,这个内容是显示给你看的文字,不是我们选择的文件

    //oMyFile.files file控件中选择的文件列表对象
    //alert(oMyFile.files);

    //我们是要通过ajax把oMyFile.files[0]数据发送给后端

    /*
    for (var attr in oMyFile.files[0]) {
      console.log( attr + &#39; : &#39; + oMyFile.files[0][attr] );
    }
    */

    //利用ajax发送必须要有一个ajax对象
    var xhr = new XMLHttpRequest();

    //监听上传事件
    xhr.onload = function(){
      //alert(1);
      //alert(this.responseText);//后端返回的数据
      var d = JSON.parse(this.responseText);

      alert(d.msg + &#39; : &#39; + d.url); //显示上传成功 并且显示文件路径
    }

    xhr.open(&#39;post&#39;,&#39;post_file.php&#39;,true); //open打开的方式不能使用get,上传文件的地址,使用异步上传
    //在使用post发送的时候必须要带一些请求头信息
    xhr.setRequestHeader(&#39;X-Request-With&#39;, &#39;XMLHttpRequest&#39;);
    //send要发送数据 
    //将要上传的数据转换成二进制数据
    //那么必须知道后端接收当前文件的名称是什么 然后后面带上当前文件的数据

    var oFormData = new FormData(); //通过FormData来构建提交数据
    oFormData.append(&#39;file&#39;,oMyFile.files[0]);

    xhr.send(oFormData);
  }
}
</script>
</head>
<body>
  <input type="file" id="myFile" /><input type="button" id="btn" value="上传" />
</body>
</html>

ログイン後にコピー

バックエンドphpコードpost_file.php

<?php
header(&#39;Content-type:text/html; charset="utf-8"&#39;);
$upload_dir = &#39;uploads/&#39;;

if(strtolower($_SERVER[&#39;REQUEST_METHOD&#39;]) != &#39;post&#39;){
  exit_status(array(&#39;code&#39;=>1,&#39;msg&#39;=>&#39;错误提交方式&#39;));
}

if(array_key_exists(&#39;file&#39;,$_FILES) && $_FILES[&#39;file&#39;][&#39;error&#39;] == 0 ){

  $pic = $_FILES[&#39;file&#39;];

  if(move_uploaded_file($pic[&#39;tmp_name&#39;], $upload_dir.$pic[&#39;name&#39;])){
    exit_status(array(&#39;code&#39;=>0,&#39;msg&#39;=>&#39;上传成功&#39;,&#39;url&#39;=>$upload_dir.$pic[&#39;name&#39;]));
  }
}
echo $_FILES[&#39;file&#39;][&#39;error&#39;];
exit_status(array(&#39;code&#39;=>1,&#39;msg&#39;=>&#39;出现了一些错误&#39;));

function exit_status($str){
  echo json_encode($str);
  exit;
}
?>

ログイン後にコピー

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7444

CakePHP チュートリアル

1371

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

Windows 11 で F5 更新キーが機能しない Mar 14, 2024 pm 01:01 PM

Windows 11/10 PC では F5 キーが正しく機能しませんか? F5 キーは通常、デスクトップまたはエクスプローラーを更新したり、Web ページをリロードしたりするために使用されます。ただし、読者の中には、F5 キーがコンピュータを更新していて、正しく動作しないと報告している人もいます。 Windows 11 で F5 更新を有効にする方法は? Windows PC を更新するには、F5 キーを押すだけです。一部のラップトップまたはデスクトップでは、更新操作を完了するために Fn+F5 キーの組み合わせを押す必要がある場合があります。 F5 キーを押して更新しても機能しないのはなぜですか? F5 キーを押してもコンピューターを更新できない場合、または Windows 11/10 で問題が発生している場合は、ファンクションキーがロックされていることが原因である可能性があります。その他の考えられる原因には、キーボードまたは F5 キーが含まれます

Huawei 携帯電話にデュアル WeChat ログインを実装するにはどうすればよいですか? Mar 24, 2024 am 11:27 AM

Huawei 携帯電話にデュアル WeChat ログインを実装するにはどうすればよいですか?ソーシャルメディアの台頭により、WeChatは人々の日常生活に欠かせないコミュニケーションツールの1つになりました。ただし、多くの人は、同じ携帯電話で同時に複数の WeChat アカウントにログインするという問題に遭遇する可能性があります。 Huawei 社の携帯電話ユーザーにとって、WeChat の二重ログインを実現することは難しくありませんが、この記事では Huawei 社の携帯電話で WeChat の二重ログインを実現する方法を紹介します。まず第一に、ファーウェイの携帯電話に付属するEMUIシステムは、デュアルアプリケーションを開くという非常に便利な機能を提供します。アプリケーションのデュアルオープン機能により、ユーザーは同時に

PHP プログラミングガイド: フィボナッチ数列を実装する方法 Mar 20, 2024 pm 04:54 PM

プログラミング言語 PHP は、さまざまなプログラミングロジックやアルゴリズムをサポートできる、Web 開発用の強力なツールです。その中でも、フィボナッチ数列の実装は、一般的で古典的なプログラミングの問題です。この記事では、PHP プログラミング言語を使用してフィボナッチ数列を実装する方法を、具体的なコード例を添付して紹介します。フィボナッチ数列は、次のように定義される数学的数列です。数列の最初と 2 番目の要素は 1 で、3 番目の要素以降、各要素の値は前の 2 つの要素の合計に等しくなります。シーケンスの最初のいくつかの要素

Huawei携帯電話にWeChatクローン機能を実装する方法 Mar 24, 2024 pm 06:03 PM

Huawei 携帯電話に WeChat クローン機能を実装する方法ソーシャルソフトウェアの人気と人々のプライバシーとセキュリティの重視に伴い、WeChat クローン機能は徐々に人々の注目を集めるようになりました。 WeChat クローン機能を使用すると、ユーザーは同じ携帯電話で複数の WeChat アカウントに同時にログインできるため、管理と使用が容易になります。 Huawei携帯電話にWeChatクローン機能を実装するのは難しくなく、次の手順に従うだけです。ステップ 1: 携帯電話システムのバージョンと WeChat のバージョンが要件を満たしていることを確認するまず、Huawei 携帯電話システムのバージョンと WeChat アプリが最新バージョンに更新されていることを確認します。

Golang がゲーム開発の可能性を可能にする方法をマスターする Mar 16, 2024 pm 12:57 PM

今日のソフトウェア開発分野では、効率的で簡潔かつ同時実行性の高いプログラミング言語として、Golang (Go 言語) が開発者にますます好まれています。豊富な標準ライブラリと効率的な同時実行機能により、ゲーム開発の分野で注目を集めています。この記事では、ゲーム開発に Golang を使用する方法を検討し、具体的なコード例を通じてその強力な可能性を示します。 1. ゲーム開発における Golang の利点 Golang は静的型付け言語として、大規模なゲームシステムの構築に使用されます。

PHP ゲーム要件実装ガイド Mar 11, 2024 am 08:45 AM

PHP ゲーム要件実装ガイドインターネットの普及と発展に伴い、Web ゲーム市場の人気はますます高まっています。多くの開発者は、PHP 言語を使用して独自の Web ゲームを開発することを望んでおり、ゲーム要件の実装は重要なステップです。この記事では、PHP 言語を使用して一般的なゲーム要件を実装する方法を紹介し、具体的なコード例を示します。 1. ゲームキャラクターの作成 Web ゲームにおいて、ゲームキャラクターは非常に重要な要素です。ゲームキャラクターの名前、レベル、経験値などの属性を定義し、これらを操作するメソッドを提供する必要があります。

Ajaxを使用してPHPメソッドから変数を取得するにはどうすればよいですか? Mar 09, 2024 pm 05:36 PM

Ajax を使用して PHP メソッドから変数を取得することは、Web 開発では一般的なシナリオであり、Ajax を使用すると、データを更新せずにページを動的に取得できます。この記事では、Ajax を使用して PHP メソッドから変数を取得する方法と、具体的なコード例を紹介します。まず、Ajax リクエストを処理し、必要な変数を返すための PHP ファイルを作成する必要があります。以下は、単純な PHP ファイル getData.php のサンプルコードです。

jQuery AJAX エラー 403 の問題を解決するにはどうすればよいですか? Feb 23, 2024 pm 04:27 PM

jQueryAJAX エラー 403 の問題を解決するにはどうすればよいですか? Web アプリケーションを開発する場合、非同期リクエストを送信するために jQuery がよく使用されます。ただし、jQueryAJAX の使用時に、サーバーによってアクセスが禁止されていることを示すエラーコード 403 が発生する場合があります。これは通常、サーバー側のセキュリティ設定が原因ですが、回避する方法があります。この記事では、jQueryAJAX エラー 403 の問題を解決する方法と具体的なコード例を紹介します。 1.作る

See all articles

更新せずにファイルをアップロードする Ajax 実装の詳細な例

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック