複数画像と単一画像のアップロードと表示をjsで実装する方法-jsチュートリアル-php.cn

複数画像と単一画像のアップロードと表示をjsで実装する方法

王林

リリース： 2020-04-10 09:24:59

転載

1908 人が閲覧しました

複数画像と単一画像のアップロードと表示をjsで実装する方法

まえがき:

プロジェクトでは大量の画像をアップロードすることが多く、以前関わったときはインターネットから素材をダウンロードして直接使用することが多かったのですが、その後、プロジェクトの数が増えるにつれ、さまざまな手法が使用されていることが判明し、大きな混乱が生じました。そこで、画像アップロードのスムーズさや、単一画像や複数画像をアップロードする際の注意点などを整理するために、DEMOを作成してみました。

複数画像のアップロード

複数画像のアップロード、これは単なるフロントエンド表示効果です。実際のプロジェクトでは、複数画像のアップロードで 1 つの画像をアップロードする必要があります。次に、バックグラウンドにリクエストを送信すると、バックグラウンドは img パスを返し、それを表示します。

(推奨チュートリアル: js チュートリアル)

表示のためにバックグラウンドに渡す必要があるのはなぜですか?

1. フォアグラウンドに Base64 イメージパスを直接表示する場合は、バックグラウンドにリクエストを送信します。インターフェイスでエラーが発生した場合、ユーザーは画像が正常にアップロードされたと錯覚しますが、この時点では背景は画像を受信しません;

2. ファイルが変更されるたびに、以前のファイル file がそれをカバーするために与えられます。 ajax送信せずに直接表示した場合、最後のものだけフォーム送信で送信されます。

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>多图上传/单图上传</title>
 <style>
  *{
   margin: 0;
   padding: 0;
  }
  .box{
   width: 1000px;
   height: 120px;
   margin: 0 auto;
   border: 1px solid #ddd;
   margin-top: 20px;
   box-sizing: border-box;
   padding: 10px;
  }
  .upload{
   width: 100px;
   height: 100px;
   float: left;
   position: relative;
   overflow: hidden;
  }
  .upload input{
   position: absolute;
   z-index: 1000;
   top:0;
   left:0;
   width: 100%;
   height: 100%;
   opacity: 0;
  }
  .upload a{
   display: block;
   width: 100%;
  }
  .upload img{
   display: block;
   width: 100%;
   height: 100%;
  }
  .imgList{
   float: left;
   overflow: hidden;
  }
  .imgList .item{
   width: 100px;
   height: 100px;
   margin-right: 20px;
   float: left;
   position: relative;
  }
  .imgList .item img{
   display: block;
   width: 100%;
   height: 100%;
  }
  .imgList .item span{
   position: absolute;
   top: 0;right: 0;
   width: 100%;
   background: red;
   color:#fff;
   height: 20px;
   width: 20px;
   text-align: center;
   border-radius: 50%;
   cursor: pointer;
  }
 </style>
</head>
<body>
 <div>
  <!-- 放图片的位置 -->
  <div id="imgList"></div>
  <!-- 上传按钮 -->
  <div>
   <input type="file" name="file" value="" multiple accept="image/*" onchange="uploadImg(this);">
   <a href="javascript:void(0)" rel="external nofollow" ><img src="z_add.png" alt=""></a>
  </div>
 </div>
 <script>
   function uploadImg(obj){   
    var files = obj.files;//获取上传文件后的fileList
    var imgList = [];//声明空数组用来接收上传完成后的图片
    for(var i = 0; i<files.length;i++){
     var imgUrl = window.URL.createObjectURL(files[i]);//将文件转换成base64 URL格式
     imgList.push(imgUrl);//将url压入到数组中 **如果需要图片统一选择完毕后，点击上传按钮统一提交，那么直接拿这imgList给后台传递即可。**
     // 循环创建img容器用来放置url在页面上显示
     var img = document.createElement(&#39;img&#39;)
     img.setAttribute("src", imgList[i]);
     //删除按钮
     var close = document.createElement(&#39;span&#39;)
     close.innerHTML="x"
     close.className=&#39;close&#39;
     close.setAttribute(&#39;onclick&#39;,"imgRemove(this)")
     //创建放置img的盒子
     var item = document.createElement(&#39;div&#39;);
     item.className=&#39;item&#39;;
     item.append(img)
     item.append(close)
     var box = document.getElementById("imgList");
     box.append(item);
     //ajax向后台发送请求
     
    }
   }
   //删除代码
   function imgRemove(obj){
    obj.parentNode.remove()
   }
   
 </script>
</body>
</html>

ログイン後にコピー

単一画像のアップロード

入力の複数属性を削除すると、単一画像のアップロードになります;

<input type="file" name="file" value="" accept="image/*" onchange="uploadImg(this);">

ログイン後にコピー

上記の手順に従いますコード単一画像のアップロードと複数画像のアップロードを直接実現できます。以下は、単一の画像アップロードと複数の画像アップロードを送信する際に注意する必要がある点についてです;

1. 単一の画像アップロードはフォームと一緒に送信することも、バックグラウンドで送信することもできます。名前の値を入力することで;

2. ファイルには各アップロード後に最新の画像のみが保持されるため、複数の画像のアップロードをフォームと一緒に送信することはできません。最初に ajax 経由で画像を正常に送信できます。 , 次に、フォームをループして非表示の入力を作成し、それをバックグラウンドに返します。入力の val 値を変更するようにパスが設定され、最終的にフォームとともに送信されます。非表示の入力の name 値に注意してください。 name="img[]" のように、[] の形式で記述されます。このようにして、フォームの送信時にバックグラウンドですべての画像を受け取ることができます。

上のコードは、フロントエンドがファイルをクリックして画像をアップロードした後の表示に適しています。実際のプロジェクトのニーズに応じて、バックエンドとの特定の対話をいくつか追加できます。

以上が複数画像と単一画像のアップロードと表示をjsで実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。