javascript - 如果使用ajax jquery文件上传上传文件，如何在php中获取上传的文件名

Question

这是一个简单的文件上传脚本。我只需要在 php 部分中上传的文件的名称，因为我需要上传的文件[及其路径]将其插入数据库。 这是一个脚本。

index.html

<form enctype="multipart/form-data" id="form1">
    <input name="file" type="file" id="id1" />
    <input type="button" value="Upload" />
</form>
<progress></progress>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(':file').on('change', function() {
    var file = this.files[0];
    if (file.size > 10024000000) {
        alert('max upload size is 1k')
    }
    // Also see .name, .type
});
</script>
<script>
$(':button').on('click', function() {
$.ajax({
        // Your server script to process the upload
        url: 'upload.php',
        type: 'POST',
        // Form data
        data: new FormData($('form')[0]),
        // Tell jQuery not to process data or worry about content-type
        // You *must* include these options!
        cache: false,
        contentType: false,
        processData: false,

        // Custom XMLHttpRequest
        xhr: function() {
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) {
                // For handling the progress of the upload
                myXhr.upload.addEventListener('progress', function(e) {
                    if (e.lengthComputable) {
                        $('progress').attr({
                            value: e.loaded,
                            max: e.total,
                        });
                    }
                } , false);
            }
            return myXhr;
        },
    });
});
</script>

上传.php

<?php
move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/'.$_FILES['file']['name']);
$name = $_FILES['file']['tmp_name'];
echo $name;//i tried this but i know as i uploaded file using ajax it will not work

 ?>

Answer 1

要实现 success 函数，请使用此代码。

JS:

$(':button').on('click', function() {
$.ajax({
        // Your server script to process the upload
        url: 'upload.php',
        type: 'POST',
        // Form data
        data: new FormData($('form')[0]),
        // Tell jQuery not to process data or worry about content-type
        // You *must* include these options!
        cache: false,
        contentType: false,
        processData: false,

        // Custom XMLHttpRequest
        xhr: function() {
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) {
                // For handling the progress of the upload
                myXhr.upload.addEventListener('progress', function(e) {
                    if (e.lengthComputable) {
                        $('progress').attr({
                            value: e.loaded,
                            max: e.total,
                        });
                    }
                } , false);
            }
            return myXhr;
        },
         success: function(data)
        {
         alert(data);//Note that sometimes ajax misinterprets the data that is returned. To not have this problem, declare the type of data you expect to receive.
        }
    });
    });

PHP:

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

如果要回传多个值，请使用Json编码回传数据。

代码:

PHP:

move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/'.$_FILES['file']['name']);
$name = $_FILES['file']['tmp_name'];
$path = 'uploads/'.$_FILES['file']['name'];
echo json_encode(array(
                'name'=> $name,
                'path'=> $path
));

JS:

 ...
  success: function(data){
    alert("Name: "+data.name);
    alert("Path: "+data.path);
  }

请注意，有时 ajax 会误解返回的数据。为了避免出现此问题，请声明您期望接收的数据类型。