jQuery的AJAX文件上传PHP [英] jquery ajax File Upload php

问题描述

我想实现一个简单的文件上传在我的内网页，用最小的设置可能。

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"); 
                }
     });
});

有一个在该网站的根目录中名为上传文件夹，以更改权限为用户和IIS_users。

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

当我选择的文件格式和preSS上传按钮的文件，第一次警报的回报[对象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 方法（在浏览器中运行），将表单数据发送到服务器，然后在服务器上的脚本处理上载。下面是使用PHP的例子。

You need a script that runs on the server to move the file to the uploads directory. The jQuery ajax method (running in the browser) sends the form data to the server, then a script on the server handles the upload. Here's an example using PHP.

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

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

$('#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脚本：

upload.php: a PHP script that 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 ['文件'] ['名称'] 是文件的名称，因为它被上传。您不必使用。你可以给该文件的任何名称（服务器文件系统兼容）你想要的：

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

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