js에서 여러 이미지와 단일 이미지의 업로드 및 표시를 구현하는 방법-JS 튜토리얼-php.cn

js에서 여러 이미지와 단일 이미지의 업로드 및 표시를 구현하는 방법

王林

풀어 주다： 2020-04-10 09:24:59

앞으로

1871명이 탐색했습니다.

js에서 여러 이미지와 단일 이미지의 업로드 및 표시를 구현하는 방법

서문:

이미지 업로드는 프로젝트에서 대량으로 사용되는 경우가 많습니다. 예전에는 인터넷에서 일부 자료를 다운로드하여 직접 사용하는 경우가 많았습니다. 다양한 유형의 업로드가 사용되어 큰 혼란을 초래했습니다. 그래서 이미지 업로드의 원활함과 단일 이미지와 다중 이미지 업로드 시 주의해야 할 점을 정리하기 위해 DEMO를 작성하는 시간을 가졌습니다.

다중 사진 업로드

다중 사진 업로드는 단지 프런트엔드 표시 효과일 뿐입니다. 실제 프로젝트에서 다중 사진 업로드는 각 사진이 업로드된 후 배경으로 요청을 보내야 합니다. img 경로를 반환한 다음 Show를 반환합니다.

(추천 튜토리얼: js 튜토리얼)

왜 디스플레이를 위해 백그라운드로 전달되어야 하나요?

1. Base64 이미지 경로를 포그라운드에 직접 표시하는 경우 백그라운드에 요청을 보냅니다. 인터페이스에 오류가 발생하면 사용자는 이미지가 성공적으로 업로드되었지만 이때 배경이 이미지를 수신하지 못하는 착각을 하게 됩니다.

2. 파일이 변경될 때마다 이전 파일을 덮어쓰게 됩니다. . Ajax 제출 없이 바로 표시되는 경우 마지막 것만 Form 제출과 함께 제출됩니다.

<!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 값으로 설정하고 마지막으로 양식에 따라 제출합니다. 숨겨진 입력의 이름 값은 예를 들어 다음과 같이 작성됩니다. 이름="img[]". 이런 식으로 양식이 제출되면 배경이 모든 이미지를 수신할 수 있습니다.

위 코드는 프런트 엔드에서 파일을 클릭하여 이미지를 업로드한 후 표시하는 데 적합합니다. 실제 프로젝트의 필요에 따라 배경과의 일부 특정 상호 작용을 추가할 수 있습니다!

위 내용은 js에서 여러 이미지와 단일 이미지의 업로드 및 표시를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!