dextupload 예제

dextupload 예제

파일을 업로드할 때 어떤 일이 발생하려면 위의 코드에서 만든 업로더 인스턴스에서 FileUploaded 이벤트를 구현할 수 있습니다. 내 예에서 서버는 업로드된 이미지와 크기 조정된 이미지를 서버에서 사용할 수 있는 URL을 반환합니다. response.response 아래 코드에는 이미지에 대한 URL이 포함되어 있으며, 이 URL은 요소를 생성한 다음 문서의 ImageContainer

태그에 추가됩니다. 예제와 작동하도록 관련된 응용 프로그램 코드를 살펴보겠습니다. plUpload 구성 요소로 클라이언트에서 시작해 보겠습니다. 이러한 처리기의 작동 방식을 살펴보기 전에 샘플 이미지 업로더 샘플 앱의 구현 예제를 살펴보겠습니다. 여기에 서버 측에 대한 프로세스는 간단합니다 : 처리기 구현에 추가 이벤트를 구현 할 수 있습니다. 예를 들어이 처리기에 대한 내 코드에는 업로드 폴더가 복잡하지 않도록 기본적으로 15 분 이상 된 파일을 삭제하는 OnUploadStarted() 메서드도 포함되어 있습니다: plUpload에는 사용자 인터페이스를 제공하는 jQuery 및 jQuery UI 구성 요소가 있습니다. 이 구성 요소는 더 풍부한 인터페이스를 제공하기 때문에 jQuery jquery.plUploadQueue 구성 요소만 사용했습니다.

다음은 업로더가 이 게시물에 보여드리는 이미지 업로더 예제의 일부로 보이는 내용입니다: 전반적으로 업로드 하는 클라이언트 프로세스는 구현하기가 매우 간단합니다. 캡처하여 UI를 처리하는 방법을 결정하는 데 사용할 수 있는 몇 가지 추가 이벤트가 있지만, 예를 들어 첫 번째 업로드 후 UI를 다시 로드하거나 다운로드를 모두 비활성화하는 데는 많은 옵션이 없습니다. 이렇게하려면 DOM 요소를 수동으로 숨기기 / 제거해야합니다. 이 문서에서는 plUpload를 사용하여 파일을 ASP.NET 서버에 업로드하고 단일 이미지 업로더 페이지를 사용하여 업로드 된 처리 프로세스를 크게 단순화하는 기본 HttpHandler (Westwind.plUploadHandler) 구현을 제공하는 것을 보여 줍니다. plUpload 클라이언트의 파일입니다. plUpload가 원본 파일 이름 또는 임의로 생성된 이름을 보낼지 여부를 지정할 수 있습니다. 응용 프로그램에 따라 업로드된 파일 이름이 무엇인지 추측하지 않도록 임의의 이름이 유용할 수 있습니다. 이 예제에서는 실제로 업로드 된 이미지를 즉시 표시하려고하므로 고유 한 이름을 원하지 않습니다. 예제를 살펴보고 들어오는 파일 또는 파일 청크 처리를 크게 간소화하는 사용자 지정 HttpHandler를 사용하여 클라이언트의 plUpload 및 서버의 ASP.NET HTTP 처리기를 사용하여 빌드하는 방법을 살펴보겠습니다. 이 사용자 지정 plUploadHandler 구현을 사용하면 여러 `이벤트`를 들을 수 있지만 대부분의 응용 프로그램에서는 완료 이벤트가 구현해야 하는 유일한 이벤트입니다. 이 예제에서는 ImageUploadHandler.ashx라는 ASHX 기반의 HttpHandler를 사용하고 이미지 파일을 서버에 효과적으로 업로드하기 때문에 plUploadFileHandler에서 상속합니다.

이 응용 프로그램 수준 처리기의 코드는 다음과 같습니다: 전체 HTML을 보려면 이 예제의 나머지 부분과 함께 GitHub의 UploadImages.htm 페이지를 확인할 수 있습니다. 당신이 원하는 모든 경우 화재 및 지정된 폴더에 파일 업로드를 잊어 버려 당신은 직접이 처리기를 사용할 수 있습니다. 그러나 일반적으로 ImageUploadHandler.ashx 응용 프로그램 구현에서와 같이 데이터가 도착하면 데이터로 작업을 수행하는 것이 좋습니다. 이 예제에서는 plUploadBaseHandler에서 하위 클래스를 지정하고 OnUploadCompleted 메서드를 구현하여 별도의 폴더에 이미지의 크기 조정 및 저장을 처리했습니다. 나는 대부분의 응용 프로그램이 그런 일을 할 것이라고 생각한다. 일반적으로 업로드된 파일의 이름을 추측하고 파일이 완전히 업로드되기 전에 액세스하는 것을 방지하기 위해 업로드 폴더를 웹에 직접 노출하지 않으려고 합니다. 여기서 파일은 ~/tempUploads에 업로드한 다음 이미지를 표시할 수 있는 ~/UploadedImages 폴더로 파일을 복사합니다.