jQuery AJAX 文件上传 PHP

php javascript jquery ajax upload

2022-08-30 01:45:35

我想在我的 Intranet 页面中实现一个简单的文件上传，并尽可能少地进行设置。

这是我的HTML部分：

<input id="sortpicture" type="file" name="sortpic" />
<button id="upload">Upload</button>

这是我的JS jquery脚本：

$("#upload").on("click", function() {
    var file_data = $("#sortpicture").prop("files")[0];   
    var form_data = new FormData();
    form_data.append("file", file_data);
    alert(form_data);
    $.ajax({
        url: "/uploads",
        dataType: 'script',
        cache: false,
        contentType: false,
        processData: false,
        data: form_data,                         
        type: 'post',
        success: function(){
            alert("works"); 
        }
    });
});

在网站的根目录中有一个名为“uploads”的文件夹，其中包含“用户”和“IIS_users”的更改权限。

当我选择带有文件格式的文件并按下上传按钮时，第一个警报返回“[对象表单数据]”。第二个警报没有被调用，“上传”文件夹也是空的！？

有人可以帮我找出问题所在吗？

下一步应该是，使用服务器端生成的名称重命名文件。也许有人也可以给我一个解决方案。

答案 1

您需要一个在服务器上运行的脚本，以将文件移动到上载目录。jQuery ajax 方法（在浏览器中的客户端上运行）将表单数据发送到服务器，然后在服务器上运行的脚本处理上载。

你的HTML很好，但是更新你的JS jQuery脚本看起来像这样：

（在后面查找注释// <-- )

$('#upload').on('click', function() {
    var file_data = $('#sortpicture').prop('files')[0];   
    var form_data = new FormData();                  
    form_data.append('file', file_data);
    alert(form_data);                             
    $.ajax({
        url: 'upload.php', // <-- point to server-side PHP script 
        dataType: 'text',  // <-- what to expect back from the PHP script, if anything
        cache: false,
        contentType: false,
        processData: false,
        data: form_data,                         
        type: 'post',
        success: function(php_script_response){
            alert(php_script_response); // <-- display response from the PHP script, if any
        }
     });
});

现在对于服务器端脚本，在这种情况下使用PHP。

upload.php：一个 PHP 脚本，位于服务器上并在服务器上运行，并将文件定向到 uploads 目录：

<?php

    if ( 0 < $_FILES['file']['error'] ) {
        echo 'Error: ' . $_FILES['file']['error'] . '<br>';
    }
    else {
        move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']);
    }

?>

另外，关于目标目录的几件事：

确保您拥有正确的服务器路径，即从PHP脚本位置开始，什么是上传目录的路径，以及
确保它是可写的。

关于上传中使用的PHP函数move_uploaded_file.php脚本的一点信息：

move_uploaded_file(

    // this is where the file is temporarily stored on the server when uploaded
    // do not change this
    $_FILES['file']['tmp_name'],

    // this is where you want to put the file and what you want to name it
    // in this case we are putting in a directory called "uploads"
    // and giving it the original filename
    'uploads/' . $_FILES['file']['name']
);

$_FILES['file']['name']是上载文件时文件的名称。您不必使用它。您可以为文件指定所需的任何名称（与服务器文件系统兼容）：

move_uploaded_file(
    $_FILES['file']['tmp_name'],
    'uploads/my_new_filename.whatever'
);

最后，请注意您的 PHP upload_max_filesize和post_max_size配置值，并确保测试文件不超过任何一个。以下是有关如何检查 PHP 配置以及如何设置最大文件大小和发布设置的一些帮助。

答案 2

**1. index.php**
<body>
    <span id="msg" style="color:red"></span><br/>
    <input type="file" id="photo"><br/>
  <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      $(document).on('change','#photo',function(){
        var property = document.getElementById('photo').files[0];
        var image_name = property.name;
        var image_extension = image_name.split('.').pop().toLowerCase();

        if(jQuery.inArray(image_extension,['gif','jpg','jpeg','']) == -1){
          alert("Invalid image file");
        }

        var form_data = new FormData();
        form_data.append("file",property);
        $.ajax({
          url:'upload.php',
          method:'POST',
          data:form_data,
          contentType:false,
          cache:false,
          processData:false,
          beforeSend:function(){
            $('#msg').html('Loading......');
          },
          success:function(data){
            console.log(data);
            $('#msg').html(data);
          }
        });
      });
    });
  </script>
</body>

**2.upload.php**
<?php
if($_FILES['file']['name'] != ''){
    $test = explode('.', $_FILES['file']['name']);
    $extension = end($test);    
    $name = rand(100,999).'.'.$extension;

    $location = 'uploads/'.$name;
    move_uploaded_file($_FILES['file']['tmp_name'], $location);

    echo '<img src="'.$location.'" height="100" width="100" />';
}