2012-06-15 32 views
12

Hãy cho tôi biết nếu có ai biết vấn đề với mã này là gì.Tải lên tệp PHP bằng cách sử dụng bài đăng jquery

Về cơ bản tôi muốn tải lên một tập tin sử dụng jQuery

<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> 

và php của tôi 'post.php'

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

Tải Lên File name không quay trở lại. Vấn đề là tôi không thể truy cập tệp được tải lên.

Cảm ơn trước! Shiv

+0

anh đang làm gì –

Trả lời

16

Về cơ bản tôi muốn tải lên một tập tin sử dụng jQuery

Bạn không thể tải file sử dụng AJAX . Bạn có thể sử dụng các plugin jquery.form trong đó sử dụng một iframe ẩn:

<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> 

Cũng cần chú ý các enctype="multipart/form-data" trên biểu mẫu.

Một khả năng khác là sử dụng HTML5 File API cho phép bạn đạt được điều đó giả định trình duyệt của khách hàng hỗ trợ nó.

+0

Ý của bạn là bạn không thể tải lên các tệp bằng AJAX hoặc bạn không thể tải lên tệp bằng cách sử dụng phương thức post() của jQuery? –

5

Không không không, bạn nên sử dụng plugin biểu mẫu jQuery cho các tệp tải lên không đồng bộ. Bạn không thể tải tệp lên bằng phương thức jQuery $ .post. Các tập tin sẽ được tải lên với iframe ẩn

Một cách khác là sử dụng HTML5 tải lên với FileAPI/BlobApi

+0

Cảm ơn mate! Hiện tại, tôi sẽ chỉ gửi biểu mẫu html bình thường thay vì gửi bài đăng jquery. Bằng cách đó, nó hoạt động cho tôi! – Shiv

0

Thử tải lên bằng iframe vì bạn không thể gửi tệp có phương thức $ .post.

-1

Bạn cũng có thể thử jquery Uploadify - http://www.uploadify.com/

+0

Tại sao bạn sẽ đi với một thư viện bên ngoài, khi trình duyệt có API cho điều đó? – Heitara

+0

Bởi vì chúng tôi đã nói về việc tải lên các tập tin từ lâu, tôi sẽ nói một thế kỷ hay hơn về phát triển công nghệ mới. Khi tôi đề xuất rằng không có html5 hoặc nó chỉ là bắt đầu và bất cứ điều gì nhiều hơn so với flash yêu cầu html tinh khiết (chủ yếu).Uploadify là thư viện khá tốt trong thời gian đó và trong số các tính năng khác được cung cấp thanh tiến trình, nhiều tập tin tải lên, kéo và thả và nếu tôi nhớ chính xác là dựa trên jquery. – norbi771

6

Nó không thể upload file với jQuery $ .post, neverthless, với các API tập tin và XMLHttpRequest, nó hoàn toàn có thể tải lên một tập tin trong AJAX, và bạn có thể thậm chí còn biết số lượng dữ liệu đã được tải lên chưa…

$('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

Đáng buồn thay, hỗ trợ cho XHR2 vẫn chưa tốt. Nhưng cảm ơn cho đầu vào của bạn về điều này, tôi đã quản lý để làm cho một bài kiểm tra đầy đủ làm việc với Zepto và một số dữ liệu giả bằng cách sử dụng phương pháp đó. –

+0

Tất cả các phiên bản brower chính hiện nay đều hỗ trợ nó (ngay cả IE 10+). http://caniuse.com/xhr2 – Buzut

0

Tệp tải lên của bạn có một số lỗi.

bạn nên thay đổi phần này.

echo $file['tmp_name']; 

để: -

echo $_FILES['file']['tmp_name']; 
Các vấn đề liên quan