使用jquery post发布PHP文件

PHP file-upload using jquery post

如果有人知道这段代码的问题,请告诉我。

基本上我想使用jQuery上传文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js">

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

call back result will appear here

</body>
</html>

和我的php'post.php'

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

上传的文件名不会返回。 问题是我无法访问上传的文件。

提前致谢!
希夫


Basically i want to upload a file using jQuery

您无法使用AJAX上传文件。您可以使用使用隐藏iframe的jquery.form插件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js">
    <script src="http://malsup.github.com/jquery.form.js">
    <script type="text/javascript">
        $(document).ready(function(event) {
            $('#form1').ajaxForm(function(data) {
                $('#result').html(data);
            });
        });
   
</head>
<body>
<form id="form1" action="post.php" method="post" enctype="multipart/form-data">
    Please input the XML:
    <input id="file" type="file" name="file" /><br/>
    <input id="submit" type="submit" value="Upload File"/>
</form>

call back result will appear here

</body>
</html>

另请注意表单上的enctype="multipart/form-data"

另一种可能性是使用HTML5文件API,它允许您实现假设客户端浏览器支持它。


使用jQuery $ .post上传文件是不可能的,无论如何,使用文件API和XMLHttpRequest,完全可以在AJAX中上传文件,你甚至可以知道已经上传了多少数据......

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
$('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);
}


不,不,你应该使用jQuery表单插件来异步上传文件。您无法使用jQuery $ .post方法上传文件。该文件将与隐藏的iframe一起上传

另一种方法是使用FileAPI / BlobApi上传HTML5


你的upload.php有一些错误。

你应该改变这一部分。

1
echo $file['tmp_name'];

至:-

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

尝试使用iframe上传,因为您无法使用$ .post方法发送文件。


您也可以尝试jquery uploadify - http://www.uploadify.com/