画像を選択してプレビュー効果を実現するための input type=file の詳細な説明-jsチュートリアル-php.cn

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

小云云

リリース： 2018-01-02 16:00:29

オリジナル

4146 人が閲覧しました

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