jQuery AJAX 文件上传 PHP [英] jQuery AJAX file upload PHP

问题描述

我想在我的 Intranet 页面中实现一个简单的文件上传，尽可能使用最少的设置.

I want to implement a simple file upload in my intranet-page, with the smallest setup possible.

这是我的 HTML 部分:

This is my HTML part:

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

这是我的 JS jquery 脚本:

and this is my JS jquery script:

$("#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"的文件夹，有users"和IIS_users"的修改权限.

There is a folder named "uploads" in the root directory of the website, with change permissions for "users" and "IIS_users".

当我选择文件格式的文件并按下上传按钮时，第一个警报返回[object FormData]".第二个警报没有被调用，上传"文件夹也是空的！?

When I select a file with the file-form and press the upload button, the first alert returns "[object FormData]". the second alert doesn't get called and the"uploads" folder is empty too!?

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

Can someone help my finding out whats wrong?

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

Also the next step should be, to rename the file with a server side generated name. Maybe someone can give me a solution for this, too.

推荐答案

您需要一个在服务器上运行的脚本来将文件移动到上传目录.jQuery ajax 方法(运行在客户端浏览器) 将表单数据发送到服务器，然后在服务器上运行的脚本处理上传.

You need a script that runs on the server to move the file to the uploads directory. The jQuery ajax method (running on the client in the browser) sends the form data to the server, then a script running on the server handles the upload.

您的 HTML 没问题，但将您的 JS jQuery 脚本更新为如下所示:

Your HTML is fine, but update your JS jQuery script to look like this:

(在 // 之后查找注释)

(Look for comments after // <-- )

$('#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.

And now for the server-side script, using PHP in this case.

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

upload.php: a PHP script that is located and runs on the server, and directs the file to the uploads directory:

<?php

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

?>

---

另外，关于目标目录的一些事情:

---

Also, a couple things about the destination directory:

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

1. Make sure you have the correct server path, i.e., starting at the PHP script location what is the path to the uploads directory, and
2. Make sure it's writeable.

还有一点关于 PHP 函数 move_uploaded_file，在 upload.php 脚本中使用:

And a little bit about the PHP function move_uploaded_file, used in the upload.php script:

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'] 是文件上传时的名称.你不必使用它.你可以给文件任何你想要的名字(服务器文件系统兼容):

$_FILES['file']['name'] is the name of the file as it is uploaded. You don't have to use that. You can give the file any name (server filesystem compatible) you want:

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

最后，请注意您的 PHP <代码>upload_max_filesize AND post_max_size 配置值，并确保您的测试文件不超过任何一个.这里有一些帮助你如何检查 PHP 配置以及你如何设置最大文件大小和发布设置.

And finally, be aware of your PHP upload_max_filesize AND post_max_size configuration values, and be sure your test files do not exceed either. Here's some help how you check PHP configuration and how you set max filesize and post settings.

这篇关于jQuery AJAX 文件上传 PHP的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！