PHP+iframe画像アップロードでインスタントリフレッシュ効果を実現

私は最近、写真のアップロード機能に取り組んでいます。当初は、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为上传图片的地址

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