使用jquery post的PHP文件上傳

讓我知道是否有人知道這個代碼有什麼問題。使用jquery post的PHP文件上傳

基本上我要上傳使用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>

和我的PHP 'post.php中'

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

上傳的文件名不返回的文件。問題是我無法訪問上傳的文件。

在此先感謝！ Shiv

來源

2012-06-15 Shiv

你在做什麼 – 2012-06-15 07:55:46

基本上我要上傳使用jQuery

您不能上傳使用AJAX的文件的文件。您可以使用jquery.form插件，它使用一個隱藏的iframe：

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

另一種可能性是使用HTML5 File API，它允許您在假定客戶端瀏覽器支持它的情況下實現該功能。

來源

2012-06-15 07:56:28

你的意思是你不能使用AJAX上傳文件，或者你不能使用jQuery的post（）方法上傳文件？ –

不，不應該使用jQuery表單插件來上傳異步文件。您無法使用jQuery $ .post方法上傳文件。該文件將與隱藏的iframe上傳

另一種方法是使用HTML5上傳與FileAPI/BlobApi

來源

2012-06-15 07:54:58 odiszapc

謝謝配合！現在，我將只使用普通的html表單提交而不是jquery帖子。這樣，它適用於我！ – Shiv

嘗試使用iframe上傳，因爲您無法使用$ .post方法發送文件。

來源

2012-06-15 07:56:57

-1

您也可以嘗試的jQuery uploadify - http://www.uploadify.com/

來源

2012-06-16 11:37:43 norbi771

爲什麼當瀏覽器使用外部庫時，會使用一個API？ – Heitara

因爲我們很久以前就在討論上傳文件，所以就新技術開發而言，我會說一個世紀或更久。當我提出沒有HTML5或者它剛剛開始時，並且純粹的HTML需要更多（大多數情況下）。當時Uploadify是相當好的圖書館，並提供進度條，多個文件上傳，拖放和其他功能，如果我記得正確的是基於jQuery的。 – norbi771

它不可能與jQuery $。員額上傳文件，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); 
}

來源

2013-05-01 21:16:15 Buzut

不幸的是，對XHR2的支持還不好。但是，感謝您對此的意見，我已經設法使用這種方法對Zepto和一些模擬數據進行了全面測試。 –

目前所有主流瀏覽器版本都支持它（甚至IE 10+）。 http://caniuse.com/xhr2 – Buzut

您的upload.php有一些錯誤。

你應該改變你的這一部分。

echo $file['tmp_name'];

到： -

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

來源

2015-10-14 11:02:59

使用jquery post的PHP文件上傳

回答

相關問題