2012-06-15 4 views
12

누구든지이 코드의 문제점을 알고 있다면 알려주십시오.jquery 게시물을 사용하여 PHP 파일 업로드

기본적으로 내가

<?php 
    echo $file['tmp_name']; 
?> 

업로드 된 파일 이름을 다시 반환되지 않습니다

<html> 
<head> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 

    <script type="text/javascript"> 
    $(document).ready(function(event) { 
     $('#form1').submit(function(event) { 
     event.preventDefault(); 
     $.post('post.php',function(data){ 
      $('#result').html(data); 
     }); 
     }); 
    }); 
    </script> 
</head> 
<body> 
<form id="form1"> 
    <h3>Please input the XML:</h3> 
    <input id="file" type="file" name="file" /><br/> 
    <input id="submit" type="submit" value="Upload File"/> 
</form> 

<div id="result">call back result will appear here</div> 

</body> 
</html> 

jQuery를

내 PHP 'post.php'을 사용하여 파일을 업로드 할 수 있습니다. 문제는 내가 업로드 된 파일에 액세스 할 수 없습니다.

미리 감사드립니다. Shiv

+0

무엇을 당신은 –

답변

16

은 기본적으로 내가

당신은 AJAX를 사용하여 파일을 업로드 할 수 없습니다 jQuery를

을 사용하여 파일을 업로드 할 파일 API/BlobApi와 HTML5 업로드를 사용하는 것입니다 .
<html> 
<head> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script src="http://malsup.github.com/jquery.form.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function(event) { 
      $('#form1').ajaxForm(function(data) { 
       $('#result').html(data); 
      }); 
     }); 
    </script> 
</head> 
<body> 
<form id="form1" action="post.php" method="post" enctype="multipart/form-data"> 
    <h3>Please input the XML:</h3> 
    <input id="file" type="file" name="file" /><br/> 
    <input id="submit" type="submit" value="Upload File"/> 
</form> 

<div id="result">call back result will appear here</div> 

</body> 
</html> 

는 또한 양식에 enctype="multipart/form-data"주의 사항 : 숨겨진 iframe을를 사용하는 jquery.form 플러그인을 사용할 수 있습니다.

HTML5 File API을 사용하면 클라이언트 브라우저에서 지원한다고 가정 할 수도 있습니다.

+0

AJAX를 사용하여 파일을 업로드 할 수 없거나 jQuery의 post() 메소드를 사용하여 파일을 업로드 할 수 없다는 것을 의미합니까? –

5

아니요 아니요, 아니요. 비동기 업로드 파일에는 jQuery 양식 플러그인을 사용해야합니다. jQuery $ .post 메서드로 파일을 업로드 할 수 없습니다. 이 파일은 숨겨진 iframe을 함께 업로드됩니다

또 다른 방법은

+0

덕분에 짝하고 있습니다! 지금은 jquery 게시물 대신 일반 html 양식을 제출하겠습니다. 그런 식으로, 그것은 나를 위해 일합니다! – Shiv

0

$ .post 메서드로 파일을 보낼 수 없기 때문에 iframe을 사용하여 업로드 해보십시오.

-1

또한 시도 할 수 JQuery와 uploadify - http://www.uploadify.com/

+0

브라우저에 API가있는 경우 외부 라이브러리를 사용해야하는 이유는 무엇입니까? – Heitara

+0

오래전에 파일을 업로드하는 것에 대해 이야기 했으므로 신기술 개발이라는 측면에서 1 세기 이상은 말할 것입니다. 내가 html5가 없거나 그냥 시작한 것이고 순수한 html이 필요한 플래시 이상의 것 (대부분)을 제안했을 때.Uploadify는 꽤 좋은 라이브러리 였고 다른 기능 중에는 진행 표시 줄, 여러 파일 업로드, 드래그 앤 드롭 기능이 있으며 jquery 기반으로 올바르게 불러 들인 경우. – norbi771

6

그것은 jQuery를 $의 .post 사용하여 파일을 업로드 할 수 없습니다, Neverthless 방지, 파일 API와 XMLHttpRequest를 함께, 그것은 AJAX에서 파일을 업로드 할 수 있도록 완벽하게 가능, 그리고 당신이 할 수있는 얼마나 많은 데이터가 아직 업로드되었는지 알 수 있습니다. ...

$('input').change(function() 
{ 
    var fileInput = document.querySelector('#file'); 

    var xhr = new XMLHttpRequest(); 
    xhr.open('POST', '/upload/'); 

    xhr.upload.onprogress = function(e) 
    { 
     /* 
     * values that indicate the progression 
     * e.loaded 
     * e.total 
     */ 
    }; 

    xhr.onload = function() 
    { 
     alert('upload complete'); 
    }; 

    // upload success 
    if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) 
    { 
     // if your server sends a message on upload sucess, 
     // get it with xhr.responseText 
     alert(xhr.responseText); 
    } 

    var form = new FormData(); 
    form.append('title', this.files[0].name); 
    form.append('pict', fileInput.files[0]); 

    xhr.send(form); 
} 
+0

슬프게도 XHR2에 대한 지원은 아직 좋지 않습니다. 그러나 이것에 대한 귀하의 의견에 감사 드리며, 나는 Zepto 및 일부 모의 데이터를 사용하여 이러한 접근 방식을 사용하여 완벽하게 작동하는 테스트를 수행했습니다. –

+0

현재 모든 주요 브라우저 버전이이를 지원합니다 (심지어 IE 10 이상). http://caniuse.com/xhr2 – Buzut

0

upload.php에 오류가 있습니다.

이 부분을 변경해야합니다.

echo $file['tmp_name']; 

가로 : -

echo $_FILES['file']['tmp_name'];