2010-03-25 5 views
2

백그라운드에서 파일 선택 후 자동으로 시작하고 플래시 업 로더가 필요하지 않은 단일 파일 *을 업로드하는 방법을 찾고 싶었습니다. 메커니즘 (jQuery.Form 및 JQuery MultiFile)을 함께 사용합니다. 나는 성공하지 못했지만 근본적인 것이 빠져 있기 때문에 확신한다. 다음과 같이 그냥 다중 파일을 사용하여 AjaxForm을 사용하면서 프로그래밍 방식으로 양식 제출하기

, 나는

<form id="photoForm" action="image.php" method="post" enctype="multipart/form-data"> 

파일 입력 버튼을 ...

<input id="photoButton" "name="sourceFile" class="photoButton max-1 accept-jpg" type="file"> 

...로 정의 그리고 자바 스크립트입니다 ... 양식을 정의

$('#photoButton').MultiFile({ 
    afterFileSelect: function(){ 
     document.getElementById("photoForm").submit(); 
    } 
}); 

완벽하게 작동합니다. 사용자가 단일 파일을 선택하자 마자 MultiFile은 양식을 서버에 제출합니다. 대신 다중 파일을 사용하는 위의 그림과 같이 ... 이제 나는 다음과 같이 정의 JQuery와 양식 플러그인과 함께 제출 버튼을 포함 말할

var options = { 
    success: respondToUpload 
}; 

$('#photoForm').ajaxForm(options); 

을 할 경우


...이 또한 완벽하게 작동 . 제출 단추를 클릭하면 양식이 백그라운드로 업로드됩니다.


내가 어떻게 해야할지 모르겠지만이 두 가지는 함께 작동해야합니다. Javascript를 사용하여 양식을 제출하면 (위의 MultiFile 예제와 같이) 양식이 제출되지만 JQuery.Form 함수가 호출되지 않으므로 양식이 백그라운드에서 제출되지 않습니다. 나는 어쩌면 내가 다음과 같은 형태로 등록을 변경할 필요가 있다고 생각

...

$('#photoForm').submit(function() { 
$('#photoForm').ajaxForm(options); 
}); 

...하지만 그게 문제가 해결되지 않았다. .ajaxForm 대신 .ajaxSubmit을 시도했을 때도 마찬가지입니다.

무엇이 누락 되었습니까?

  • BTW : 단일 파일 업로드에 MultiFile을 사용하는 것이 이상 할 수도 있지만 파일 수가 사용자의 계정을 기준으로 동적이라고 생각합니다. 그래서 저는 하나부터 시작하지만 숫자는 조건에 따라 변합니다.

답변

1

대답은 당황스럽게 간단합니다. 또한 내가 사용

대신 프로그래밍하여 제출 ...

document.getElementById("photoForm").submit(); 

...

$("#photoForm").submit(); 

, 난 단지 경우에 여러 파일을 업로드해야하기 때문에, 나는 더 간단한 기술을 사용했다 ...

1) 형태는 나의 원래 것과 동일하다.파일 입력 필드가 변경되면, 실행 제출할

<input id="photoFile" "name="sourceFile" style="cursor:pointer;" type="file"> 

3) 파일 입력 필드는 기본적으로 동일

<form id="photoForm" action="image.php" method="post" enctype="multipart/form-data"> 

2) ...

$("#photoFile").change(function() { 
    $("#photoForm").submit(); 
}); 

4) AjaxForm 리스너는 그 일을합니다 ...

var options = { 
    success: respondToUpload 
}; 
$('#photoForm').ajaxForm(options); 
관련 문제