2012-11-02 1 views
2

우리는 Blueimp Jquery File Upload를 사용하고 있습니다.blueimp - jquery fileupload onClick 이벤트

업로드를 시작하는 버튼을 어떻게 추가합니까?

지금 바로 업로드는 사용자가 파일을 선택하자 마자 발생합니다. 사용자가 파일을 선택한 다음 업로드 버튼을 클릭하게하고 싶습니다.

JS 파일을 변경하고 autoUplaod를 false로 설정했지만 OnClick을 작동시키는 방법을 알아낼 수 있습니다. 어쩌면

<script> 
$(function() { 
    $('#fileupload').fileupload({ 
     dataType: 'json', 
     done: function (e, data) { 
      $.each(data.result, function (index, file) { 
       $('<p/>').text(file.name).appendTo(document.body); 
      }); 
     } 
    }); 
}); 
</script> 

답변

14

추가 기능 콜백을 찾고 있습니다 :

$(function() { 
    $('#fileupload').fileupload({ 
     dataType: 'json', 
     done: function (e, data) { 
      $.each(data.result, function (index, file) { 
       $('<p/>').text(file.name).appendTo(document.body); 
      }); 
     }, 
     add:function (e, data) { 
      $("#uploadBtn").off('click').on('click',function() {   
      data.submit(); 
      }); 
     } 
    }); 
}); 
+1

이 .OFF 것을 @roasted 브라우저를 확인하기 위해 "forceIframeTransport"을 트위닝 할 필요가, 함수() {... 트릭은 절대적으로 멋지다. 정말 고마워요. 내가 할 수 있다면, 정직하게 키스 할 것입니다. – anpatel

+2

플러그인 코드 외부에서 data.send()를 어떻게 호출합니까? 업로드를 시작하려면 어떻게해야합니까? ('ajax : complete', function() {// 여기에 업로드 시작}) ' – Mohamad

+0

@Mohammad 당신이 관심을 가질만한 다른 아약스 요청에서, 그것은 무관하다. 다음 페이지를 읽으십시오. https://github.com/blueimp/jQuery-File-Upload/wiki/Submit-files-asynchronously –

-1
내가 "추가"기능을 수정하려고

, 그리고 좀 인터넷 익스플로러의 모두 제외하고 작동이 표시되지 않습니다 선택한 파일을 브라우저를 입력 상자에. 또한, 제 경험상, 버튼을 클릭하기 전에 여러 번 변경하면 모든 파일이 업로드됩니다. 이 나를 위해 일했습니다 : 1. blueimp 파일 업로드 개체를 즉시 인스턴스화하지 마십시오 2. 파일 업로드 개체를 기본적으로 인스턴스화하는 함수를 만듭니다. 3. 위의 # 2에서 함수를 첨부하십시오. 중복이 있음을 알고 있습니다. 아래 내 코드에서. 또한 IframeTransport를 강제로 실행하면 브라우저 체크를 할 수 있습니다. 당신은 또한 당신이 "file"을 사용할 수있는 다른 모든 사람들을 위해 "fileInput"을 사용할 수있는 것과 같이 add 함수에 대한 브라우저 검사를 할 수 있습니다. 이 진행률 표시 줄을 제외한 모든 브라우저에서 나를 위해 잘 작동, 난 ('클릭'에. ('클릭')

<script> 
    $(function() { 
     /*do your jquery stuff here, but do not call fileupload*/ 
     $("btnUpload").click(function(){ 
      /*i can add additional post params*/ 
      /*some of this is redundant*/ 
      var post = Array({name:"hello", value:"there"}); 
      uploadFileOnClick("fileupload", $("#fileupload") ,post, true); 
     }); 
    }); 
    function uploadFileOnClick(id, file, post, _autoUpload) { 
     $('#'+id).fileupload({ 
      dataType: 'json', 
      multipart: true, 
      autoUpload: true, 
      formData: post, 
      forceIframeTransport: true, 
      progress: function (e, data) { 
       /*insert progress code here*/ 
      }, 
      done: function (e, data) { 
       /*insert your code here*/ 
      } 
     }); 
     if (_autoUpload) { 
      $('#'+id).fileupload('add', {files: file}); 
     } 
    } 
</script> 
<body> 
    <form method="post" enctype="multipart/form-data"> 
     <input type="file" id="fileupload" name="somename" data-url="yourserver.php?goeshere=true"/> 
    </form> 
    <!-- i use a link in my case, it will work if you use a button in the form as well--> 
    <a href="javascript:void(0);" id="btnUpload">Upload</a> 
</body>