jQueryAjax文件上传PHP

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (170)

我想在我的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”的文件夹,具有“users”和“IIS_users”的更改权限。

当我用文件格式选择一个文件并按下上传按钮时,第一个警告返回“[对象FormData]”。第二个警告没有被调用,“上传”文件夹也是空的!?

有人可以帮助我找出哪里是错的?

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

提问于
用户回答回答于

你需要在服务器上运行的脚本将文件移至上传目录。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: '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脚本,并将文件导向上传目录:

<?php

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

?>

还有一点关于move_uploaded_fileupload.php脚本中使用的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'
);
用户回答回答于
var formData = new FormData($("#YOUR_FORM_ID")[0]);
$.ajax({
    url: "upload.php",
    type: "POST",
    data : formData,
    processData: false,
    contentType: false,
    beforeSend: function() {

    },
    success: function(data){




    },
    error: function(xhr, ajaxOptions, thrownError) {
       console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
    }
});

扫码关注云+社区

领取腾讯云代金券