ホームページ > 記事 > ウェブフロントエンド > 画像を選択してプレビュー効果を実現するための input type=file の詳細な説明
画像を選択してプレビュー効果を実現するための input type=file の詳細な説明
- 小云云オリジナル
- 2018-01-02 16:00:294086ブラウズ
この記事では主に、input type=file で画像を選択し、プレビュー効果を実現する例を紹介します。編集者はこれが非常に良いものだと思ったので、皆さんの参考として今から共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。
タグを通じて、ファイルとしてタイプを指定します。これにより、ファイルのアップロードが可能になります。たとえば、写真をアップロードする限り、制限はありません。画像形式では、image/* です。
multiple: 複数のファイルを選択できるかどうかを規定します。
写真のみをアップロードでき、複数のファイルを選択できることを規定します
<input type="file" accept="image/*" multiple="multiple"/>
もちろん、直接入力タイプ=ファイルは必要に応じてアップロードされたファイル/リソースのみを選択できます 画像を選択した後、現在のページでプレビュー効果を実現するには、次のように実装できます
HTMLコード
<body> <p id="box"> <img id="imgshow" src="" alt=""/> </p> <p id="pox"> <input id="filed" type="file" accept="image/*"/> </p> </body>
cssスタイルファイル
<style>
#box{
width: 300px;
height: 300px;
border: 2px solid #858585;
}
#imgshow{
width: 100%;
height: 100%;
}
#pox{
width: 70px;
height: 24px;
overflow: hidden;
}
</style>
JSコード
<script>
//在input file内容改变的时候触发事件
$('#filed').change(function(){
//获取input file的files文件数组;
//$('#filed')获取的是jQuery对象，.get(0)转为原生对象;
//这边默认只能选一个，但是存放形式仍然是数组，所以取第一个元素使用[0];
var file = $('#filed').get(0).files[0];
//创建用来读取此文件的对象
var reader = new FileReader();
//使用该对象读取file文件
reader.readAsDataURL(file);
//读取文件成功后执行的方法函数
reader.onload=function(e){
//读取成功后返回的一个参数e，整个的一个进度事件
console.log(e);
//选择所要显示图片的img，要赋值给img的src就是e中target下result里面
//的base64编码格式的地址
$('#imgshow').get(0).src = e.target.result;
}
})
</script>
*上記のjsコードではjQueryを使用しているため、jQueryの導入が必要です ファイル
関連推奨事項:
以上が画像を選択してプレビュー効果を実現するための input type=file の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。