적용된 

Ajax는 PHP에서 이미지를 로딩하고 스케일링합니다. 여러 이미지를 일괄 업로드합니다. 인지적 사전 캐싱

작성자 메모: 이미지 로딩이 완전히 간과되거나 불필요하게 큰 플러그인에 맡겨진 것으로 보입니다. 아름답고 매끄럽고 빠른 로딩사이트 – 가장 중요한 부분좋은 사용자 경험은 물론 디자이너에 대한 기본적인 예의도 중요합니다. 페이지에 들어갈 때마다 이미지가 한 줄씩 느리게 로딩되어 디자인이 망가지는 것을 누가 보고 싶겠습니까?

제가 작업하는 많은 사이트에는 사진이 많이 포함되어 있으며 모든 이점은 초고속 인터넷울트라에 재료를 제공해야 할 필요성 때문에 무효화됩니다. 높은 해상도점점 더 많은 장치에 대한 Retina. 지금은 주도권을 잡고 이미지 로딩 제어를 시작하기에 완벽한 시기입니다. 이 기사에서는 사이트를 멋지게 만들고 성능을 엄청나게 향상시킬 수 있는 네 가지 쉬운 방법을 보여 드리겠습니다.

이미지가 천천히 로딩되는 것을 볼 때마다 만화책에 나오는 남자와 함께 있었던 그 고전적인 장면이 기억납니다.

1. 각 이미지를 별도로 업로드합니다(단일 자산).

이는 기본 JPG의 기존 한 줄씩 로드를 방지(또는 적어도 숨기기)하기 위해 사이트 이미지의 일부 또는 전부에 적용할 수 있는 기술입니다. img_wrapper 클래스를 사용하여 각 이미지를 div로 래핑하는 것부터 시작하겠습니다.

< div class = "img_wrapper" >

< img src = "comicbookguy.jpg" alt = "" / >

< / div >

이 패커는 우리에게 몇 가지 정보를 제공할 것입니다. 추가 제어간단한 img 태그로는 보장할 수 없는 이미지 크기와 화면 비율입니다. 또한 로딩 스피너를 사용할 수 있는 옵션도 제공됩니다. 배경 이미지또는 별도의 요소– 이미지 로딩이 완료된 후 숨길 수 있습니다.

이 예에서는 이미지를 4:3의 가로 세로 비율로 제한하겠습니다. 이는 반응형 사이트에 매우 중요합니다. 또한 opacity: 0;을 사용하여 이미지를 숨겼습니다. 이를 통해 이미지가 나타날 때 표시되는 방법과 시점을 제어할 수 있습니다. 적절한 순간.

Img_wrapper( 위치: 상대; 패딩 상단: 75%; 오버플로: 숨김; ) .img_wrapper img( 위치: 절대; 상단: 0; 너비: 100%; 불투명도: 0; )

img_wrapper(

위치: 상대;

패딩 상단: 75%;

오버플로: 숨김;

Img_wrapper img(

위치: 절대;

상단: 0;

너비: 100%;

불투명도: 0;

DOM의 각 이미지는 모든 데이터가 서버에서 로드되고 이미지 자체가 브라우저에 의해 렌더링될 때 로드 이벤트를 발생시킵니다. 이 이벤트를 캡처하고 바인딩하려면 JavaScript를 사용해야 합니다. 이미지 태그에 onload 속성을 추가하는 것부터 시작하겠습니다.

< div >

< img src = "comicbookguy.jpg" alt = "" onload = "imgLoaded(this)" / >

< / div >

이전에 이와 같은 것을 본 적이 없는 초보자를 위해 이를 인라인 스크립트 속성이라고 하며, 이를 통해 JavaScript 기능을 다음에서 실행된 이벤트에 직접 바인딩할 수 있습니다. DOM 요소이는 인라인을 사용하여 요소에 직접 스타일을 추가하는 것과 매우 유사합니다. 스타일 속성. 믿거나 말거나, 이러한 인라인 스크립트 속성은 웹 초창기 JavaScript 작성의 중요한 부분이었으며 인라인 스타일과 마찬가지로 요즘 코드 순수성 및 의미론적 활동가들에 의해 거부됩니다.

따라서 인라인 JavaScript를 보는 것이 역겨워서 도망갈 준비가 된 분들을 위해, 곁에 머물면서 이것이 여전히 가장 효율적이고 효율적이라는 제 말을 받아들이십시오. 신뢰할 수 있는 방법 DOM에서 이미지의 로드 이벤트를 캡처합니다. 나는 진보와 HTML5를 모두 지지하지만 우아하고 기능적이라면 구식 기술을 사용하는 것에 전혀 반대하지 않습니다.

이에 대한 대안은 준비된 문서의 각 이미지에 로드 이벤트를 개별적으로 바인딩하는 것입니다. 그러나 문서 준비가 실행되기 전, 그리고 각 이미지의 로드 이벤트에 기능을 바인딩하기 전에 이미지가 로드될 때 문제가 발생합니다. 이미지가 브라우저에 의해 이미 캐시된 경우 별도의 문제 이전 세션, 즉시 다운로드하세요. 이벤트를 놓치고 함수가 호출되지 않습니다. onload 속성은 말하자면 이벤트에 "사전 바인딩"되어 브라우저가 HTML을 구문 분석할 때 처리되기 때문에 이러한 문제가 없습니다.

나는 우아하고 기능적인 한 구식 기술을 사용하는 것에 대해 전혀 반대하지 않습니다.

onload 속성을 추가하면 이미지가 로드될 때 imgLoaded() 함수가 호출됩니다. 그것은에 배치되어야합니다 자바스크립트 파일페이지 자체의 헤드에(함수에서 사용하는 경우 jQuery 다음, 다른 플러그인 다음) 본문이 구문 분석되고 이미지가 로드되기 전에 컴파일되도록 합니다. 페이지 하단에 함수를 삽입하면 함수 정의 이전에 이미지가 로딩될 확률이 높습니다.

사용하여 예어이건 원본으로 보내드릴 수 있어요 DOM 객체이미지를 귀하에게 자바스크립트 기능인수로 :

function imgLoaded(img)( var $img = $(img); $img.parent().addClass("loaded"); );

함수 imgLoaded(img) (

var $img = $(img);

$img. 부모의(). addClass("로드됨");

또는 간단한 JavaScript를 사용하면 다음과 같습니다.

function imgLoaded(img)( var imgWrapper = img.parentNode; imgWrapper.className += imgWrapper.className ? " 로드됨" : "로드됨"; );

함수 imgLoaded(img) (

var imgWrapper = img . 부모노드 ;

imgWrapper. className += imgWrapper . 수업 이름? " 로드됨" : "로드됨" ;

javascript를 사용하면 DOM을 한 수준 위로 빠르게 탐색하고 포함된 래퍼 요소에 로드된 클래스를 추가할 수 있습니다. 나는 이것이 놀랍도록 우아한 솔루션이라는 데 동의할 것이라고 확신합니다. 이 클래스의 스타일을 선택적으로 지정하면 이제 불투명도를 1로 설정하여 로드된 이미지를 표시할 수 있습니다.

Img_wrapper.loaded img(불투명도: 1; )

img_wrapper. 로드된 img(

불투명도: 1;

프로세스를 원활하게 진행하기 위해 img에 일부 CSS3 전환을 추가하고 이미지를 로드할 때 "페이드 인" 효과를 얻습니다.

Img_wrapper img( 위치: 절대; 상단: 0; 너비: 100%; 불투명도: 0; -webkit-transition: 불투명도 150ms; -moz-transition: 불투명도 150ms; -ms-transition: 불투명도 150ms; 전환: 불투명도 150ms; )

Img_wrapper img(

위치: 절대;

상단: 0;

너비: 100%;

불투명도: 0;

웹킷 - 전환: 불투명도 150ms;

Moz - 전환: 불투명도 150ms;

Ms - 전환: 불투명도 150ms;

전환: 불투명도 150ms;

다음을 포함하여 codepen.io의 실제 예제를 참조하세요. 대체 버전로딩 스피너 디스플레이 포함.

프로그레시브 JPG

이 기술에 대한 참고 사항과 이 기사에서 받은 피드백 중 일부에 대한 응답으로 "프로그레시브" JPG를 언급할 가치가 있습니다. 이는 1990년대로 거슬러 올라가는 또 다른 오래된 기술로, 한 줄씩 로드되는 것을 방지하기 위해 JPG를 "일반"이 아닌 "프로그레시브"로 저장하고 대신 이미지를 프레임별로 동일한 높이로 렌더링하는 것과 관련이 있습니다. 잔뜩. 이 기술의 주요 이점은 이미지가 로드될 때 들어오는 콘텐츠가 페이지 주위로 이동하는 것을 방지한다는 것입니다.

로딩 스피너 및 페이드 인과 같은 효과가 성가신지 여부는 개인 취향의 문제이지만 일반적으로 div 래핑 트릭은 최소한의 CSS 및 JavaScript로 이러한 문제를 해결합니다..

래핑 div 기술을 사용할 때 가장 좋은 점은 이미지가 로드될 때 이미지의 높이가 변경되는 것에 대해 걱정할 필요가 없으며 사용자가 보기 흉한 픽셀 그룹화에 노출될 필요가 없다는 것입니다. 사용자에게는 짜증스러울 만큼 짜증스럽습니다. 일반 다운로드. 게다가 비용도 들지 않습니다. 사진을 여러 번 다시 표시하는 과정은 실제로 저전력 장치에 추가적인 스트레스를 가합니다. 모바일 장치. 로딩 스피너 및 페이드 인과 같은 효과가 성가신지 여부는 개인 취향의 문제이지만 일반적으로 div 래핑 트릭은 최소한의 CSS 및 JavaScript로 이러한 문제를 해결하며 저장할 때 (CMS 상황에서) 사용자에게 의존할 필요가 없습니다. 특정 방식의 JPG.

2. 여러 이미지 일괄 업로드

위의 기술은 매우 좋습니다. 개별 이미지, 하지만 캐러셀이나 슬라이드쇼에 표시하고 싶은 이미지가 있거나 Masonry와 같은 레이아웃 플러그인을 사용한다면 어떻게 될까요? 흔한 실수캐러셀/슬라이더 플러그인을 사용하면 문서가 준비된 상태에서 처리되며, 종종 모든 이미지가 로드되기 전에 처리됩니다. 이로 인해 슬라이드쇼가 아직 로드되지 않은 빈 이미지로 건너뛸 수 있습니다. 특히 고해상도 사진을 다루는 경우에는 더욱 그렇습니다. 큰 사이즈파일.

이러한 현상을 방지하려면 필요한 모든 이미지가 이미 로드된 경우에만 선호하는 플러그인을 처리해야 합니다. 위 기술의 변형을 사용하여 슬라이드쇼의 모든 이미지에 onload 속성을 다시 추가하겠습니다.

주의: 아래 마크업은 슬라이드쇼 플러그인 마크업의 단순화된 예로만 제공되며 요구 사항에 맞게 사용자 정의해야 합니다.

< div id = "Slideshow" >

< img src = "slide_1.jpg" alt = "" onload = "slideLoaded(this)" / >

< img src = "slide_2.jpg" alt = "" onload = "slideLoaded(this)" / >

< img src = "slide_3.jpg" alt = "" onload = "slideLoaded(this)" / >

< / div >

JavaScript에서는 SlideLoaded() 함수를 사용하여 이미지 로딩 프로세스를 추적하고 준비가 되면 플러그인을 실행합니다.

function SlideLoaded(img)( var $img = $(img), $slideWrapper = $img.parent(), total = $slideWrapper.find("img").length, ratesLoaded = null; $img.addClass("loaded "); var load = $slideWrapper.find(".loaded").length; if(loaded == total)( centLoaded = 100; // 플러그인 초기화 $slideWrapper.easyFader(); ) else ( // 추적 PROCESS 백분율로드 = 로드됨/전체 * 100);

함수 SlideLoaded(img) (

var $img = $(img) ,

$slideWrapper = $img. 부모의(),

총계 = $slideWrapper . ("img")를 찾으세요. 길이,

퍼센트로드 = null ;

$img. addClass("로드됨");

var 로드 = $slideWrapper . find(".loaded"). 길이 ;

if (로드 == 총 ) (

퍼센트로드 = 100 ;

// 플러그인 초기화

$slideWrapper. 이지페이더();

) 또 다른 (

// 프로세스 추적

백분율로드 = 로드됨 / 총계 * 100;

머티리얼을 로드할 때마다 로드된 클래스를 추가하여 진행 상황을 추적합니다.
마지막으로 플러그인을 초기화하면 ( 이 경우 jQuery EasyFader) 로드된 클래스가 포함된 이미지 수가 컨테이너에 있는 전체 이미지 수와 동일한 경우. 추가 속성으로 로드된 변수를 전체 변수로 분할하고 이를 사용하여 사용자의 진행 상황을 시각화할 수 있습니다. 백분율, 또는 진행률 표시줄의 너비 또는 기타 유사한 기능을 제어하는 ​​데 사용합니다.

다시 말하지만, 이 스크립트는 문서의 헤드 부분, jQuery 및 준비가 되면 처리할 플러그인 뒤에 위치해야 합니다.

3. 속도를 위한 이미지 사전 캐싱

다음이 포함된 사이트 큰 금액이미지를 다운로드할 때 로드를 약간 줄일 수 있습니다. 백그라운드 로딩사용자가 페이지를 탐색하는 동안 이미지를 브라우저 캐시에 저장합니다.

예를 들어, 각 보조 페이지 상단에 고해상도 이미지가 있는 다중 페이지 사이트가 있다고 가정해 보겠습니다. 사용자가 다음 페이지로 이동할 때마다 모든 이미지가 로드될 때까지 기다리게 만드는 대신 별도의 페이지, 사용자가 페이지에 도달하기 전에 캐시에 로드할 수 있습니다. URL을 배열에 넣는 것부터 시작해 보겠습니다.

var HeroArray = [ "/uploads/hero_about.jpg", "/uploads/hero_history.jpg", "/uploads/hero_contact.jpg", "/uploads/hero_services.jpg" ]

var HeroArray = [

"/uploads/hero_about.jpg" ,

"/uploads/hero_history.jpg" ,

"/uploads/hero_contact.jpg" ,

"/uploads/hero_services.jpg"

일반적으로 저는 CMS나 사이트를 구축하는 백엔드를 사용하여 이 데이터를 바닥글의 스크립트 태그 형식으로 페이지 자체에 전달합니다. 이러한 방식으로 이미지 목록을 동적으로 업데이트하고 확장할 수 있습니다.

사용자가 내 사이트의 홈 페이지에 도착하면 나는 이를 기다립니다. 완전 부하, 작업을 수행하기 전에 제3자 로드를 추가하여 페이지 자체의 콘텐츠 로드를 방해하지 않는지 확인하세요. 이를 위해 JavaScript 기능을 창 로드 이벤트에 연결하겠습니다. 이 이벤트는 페이지의 모든 콘텐츠(이미지 포함)가 이미 로드되고 렌더링된 경우에만 실행됩니다. 반면, 문서 준비 이벤트는 다음과 같이 실행됩니다. DOM이 준비되었습니다:

function preCacheHeros())( $.each(heroArray, function())( var img = new Image(); img.src = this; )); $(window).load(function())( preCacheHeros(); ));

함수 preCacheHeros() (

$. 각각(heroArray, function()(

var img = 새 이미지();

img. src = 이것 ;

} ) ;

$(창). 로드(함수()(

preCacheHeros();

} ) ;

또는 간단한 JavaScript를 사용하면 다음과 같습니다.

함수 preCacheHeros())( for(i = 0; i< heroArray.length; i++){ var url = heroArray[i], img = new Image(); img.src = url; }; }; window.onload = preCacheHeros();

함수 preCacheHeros() (

(i = 0; 나는< heroArray . length ; i ++ ) {

var url = HeroArray[i],

img = 새 이미지();

img. 소스 = URL ;

창문. onload = preCacheHeros() ;

루프를 사용하여 HeroArray를 반복하여 각 반복마다 빈 이미지 객체를 생성한 다음 URL을 이미지의 src 속성으로 설정합니다. 이렇게 하면 현재 세션의 브라우저 캐시에 이미지가 로드되므로 사용자가 실제로 이미지가 표시되는 페이지를 방문하면 해당 이미지가 즉시 나타납니다.

불행하게도 사전 캐싱을 실행하면 로딩 시간이 빨라지고 클라이언트 측의 사용자 경험이 향상되지만 실제로는 서버의 로드가 증가합니다. 이 경우 예비 캐싱을 수행하기 전에 사이트 분석을 고려하는 것이 좋습니다. 대부분의 사용자가 방문하는 경우 홈페이지보조 페이지를 방문하기 전에 사이트를 떠나면 비용이 발생합니다. 추가 요청서버에 미치는 영향은 남아 있는 소수의 사용자에게 제공되는 이점보다 클 수 있습니다.

사전 캐싱을 구현하기 전에 사이트 분석을 고려하는 것이 좋습니다.

인지적 사전 캐싱

하지만 실제로 사전 캐싱을 사용하고 싶다면 이미지를 다음과 같이 분할하는 것이 좋습니다. 중요한 그룹, 사이트에 전략적으로 배치됩니다. 예를 들어, 사이트에 머무르는 대다수의 사용자가 홈 페이지를 방문한 후 보조 페이지로 이동한다는 것을 알고 있으면 이들이 홈 페이지에 있는 동안 보조 페이지의 메인 페이지 이미지를 미리 캐시합니다.

그러나 내 블로그 게시물 각각에도 고해상도 이미지가 있다고 가정해 보겠습니다. 방문자가 홈 페이지에 있는 동안 이를 사전 캐싱하는 것은 서버 측에서 큰 타격을 줄 뿐만 아니라 홈 페이지를 방문하는 사용자 중 15%만이 클릭하여 연결되므로 리소스 낭비가 될 수도 있습니다. 블로그 게시물. 최고의 장소사전 캐싱된 블로그 이미지는 거의 모든 사용자가 블로그 게시물로 이동한다는 점을 알고 있는 경우 랜딩 페이지가 될 수 있습니다.

이를 사전 인지 사전 캐싱이라고 하며, 분석의 통계 데이터를 사용하여 사용자가 사이트를 이동할 때 행동 패턴을 예측합니다. 다소 환상적으로 들릴 수도 있지만 방문자의 흐름을 얼마나 정확하게 예측하고 이를 귀하(및 귀하의 사용자)의 이점으로 전환할 수 있는지 놀라게 될 것입니다.

조금 환상적으로 들릴지 모르지만 방문객의 흐름을 얼마나 정확하게 예측할 수 있는지 놀라게 될 것입니다.

4. 서버 부하를 줄이기 위한 이미지 지연 로딩

지연 로딩의 개념은 이미지가 로드되는 것을 의미합니다. 프로그래밍 방식으로문서가 로드되자마자 브라우저가 페이지의 모든 이미지를 요청하고 표시하는 것을 방지하기 위해 특별한 이벤트 후에.

길거나 이미지가 많은 페이지에 주로 사용됩니다. ~에 방문 페이지 Barrel Blog에서는 지연 로딩을 MixItUp 플러그인과 결합하여 현재 필터나 ​​페이지에 없는 이미지가 해당 요소가 표시될 때까지 불필요하게 로드되지 않도록 합니다. 우리는 img_wrapper 클래스를 사용하여 div에서 지연 로딩이 발생하는 모든 이미지를 다시 래핑할 것입니다. 그러면 다음으로 쉽게 선택할 수 있도록lazy_load 클래스가 제공됩니다. jQuery를 사용하여:

) . 로드(함수()(

게으른로드();

위 함수는 창 로드 이벤트가 발생한 후 모든 이미지를 느리게 로드하지만 .each() 루프 내부의 코드는 다양한 상황에 맞게 조정될 수 있습니다. 이에 대한 매우 일반적인 용도는 창 스크롤 이벤트에 연결하고 뷰포트로 스크롤할 때 이미지를 느리게 로드하는 것입니다.

이미지 업로드를 진행합니다.

지난 12개월 정도 다양한 프로젝트에서 이러한 기술 몇 가지를 실험하면서 최근에 재설계된 배럴니.com 프로젝트(4월에 다시 출시됨)에서 사용할 수 있도록 기술을 다듬고 연마해야 했습니다. 사진과 이미지가 많은 웹사이트에서 성능을 최대한 끌어내려고 노력하면서 이미지가 우아하게 로드되도록 하기 위해 네 가지 기술을 모두 조합하여 사용했습니다. 사전 캐싱 및 지연 로딩을 AJAX 페이지 로딩, 슬라이드쇼 및 클라이언트 측 페이지 매김과 결합하여 사이트 전체에 매우 부드러운 느낌을 만들 수 있었습니다.

Barrel 개발팀의 프레젠테이션을 위해 이러한 기술을 정리하는 동안 저는 이러한 기술이 종이에 얼마나 가볍고(일반적으로 jQuery의 코드 5~10줄) 어떤 프로젝트에든 구현하기가 얼마나 쉬운지 보고 놀랐습니다. 또한, 각각은 불필요한 번거로움 없이 간단한 JavaScript를 사용하여 작성할 수 있으며, 추가 코드, 그러나 자주 사용하는 것처럼 jQuery를 사용하는 경우 강력한 DOM 탐색 기술을 활용해야 합니다.

이러한 기술은 의심할 여지가 없습니다. 유일한 방법각각의 기능을 수행하지만 기존 프레임워크 및 플러그인에 쉽게 적용할 수 있습니다. 아직 이미지 업로드를 고려하지 않으셨다면 지금 그렇게 하시길 바랍니다! 그 중 한두 가지를 다음 프로젝트에 적용해 보는 것은 어떨까요?

서버에 파일이나 사진을 업로드하는 것은 꽤 일반적인 작업. 하지만 진행이 멈추지 않으므로 이제는 물론 파일을 다운로드하고 싶습니다. 배경. 일반적으로 이전에는 플래시 또는 iframe 기술을 사용하여 구현할 수 있었습니다. 또한 많은 사람들이 jQuery Form Plugin이나 아약스 파일플러그인 업로드 또는 다중 파일 업로드 플러그인 및 기타 다양한 기능을 제공합니다. FormData 개체의 출현으로 모든 것이 훨씬 단순해졌습니다. FormData()를 사용하면 XMLHttpRequest를 사용하여 서버에 보낼 데이터 세트를 구성할 수 있습니다.

백그라운드에서 서버에 사진이나 파일을 업로드하기 위해 플러그인 없이(물론 jQuery 프레임워크는 제외) 자체 코드를 작성해 보겠습니다. 일반적으로 우리 작업의 알고리즘은 다음과 같습니다. 양식 필드를 데이터로 채웁니다. 필드는 텍스트, 텍스트 영역, 선택 및 파일 등 무엇이든 될 수 있습니다. 파일을 선택하면 jQuery 코드 덕분에 이러한 파일은 백그라운드에서 서버의 임시 디렉터리(예: "tmp")로 다운로드됩니다. 다음으로 버튼을 누르면 양식 제출, 데이터는 데이터를 처리할 서버 스크립트로 전송됩니다. 이것이 기사라고 상상해 봅시다. 우리는 고유한 ID를 가진 데이터베이스에 전송된 데이터를 기록합니다. 다음으로, "images" 디렉터리에 고유 번호 "id"를 갖는 디렉터리를 생성하고 "tmp" 폴더에 파일이 있으면 생성된 "id" 폴더에 복사한 다음 "tmp"를 지웁니다. " 폴더. 요약하자면, 배경으로 그림을 tmp에 채우고 양식을 제출할 때 데이터를 데이터베이스에 기록합니다. 고유번호기록. 이 번호로 폴더를 만들고 거기로 파일을 이동합니다. 모두. 이 기사에서는 데이터베이스에 업로드하고 파일을 복사하는 것을 고려하지 않습니다. 여기 있는 모든 사람들을 위한 뭔가가 있을 것 같아요. 우리는 한 가지에 집중할 것입니다 - 비동기 로딩사진(또는 파일).

여기에 우리의 HTML 조각이 있습니다. 여기서는 스타일로 표시되지 않는 프리로더(루프형 원)의 그림이 포함된 GIF 파일이 있다는 사실에 주목할 것입니다. 또한 파일 필드에 id = file을 할당하고 양식에 enctype = "multipart/form-data"를 할당합니다. 파일 필드 이름은 file입니다. 여러 파일(다중 속성)을 업로드할 수 있으므로 배열 작업을 할 수 있습니다.

#preloader (가시성: 숨김;) 정보 추가

이 양식에는 파일 필드 외에도 입력=텍스트와 같은 두 개의 필드가 있습니다. 저것들. 우리 앞에는 필요한 필드 세트인 관리자 패널과 같은 일반 양식이 있습니다. 우선, 원하는 경우 파일 시작 부분에 FILES 배열을 표시하는 줄을 작성하여 스크립트의 작동을 확인할 수 있습니다.

//upload.php print_r($_FILES);

이제 jQuery를 사용하여 호출할 서버 스크립트를 작성해 보겠습니다. 그 임무는 예를 들어 "tmp"에서 결정한 대로 업로드된 파일을 서버의 임시 디렉터리에서 우리 디렉터리로 전송한 다음 표시하는 것입니다.

//upload.php function show_dir($dir) // tmp 폴더의 사진을 표시하는 함수 ( $list = scandir($dir); unset($list,$list); foreach ($list as $file) ( echo " "; ) ) foreach ($_FILES as $key => $value) ( ​​​​//파일을 tmp로 이동 move_uploaded_file($value["tmp_name"], "tmp/".$value["name"]); ) show_dir("./tmp/");

이제 파일을 백그라운드에서 서버에 업로드하는 js 스크립트입니다. FormData() 개체 덕분에 모든 마법이 수행됩니다. 이 코드를 index.php 끝부분의 태그 앞에 추가하겠습니다.

$(document).ready(function())( $("#preloader").hide(); $("#file").bind("change", function())( var data = new FormData() ; var error = ""; jQuery.each($("#file").files, function(i, file) ( if(file.name.length< 1) { error = error + " Файл имеет 잘못된 크기! "; ) //이름 길이 확인 중 if(file.size > 1000000) ( error = error + " File " + file.name + "가 너무 큽니다."; ) //파일 크기 확인 중 if(file.type != "image/png" && file.type != "image/jpg" && !file.type != "image/gif" && file.type != "image/jpeg") ( 오류 = 오류 + "파일 " + 파일 .name + "는 png, jpg 또는 gif와 일치하지 않습니다."; ) //파일 형식 확인 중 data.append("file-"+i, file )) if (error != "") ($("#info) " ).html(error);) else ( $.ajax(( url: "upload.php", data: data, 캐시: false, contentType: false, processData: false, type: "POST", beforeSend: function( ) ( $("#preloader").show(); ), 성공: function(data)( $("#info").html(data); $("#preloader").hide(); ) ) ) ; ) )) ));

글쎄, 그게 전부인 것 같습니다. 누군가 이해하지 못하는 것이 있으면 물어보십시오. 누구든지 추가 사항이 있으면 나도 기뻐할 것입니다!
팁: 아직 코드를 사용하여 디렉터리에서 파일을 삭제하지 않은 경우 삭제하려는 파일만 삭제되는지 확인하기 위해 rmdir 삭제 기능을 에코로 변경하여 테스트하는 것이 좋습니다. 예를 들어 Gif 프리로더는 내 강의인 Gif 애니메이션 만드는 방법에서 가져올 수 있습니다. 기사 끝부분에 예시가 있습니다.

UPD:

예를 들어 진행률 표시줄과 같은 아름다움을 추가하려는 경우 몇 줄의 코드를 추가해야 합니다. 안에 HTML 템플릿우리는 html5의 슈퍼 요소(progress)를 추가할 것이고, js 코드에서는 XMLHttpRequest 객체가 있는 여러 줄을 추가할 것입니다.
따라서 우리의 HTML은 다음과 같이 보완됩니다.

그리고 js 코드에 추가해 보겠습니다.

함수 ProgressHandlingFunction(e)( if(e.lengthComputable)( $("progress").attr((value:e.loaded,max:e.total)); ) )

Xhr: function() ( var myXhr = $.ajaxSettings.xhr(); if(myXhr.upload)( // 업로드가 진행되고 있는지 확인 myXhr.upload.addEventListener("progress",progressHandlingFunction, false); // 함수 값으로 전달 ​​) return myXhr;

js 코드의 최종 결과는 다음과 같습니다.

$(document).ready(function())( function ProgressHandlingFunction(e)( if(e.lengthComputable)( $("progress").attr((value:e.loaded,max:e.total)); ) ) $("#preloader").hide(); $("#file").bind("change", function())( var data = new FormData(); var error = ""; jQuery.each( $( "#file").files, function(i, 파일) ( if(file.name.length< 1) { error = error + " Файл имеет неправильный размер! "; } if(file.size >1000000) ( 오류 = 오류 + " 파일 " + file.name + " 가 너무 큽니다."; ) if(file.type != "image/png" && file.type != "image/jpg" && !file. type != "image/gif" && file.type != "image/jpeg") ( error = error + "File " + file.name + "는 png, jpg 또는 gif와 일치하지 않습니다."; ) data.append( "파일 -"+i, 파일); ))); if (error != "") ($("#info").html(error);) else ( $.ajax(( url: "productUploadImg.php", 유형: "POST", xhr: function() ( var myXhr = $.ajaxSettings.xhr(); if(myXhr.upload)( // 업로드가 진행 중인지 확인 myXhr.upload.addEventListener("progress",progressHandlingFunction, false); //함수에 값 전달 ) return myXhr ) , data: data, 캐시: false, contentType: false, processData: false, beforeSend: function() ( $("#preloader").show(); ), 성공: function(data)( $( "#info" ).html(data); $("#preloader").hide(); 오류: errorHandler = function() ( $("#info").html("파일 로드 오류"); ) )) ))));

우리는 데이터를 검색하고 AJAX 요청으로 전달하는 몇 가지 기본 방법을 살펴보았습니다. 이제 다음에서 파일을 다운로드하는 방법에 대해 이야기할 차례입니다. AJAX를 사용하여. 최근까지는 페이지 자체(숨겨진 iframe, Flash)를 다시 로드하지 않고 파일을 다운로드할 수 있는 방법이 그리 많지 않았습니다. 진행 상황에 영향을 받지 않은 이전 버전의 브라우저를 사용하는 사용자가 여전히 있기 때문에 오늘날에도 여전히 사용되고 있습니다. 하지만 우리는 뒤돌아보지 않을 것이기 때문에 시대에 발맞추어 가고 있습니다.

제 생각에는 가장 큰 것 중 하나를 고려해 보겠습니다. 편리한 방법파일 작업용(그뿐만 아니라) - FormData 개체. 사용자의 아바타를 로드하기 위한 간단한 양식이 있다고 가정해 보겠습니다.

HTML( index.html 파일)

성명:
화신:

JS 부분으로 넘어가겠습니다. "전체 이름" 필드에는 어려움이 없으며 파일과 함께 다른 데이터를 보낼 수 있다는 점을 설명하기 위해서만 사용됩니다.

jQuery( script.js 파일)

$(function())( $("#my_form").on("제출", function(e)( e.preventDefault(); var $that = $(this), formData = new FormData($that.get ( 0)); // 새 객체 인스턴스를 생성하고 여기에 양식을 전달합니다. (*) $.ajax(( url: $that.attr("action"), type: $that.attr("method"), contentType: false , // 중요 - 기본 데이터 서식을 제거합니다. processData: false, // 중요 - 기본 문자열을 제거합니다. 변환 data: formData, dataType: "json", Success: function(json)( if(json)( $that .replaceWith(json);

(*)양식을 제출하지 않습니다. jQuery 객체및 DOM 요소

PHP 핸들러( 파일 핸들러.php)



질문이 있으신가요?

오타 신고

편집자에게 전송될 텍스트:

보내다