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

この記事では主に、input type=file で画像を選択し、プレビュー効果を実現する例を紹介します。編集者はこれが非常に良いものだと思ったので、皆さんの参考として今から共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

<input> タグを通じて、ファイルとしてタイプを指定します。これにより、ファイルのアップロードが可能になります。たとえば、写真をアップロードする限り、制限はありません。画像形式では、image/* です。

multiple: 複数のファイルを選択できるかどうかを規定します。

写真のみをアップロードでき、複数のファイルを選択できることを規定します

<input>

もちろん、直接入力タイプ=ファイルは必要に応じてアップロードされたファイル/リソースのみを選択できます 画像を選択した後、現在のページでプレビュー効果を実現するには、次のように実装できます

HTMLコード

  

    
  
  

    <input>
  

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内容改变的时候触发事件
    $(&#39;#filed&#39;).change(function(){
    //获取input file的files文件数组;
    //$(&#39;#filed&#39;)获取的是jQuery对象，.get(0)转为原生对象;
    //这边默认只能选一个，但是存放形式仍然是数组，所以取第一个元素使用[0];
      var file = $(&#39;#filed&#39;).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编码格式的地址
        $(&#39;#imgshow&#39;).get(0).src = e.target.result;
      }
    })
</script>

*上記のjsコードではjQueryを使用しているため、jQueryの導入が必要です ファイル

関連推奨事項:

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

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

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

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