HTML5 画像のプレビューには 2 つの方法が必要です
1.URL
2.FileReader
コードを直接アップロード
html5 画像アップロード プレビュー<br> <style> ;<br /> #preview {<br /> width: 300px;<br /> height: 300px;<br /> オーバーフロー: hidden;<br /> }<br /> #preview img {<br /> width: 100%;<br />高さ: 100%;<br /> }<br /> </style><br /> <script src="../jquery/jquery-1.8.3.js"></script><br /> < ;script type="text/javascript"><br /> functionreview1(file) {<br /> var img = new Image(), url = img.src = URL.createObjectURL(file)<br /> var $img = $( img)<br /> img.onload = function() {<br /> URL.revokeObjectURL(url)<br /> $('#preview').empty().append($img)<br /> }<br /> } <br /> functionreview2(file) {<br /> var Reader = new FileReader()<br /> Reader.onload = function(e) {<br /> var $img = $('<img>')。 attr( "src", e.target.result)<br /> $('#preview').empty().append($img)<br /> }<br /> Reader.readAsDataURL(file)<br /> }<br /> <br /> $(function() {<br /> $('[type=file]').change(function(e) {<br /> var file = e.target.files[0]<br /> プレビュー1 (ファイル )<br /> })<br /> })<br /> </script><br /></head><br /><body><br /><form enctype="multipart/form-data " action ="" method="post"><br /> <input type="file" name="imageUpload"/><br /> <div id="preview" style="width: 300px;height :300px ;border:1px ソリッドグレー;"></div><br /></form><br /></body><br /></html><br /></style>
URL.revokeObjectURL メソッド Opera はこれをサポートしていません。FileReader は IE9 以下を除きサポートしませんが、他のブラウザはサポートしています。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
