jQuery AJAX 文件上传 PHP

18 浏览
0 Comments

jQuery AJAX 文件上传 PHP

我想在我的内联网页上实现一个简单的文件上传，尽可能少的设置。

这是我的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: "/uploads",
        dataType: 'script',
        cache: false,
        contentType: false,
        processData: false,
        data: form_data,                         
        type: 'post',
        success: function(){
            alert("works"); 
        }
    });
});

网站根目录下有一个名为“uploads”的文件夹，可以为“用户”和“IIS_users”更改权限。

当我选择一个文件并按下上传按钮时，第一个提示返回“[object FormData]”，第二个提示不被调用，并且“uploads”文件夹也是空的？

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

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

admin 更改状态以发布 2023年5月23日
0

2 答案

0 Comments 
**1. index.php**

    
    
  
  

**2.upload.php**
';
}

（此处为HTML代码，翻译为“加粗的123”）

0
0 Comments

您需要编写一个脚本来在服务器上移动文件到上传目录。使用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脚本，将文件发送到上传目录中：

还有一些关于目标目录的事项：

  1. 确保您具有正确的服务器路径，即从PHP脚本位置开始，到上传目录的路径，以及
  2. 确保它可写。

关于在upload.php脚本中使用的PHP函数move_uploaded_file的一些说明：

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'
);

最后，请注意您的PHPupload_max_filesize和post_max_size配置值，并确保您的测试文件不超过任意一个值。这里有一些帮助链接，可以检查PHP配置信息和设置最大文件大小和POST设置。

0