PHP로 여러 장의 사진을 업로드할 때 사진을 선택한 후 문제를 미리 볼 수 있습니다.

요즘 문제를 해결하고 있는데, 사진 업로드 시 성공적으로 선택 후 미리보기가 가능합니다.

요구 사항: 업로드 아이콘을 클릭하면 파일 이름이 전면 입력 상자에 표시되며, 선택한 이미지를 미리 보려면 후면의 보기 버튼을 클릭해야 합니다. 새로고침

1 .처음에는 ajax를 이용하여 업로드하려고 했는데, 나중에 여러 장의 사진을 동시에 업로드하면 문제가 있다는 것을 알게 되었습니다. ajax의 사진 업로드 원리는 이미지를 선택할 때, file 형식의 입력 상자 외부에서 js를 사용하게 되며, 양식 양식을 작성하고 ajaxSubmit을 통해 자동으로 php 파일에 제출한 다음 php 파일을 통해 업로드하고 마지막으로 서버에 업로드된 이미지 경로를 반환할 수 있습니다. 이미지를 클릭하면 실제로 이미지가 서버에 업로드되었습니다. 하지만 이 요구 사항은 여러 장의 사진에 대한 것이므로 큰 문제가 발생합니다.

2. 나중에 인터넷에서 js를 사용하여 로컬에서 선택한 이미지를 실시간으로 미리 볼 수 있다는 것을 알게 되었습니다. 이것과 ajax 업로드의 차이점은 이미지 파일을 선택한 후에는 서버에 업로드되지 않는다는 것입니다. 로컬 이미지의 경로 미리보기가 직접 검색됩니다. 다음은 최종 결과를 얻기 위해 이 접근 방식을 어떻게 사용했는지 보여주는 예입니다.

방법:

<input type="file" name="photo_file[]" class="ata_pt" οnchange="previewImage(this)"/>
<input type="hidden" class="imageurl" />

먼저 파일을 업로드하려면 입력 상자가 필요합니다

그런 다음 아래에 입력 상자를 추가하여 로컬 이미지 경로의 숨겨진 형식을 가져옵니다

//图片上传预览    IE是用了滤镜。
        function previewImage(file)
        {
            if (file.files && file.files[0])
            {
                var reader = new FileReader();
                reader.onload = function(evt){
                    $(file).next().val(evt.target.result);
                }
                reader.readAsDataURL(file.files[0]);
            }
            else //兼容IE
            {
                var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
                file.select();
                var src = document.selection.createRange().text;
                //p.innerHTML = &#39;<img  src="/static/imghw/default1.png"  data-src=" "  class="lazy"  id=imghead alt="PHP로 여러 장의 사진을 업로드할 때 사진을 선택한 후 문제를 미리 볼 수 있습니다." >&#39;;
                //var img = document.getElementById(&#39;imghead&#39;);
                //img.filters.item(&#39;DXImageTransform.Microsoft.AlphaImageLoader&#39;).src = src;
                $(this).next().val(src);
                //var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
                //status =(&#39;rect:&#39;+rect.top+&#39;,&#39;+rect.left+&#39;,&#39;+rect.width+&#39;,&#39;+rect.height);
                //p.innerHTML = "<p id=phead style=&#39;width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"&#39;></p>";
            }
        }
        function clacImgZoomParam( maxWidth, maxHeight, width, height ){
            var param = {top:0, left:0, width:width, height:height};
            if( width>maxWidth || height>maxHeight )
            {
                rateWidth = width / maxWidth;
                rateHeight = height / maxHeight;
                 
                if( rateWidth > rateHeight )
                {
                    param.width =  maxWidth;
                    param.height = Math.round(height / rateWidth);
                }else
                {
                    param.width = Math.round(width / rateHeight);
                    param.height = maxHeight;
                }
            }
             
            param.left = Math.round((maxWidth - param.width) / 2);
            param.top = Math.round((maxHeight - param.height) / 2);
            return param;
        }

이미지를 선택할 때 PreviewImage가 호출되는 것을 볼 수 있습니다( ) 메서드에서 이 메서드를 사용하여 로컬 이미지의 주소를 얻고 이를 imageurl 클래스와 함께 입력 상자에 전달합니다.

그런 다음

<input type="hidden" class="imageurl" />

바로 아래에 버튼을 추가했습니다. 이 버튼을 클릭하면 $(this).prev().val()이 얻어지고 이미지를 표시하려는 사용자에게 전달됩니다. .p의 img에서는 사진이 이렇게 표시됩니다

<p><img  src="/static/imghw/default1.png"  data-src=" "  class="lazy"   id="preview" alt="PHP로 여러 장의 사진을 업로드할 때 사진을 선택한 후 문제를 미리 볼 수 있습니다." ></p>

테스트 후 이 방법은 Firefox, Chrome, IE10 이상을 만족할 수 있으며 기본적으로 충분합니다.

이 문제를 며칠 동안 연구했는데 이렇게 해결될 줄은 몰랐네요. 경험을 쌓자! 경험을 쌓으세요! 경험을 쌓으세요!

위 내용은 PHP로 여러 장의 사진을 업로드할 때 사진을 선택한 후 문제를 미리 볼 수 있습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!