inputタグとjqueryを使用して複数の画像をアップロードしてエコーする手順の詳細な説明-jsチュートリアル-php.cn

inputタグとjqueryを使用して複数の画像をアップロードしてエコーする手順の詳細な説明

php中世界最好的语言

リリース： 2018-05-29 13:55:57

オリジナル

3047 人が閲覧しました

今回はinputタグとjqueryを使って複数画像のアップロードとエコー機能を実装する手順について詳しく解説していきますinputタグとjqueryを使ってアップロードを実装する際の注意点

は何なのかを説明します。複数の画像のエコー機能を以下に示します。実際のケースを見てみましょう。

このようなデモを最初から作成しましょう

ステップ 1:

まず、デフォルトの input-file タグを改善しましょう。 Baidu で検索して、外側にボックスを配置し、入力の不透明度を 0 に設定し、外側のボックスを好みのスタイルにデザインするだけです。

おおよそのスタイル

ソースコードを載せましょう、効果についてだけ話しましょう、ソースコードを載せない人はただの不正者です

これが本文です

<body>
  <p class="uploadImgBtn" id="uploadImgBtn">
    <input class="uploadImg" type="file" name="file" multiple id="file">
  </p>
</body>

ログイン後にコピー

これがCSSスタイルです

.uploadImgBtn {
    width: 100px;
    height: 100px;
    cursor: pointer;
    position: relative;
    background: url("img/plus.png") no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
  }
  .uploadImgBtn .uploadImg {
    position: absolute;
    right: 0;
    top:0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
  }
  //这是一个用做回显的盒子的样式
  .pic{
    width: 100px;
    height: 100px;
  }
  .pic img {
    width: 100%;
    height: 100%;
  }

ログイン後にコピー

コードの量はそれほど多くないので、次に、画像をエコーする方法を分析しましょう。 1 つは、最初に画像をサーバーにアップロードする方法と、URL を返す方法です。もう 1 つは、h5 の FileReader オブジェクトを使用して画像をローカルで直接プレビューし、ユーザーが確認した後にサーバーにアップロードすることです。

2 番目の形式を使用しています。アイデアがわかったので、プログラミングを始めましょう

<script>
  $(document).ready(function(){
    //为外面的盒子绑定一个点击事件
    $("#uploadImgBtn").click(function(){
      /*
      1、先获取input标签
      2、给input标签绑定change事件
      3、把图片回显
       */
//      1、先回去input标签
      var $input = $("#file");
//      2、给input标签绑定change事件
      $input.on("change" , function(){
        //补充说明：因为我们给input标签设置multiple属性，因此一次可以上传多个文件
        //获取选择图片的个数
        var files = this.files;
        var length = files.length;
        console.log("选择了"+length+"张图片");
        //3、回显
        for( var i = 0 ; i < length ; i++ ){
          var fr = new FileReader(),
            p = document.createElement("p"),
            img = document.createElement("img");
          p.className = &#39;pic&#39;;
          fr.onload = function(e){
            console.log("回显了图片")
            img.src = this.result;
            p.appendChild(img)
            document.body.appendChild(p);
          }
          fr.readAsDataURL(files[i]);//读取文件
        }
      })
    })
  })
</script>

ログイン後にコピー

コードのアイデアは、最初にクリックイベントを外側のボックスにバインドし、次に取得するというものです。 input タグに変更イベントをバインドし、for ループを使用して取得したデータをエコーします。画像のレンダリングに使用される非同期イベント onload があります。

レンダリング

を選択しました。画像は 3 つありますが、表示されるのは 1 つです。つまり、for ループで 3 つの p と img を作成しましたが、この中には怪しいものが 1 つしか表示されません。

前に述べたように、エコーされた for ループには非同期イベントがあります。これは非同期であるため、onload イベントが実行される前に for ループが実行され、添字 i の値が作成される可能性があります。設定した期待値に一貫性がない場合、どうすれば解決できるでしょうか?一度に 1 つの画像をエコーする

関数スコープを作成できれば、解決できると思います。試してみましょう。フロントエンドでは、関数スコープを形成するコールバック関数が付属する jquery の各ソリューションを使用できます。コード

<script>
  $(document).ready(function(){
    //为外面的盒子绑定一个点击事件
    $("#uploadImgBtn").click(function(){
      /*
      1、先获取input标签
      2、给input标签绑定change事件
      3、把图片回显
       */
//      1、先回去input标签
      var $input = $("#file");
//      2、给input标签绑定change事件
      $input.on("change" , function(){
        //补充说明：因为我们给input标签设置multiple属性，因此一次可以上传多个文件
        //获取选择图片的个数
        var files = this.files;
        var length = files.length;
        console.log("选择了"+length+"张图片");
        //3、回显
        $.each(files,function(key,value){
          //每次都只会遍历一个图片数据
          var p = document.createElement("p"),
            img = document.createElement("img");
          p.className = "pic";
          var fr = new FileReader();
          fr.onload = function(){
            img.src=this.result;
            p.appendChild(img);
            document.body.appendChild(p);
          }
          fr.readAsDataURL(value);
        })
      })
    })
  })
</script>

ログイン後にコピー

を見て、実行効果を確認してみましょう

レンダリング

今回は期待通りの結果が得られました。これで終わりですか? 間違いなく、画像のアップロードボタンをクリックすると、最後の結果が上書きされます。それでは、どうすればよいでしょうか。この問題では、複数の入力タグを使用する必要があります。では、クリックしたときに、それが新しく追加された入力タグになるようにするにはどうすればよいでしょうか。私の解決策は、最後の入力タグの ID を入力して、属性をクリアして、この属性を追加することです。 id を介してイベントをバインドするので、新しく生成された input タグにイベントをバインドできます。元の input タグは id 属性が選択されていないため消えています。コードを見てみましょう

<script>
  $(document).ready(function(){
    //为外面的盒子绑定一个点击事件
    $("#uploadImgBtn").click(function(){
      /*
      1、先获取input标签
      2、给input标签绑定change事件
      3、把图片回显
       */
//      1、先回去input标签
      var $input = $("#file");
      console.log($input)
//      2、给input标签绑定change事件
      $input.on("change" , function(){
        console.log(this)
        //补充说明：因为我们给input标签设置multiple属性，因此一次可以上传多个文件
        //获取选择图片的个数
        var files = this.files;
        var length = files.length;
        console.log("选择了"+length+"张图片");
        //3、回显
        $.each(files,function(key,value){
          //每次都只会遍历一个图片数据
          var p = document.createElement("p"),
            img = document.createElement("img");
          p.className = "pic";
          var fr = new FileReader();
          fr.onload = function(){
            img.src=this.result;
            p.appendChild(img);
            document.body.appendChild(p);
          }
          fr.readAsDataURL(value);
        })
      })
      //4、我们把当前input标签的id属性remove
      $input.removeAttr("id");
      //我们做个标记，再class中再添加一个类名就叫test
      var newInput = '<input class="uploadImg test" type="file" name="file" multiple id="file">';
      $(this).append($(newInput));
    })
  })
</script>

ログイン後にコピー