등록하지 않고 여러 페이지 양식 작성 - 완료되지 않은 항목

Question

정확한 접근 방식에 대한 간단한 질문. 나는 각 게시물이 검토 될 사용자 등록없이 데이터베이스에 양식 게시물을 허용하고 있습니다. 그러나이 페이지는 파일 업로드를 포함하여 여러 페이지로 구성됩니다.

사용자가 파일 업로드를 포함하여 양식을 제출하고 처음 몇 페이지를 검토 한 다음 양식 제출을 포기하면 어떻게됩니까?

불필요한 데이터를 정리하고 파일을 업로드하는 방법은 무엇입니까? 게시하는 동안 제거하지 않도록하십시오.

Answer 1

나는 비슷한 문제를 다루고 있었다. 내 상황이 조금 달랐어. 사용자가 광고를 올릴 수있는 기회와 동시에 이미지 업로드를 허용 할 수있는 옵션을 제공해야했습니다.

업로드 된 이미지 파일 이름을 보유하고있는 양식에 숨겨진 필드를 추가하여 접근했습니다. 업로드 자체의 경우 준비된 라이브러리 dropzone.js를 사용했습니다. 버려진 양식 프로세스의 문제점을 경험 했으므로 임시 위치/임시 파일 에 파일을 저장하기로 결정한 다음 양식이 실제로 다음 값을 기반으로 완료된 경우 숨겨진 필드 나는 그 이미지를/temp에서 영구적 인 위치로 옮길 것입니다. 남은/temp 폴더는 생성 된 시간을 확인하고 예를 들어 오래된 것을 삭제하는 예약 된 작업으로 쉽게 제거 할 수 있습니다.

희망 사항이 있으면 아이디어를 얻을 수 있습니다.

Answer 2

또 하나의 거대한 양식을 만들지 만 자바 스크립트로 여러 단계로 나눕니다. 마지막 탭의 버튼 만 양식을 제출하고 다른 버튼은 다음 단계를 보여줍니다. "다음"조치 후에 약한 유효성 검증을 수행하고 양식을 제출 한 후 서버에 대한 유효성 검증을 수행 할 수 있습니다.

http://jsfiddle.net/ht227xy3/1/

<script> 
function switcher(activeBlock, passiveBlocks){ 
    document.getElementById(activeBlock).style.display=''; 
    for (i in passiveBlocks){ 
     if (document.getElementById(passiveBlocks[i])) 
      document.getElementById(passiveBlocks[i]).style.display='none'; 
     } 
    return false; 
    } 
</script> 

<form onsubmit="alert('Now form submits!!!')" action="" method="post"> 
    <div id="first" class="tab"> 
     <h3>Step 1 of 4</h3> 
     <b>Field 1:</b> <input type="text" name="field1" value="" /><br /> 
     <br /> 
     <button type="button" onclick="switcher('second', ['first','third','fourth']);">Next</button> 
    </div> 
    <div style="display:none;" id="second" class="tab"> 
     <h3>Step 2 of 4</h3> 
     <b>Alt 1:</b> <input type="text" name="alt1" value="" /><br /> 
     <br /> 
     <button type="button" onclick="switcher('third', ['first','second','fourth']);">Next</button> 
    </div> 
    <div style="display:none;" id="third" class="tab"> 
     <h3>Step 3 of 4</h3> 
     <b>Extra 1:</b> <input type="text" name="extra1" value="" /><br /> 
     <br /> 
     <button type="button" onclick="switcher('fourth', ['first','second','third']);">Next</button> 
    </div> 
    <div style="display:none;" id="fourth" class="tab"> 
     <h3>Step 4 of 4</h3> 
     <b>File 1:</b> <input type="file" name="file1" /><br /> 
     <br /> 
     <input type="submit" value="Submit" /> 
    </div> 
</form>