상세 업 로더 - 다른 입력 필드와 함께 사용하는 방법?

Question

나는 전형적인 형태에서 FineUploader를 사용하고 싶습니다 :

<form enctype="multipart/form-data" method="post""> 
    <input name="fileupload" type="file" "> 
    <input type="text" name="title" size="45" maxlength="100"> 
    <textarea name="description" cols="40" rows="8"></textarea> 
    <input type="hidden" name="op" value="Add"> 
<input type="submit" value="Upload"> 

그래서 사실은 주로 <input name="fileupload" type="file" "> 부품을 교체하고 싶습니다.

불행히도 저는 JavaScript 및 jQuery jet에 익숙하지 않으며이를 수행하는 방법을 모릅니다. FineUploader가 보낼 다른 데이터와 함께 사용되는 모범 코드를 찾을 수 없습니다.

나는 어떤 도움을 주셔서 감사합니다!

감사 Kashuda

Answer 1

정밀 업 로더는 옵션 jQuery plug-in을 가지고 (그 문제에 대한 또는 다른 라이브러리) jQuery를 필요로하지 않지만. jQuery를 사용하는 것에 반대하지 않는다면 jQuery 플러그인을 사용하는 것이 좋습니다. jQuery를 사용하면 훨씬 쉽게 작업 할 수 있습니다.

이 고양이를 감추는 데는 몇 가지 방법이 있습니다. 두 경우 모두 수식은 거의 같습니다. 즉, 파인 업 로더가 파일을 처리하고 제출 된 각 파일에 대해 입력 요소를 즉석 작성한 다음 파인 업 로더가 관련 파일을 서버에 보내기 바로 전에 해당 입력 값을 파인 업 로더로 다시 전달합니다.

옵션 # 1 - (사전 내장 UI를 사용하여) FineUploader 모드

FineUploader mode 사용 :

당신은 당신의 필요에 따라 위의 코드에 추가하고, CSS에 기여해야 할 전망이다

<div id="myFineUploaderContainer"></div> 
<button id="uploadSelectedFiles">Upload Selected Files</button> 

$('#myFineUploaderContainer').fineUploader({ 
    request: { 
     endpoint: '/my/upload/endpoint' 
    }, 
    autoUpload: false 
}) 
    .on('submitted', function(event, id, name) { 
     var fileItemContainer = $(this).fineUploader('getItemByFileId', id); 

     $(fileItemContainer) 
     .prepend('<input type="text" name="name">') 
     .append('<input type="text" name="description">'); 
    }) 
    .on('upload', function(event, id, name) { 
     var fileItemContainer = $(this).fineUploader('getItemByFileId', id), 
      enteredName = $(fileItemContainer).find('INPUT[name="name"]').val(), 
      enteredDescr = $(fileItemContainer).find('INPUT[namme="description"]').val(); 

     $(this).fineUploader('setParams', {name: enteredName, description: enteredDescr}, id); 
    }); 

$('#uploadSelectedFiles').click(function() { 
    $('#myFineUploaderContainer').fineUploader('uploadStoredFiles'); 
}); 

적절한 경우, 올바른 방향으로 시작해야합니다. 위의 경우, 선택한 파일을 나타내는 DOM에 목록 항목을 추가하면 FineNavigator가 다시 전화를 기다리고 있습니다. 콜백을 받으면 목록 항목의 시작 부분 (사용자 제공 이름의 경우)과 목록 항목의 끝 부분 (사용자 제공 설명의 경우)에 텍스트 입력 요소를 추가합니다. 파인 업 로더 (Finder Uploader)는 파일을 서버로 전송하고 "업로 드"이벤트 핸들러를 호출하여 입력 요소의 값을 읽고 파인 업 데이트에 제공하고 파일 ID를 통해 파일과 연결합니다. 파인 업 로더는이 정보를 포함합니다 다중 파트 인코딩 된 POST 요청의 파일과 함께 서버로 전송합니다.

클릭 핸들러는 파일을 서버로 보내도록 신호를 보내고 모든 파일을 선택하고 채운 다음 사용자가이를 클릭합니다 일반적으로 파인 업 로더는 파일을 선택한 직후에 서버로 보내지 만 토글로 변경 될 수 있습니다 예 : autoUpload 옵션 상황에 따라 자동 업로드를 끄는 것이 가장 좋습니다.

FineUploader 모드를 사용하면 대부분의 작업이 완료되어 UI에 대해 너무 걱정할 필요가 없으며 진행률 표시 줄 및 기타 UI 기능을 무료로 사용하여 & 끌어 오기 기능을 사용할 수 있습니다.

옵션 # 2 - FineUploaderBasic 모드 (자신 만의 UI를 구축)

두 번째 선택은 FineUploaderBasic mode을 사용하는 것입니다. 이렇게하면 UI를 가장 잘 제어 할 수 있지만 자신 만의 UI를 완전히 만들어야하므로 대부분의 작업이 필요합니다. 즉, 대부분의 callbacks을 사용하여 UI를 구성하고 Fine Uploader의 내부 상태 및 관련 파일과 동기화 된 상태로 유지해야합니다.

예를 들어 진행률 표시 줄을 원한다면 직접 업 그레 이드해야하며 미세 업 로더가 호출하는 onProgress 콜백 처리기를 통해 주기적으로 전달 된 정보를 기반으로 업데이트해야합니다. 자바 스크립트, HTML 및 CSS에 익숙하다면이 모든 것이 좋고 경우에 따라 선호 될 수 있습니다. 그러나 그렇지 않은 경우 FineUploader 모드를 사용해보십시오.

FineUploader 기본 모드에는 기본적으로 드래그 앤 드롭 지원이 포함되어 있지 않지만 원하는 경우 Fine Uploader's standalone File Drag & Drop module을 쉽게 통합 할 수 있습니다.