PHP は iframe を使用して画像をアップロードして表示します

*文
リリース: 2023-03-18 22:40:01
オリジナル
2133 人が閲覧しました

私は最近、画像のアップロード機能に取り組んでいます。当初は、ajax を使用して画像をアップロードして、即時更新を実現したいと考えていましたが、その後、iframe フレームワークを使用してそれを実現することができました。今からそれを皆さんと共有し、皆さんの参考にしてください。お役に立てれば幸いです。

しかし、このフレームワークを使用する際に問題があり、画像をアップロードした後、アップロードしたパスをこのフレームに返す必要があるので、最初は値を直接iframeに出力するのですが、その後、パスを取り出しても応答がなく、インターネット上の情報を確認しましたが、iframe を使用して画像をアップロードし、リアルタイム更新機能を実現する方法についての包括的な説明がありません。 , なので自分で勉強するしかありません。アップロード方法だけで十分だと言う人がほとんどですが、ここで止めるのは本当に不快です

iframeでアップロードが成功した後に値がページに出力されるため、それを行うことはできません。 N 個の方法を試し、N 個の情報を確認するのは本当に面倒です。

後で、iframe に src を追加し、画像が正常にアップロードされた後に出力する単純な JavaScript ステートメントとして出力値を書き込みます。要約すると:

html コード:

<iframe id="upload_target" name="upload_target" src="upload.php" style="width:0;heigth:0;overflow:hidden;border:0;position: absolute; left:-500px;"></iframe> //iframe设置成隐藏的,src链接的页面为图片上传的后台文件页面,不过加不加影响都不大,只不过为了更精确而已
<img id="tag_img" src="" />
<form enctype="multipart/form-data" action="upload.php" method="post" target="upload_target">
   <input type="file" name="userfile" class="file" value="" />
   <input type="submit" name="uploadimg" value="上传" />
</form> //表单的那么值对应着空框架的那么值,提交后跳转到空框架中,这样就不对父窗口页面进行刷新了
ログイン後にコピー

は検証のためにバックグラウンドの Upload.php ページに送信されます。自分で生成したパスがあります

そして、画像を正常に更新した後、このパスを取り出し、JS を介して親ウィンドウの画像ボックス内の画像パスを変更し、再割り当てすることができます。これは、データベースにアクセスして保存されたパス アドレスを取得し、更新が成功するたびにそれを更新する必要がなくなります。

ここでは返されるjsコードのみを記述します

echo "<script type=&#39;text/javascript&#39;>window.parent.document.getElementByIdx_x(&#39;tag_img&#39;).setAttribute(&#39;src&#39;,&#39;$updurl&#39;);</script>";
    //这就是在框架中输出一段js代码,然后操作父框架中图片地址刷新成我上传的图片地址,$updurl为上传图片的地址
ログイン後にコピー

こうすることで、ページを更新せずに画像を簡単にアップロードでき、画像は時間とともに更新されます。

関連する推奨事項:

PHP画像ファイルアップロード実装コード

PHP画像サムネイル実装方法

PHP画像ファイルアップロード原理分析とコード

以上がPHP は iframe を使用して画像をアップロードして表示しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート