画像を選択してプレビュー効果を実現するための input type=file の詳細な説明

小云云
リリース: 2018-01-02 16:00:29
オリジナル
4151 人が閲覧しました

この記事では主に、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の導入が必要です ファイル

関連推奨事項:


写真を選択するためのファイルコントロールサンプルチュートリアル

HTML5 Plus 写真を撮る機能を実装するサンプルコードモバイルアプリでアルバムにアップロードする写真を選択しています

写真を選択した後、入力がアップロードされず、時間内に表示されません

以上が画像を選択してプレビュー効果を実現するための input type=file の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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