使用 jquery post 上传 PHP 文件

2021-12-24 00:00:00 file-upload jquery php

如果有人知道此代码有什么问题，请告诉我.

Let me know if anyone know what is the issue with this code.

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

Basically i want to upload a file using 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'

and my php 'post.php'

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

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

Uploaded File name is not returned back. Issue is i couldn't access the uploaded file.

提前致谢！湿婆

推荐答案

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

Basically i want to upload a file using jQuery

您不能使用 AJAX 上传文件.您可以使用使用隐藏 iframe 的 jquery.form 插件:

You cannot upload files using AJAX. You could use the jquery.form plugin which uses a hidden 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 文件 API，假设客户端浏览器支持它，您可以实现这一点.

Another possibility is to use the HTML5 File API which allows you to achieve that assuming the client browser supports it.

相关文章