ホームページ > 記事 > ウェブフロントエンド > jQueryでアップロードした画像のローカルプレビューを実装する方法
今回は、jQueryアップロード画像ローカルプレビューを実装する方法を説明します。jQueryでアップロードされた画像のローカルプレビューを実装するための注意事項は何ですか。以下は実際的なケースです。見てみましょう。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery上传图片本地预览效果</title> </head> <body> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <input id="upload" type="file"> <img id="preview" src=""> <script type="text/javascript"> $('#upload').change(function(){ // 获取FileList的第一个元素 alert(document.getElementById('upload').files[0]); var f = document.getElementById('upload').files[0]; src = window.URL.createObjectURL(f); document.getElementById('preview').src = src }) </script> </body> </html>
操作効果:
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
vue2を操作してショッピングカートと住所選択を実装する方法
以上がjQueryでアップロードした画像のローカルプレビューを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。