我如何通过jQuery上传到PHP映像

时间:2015-03-08 09:25:07

标签: php jquery ajax

我用简单的图片上传选项。我在PHP代码中通过jQuery访问上传的文件时遇到问题。

如何在PHP中检查上传的文件名,大小?

HTML:

    <form id="conversion_form" method="post" action="#" enctype="multipart/form-data">
            <input type="text" id="prize_name" size="25" value="">
<textarea rows="8" cols="75" name="lista_losowanie" id="lista_losowanie">
            <input id="file_img" type="file" name="image">
            <div id="uploadPreview"></div>
            </div>
            <p><input id="button_draw" class="btn btn-lg btn-success" type="submit" value="Losowanie" /></p>
            </form>

这是我的Ajax,发送prize_name很好,但我上传的图片有问题。我如何在Ajax中发送它并在我的PHP中接收?

AJAX:

$('#button_draw').click(function(e) {
e.preventDefault();

    var formData = new FormData();
    // let's just take the first image
    var file = $('#file_img')[0].files[0];


    // but you also need to add the other fields to formData
    var lista = $(this).closest('form').find('#lista_losowanie').val();
    var prize_name = $(this).closest('form').find('#prizename').val();

    formData.append('prize_img', file);
    formData.append('lista', lista);
    formData.append('prize_name', prize_name);

    console.log(formData);
    alert (formData);


            $.ajax({
            context: this,
            url: './inc/new_draw.php',
            data: formData,
            type: 'POST',
            success: function(response){
            //odpowiedź serwera

            //Trzeba sparsować zwrot
            var json = JSON.parse(response);

            if(json.odp == 1){

            }

            if(response == 2){

            }

            },
            error: function(x,n,o){
            }
           });



  });

PHP:

<?php

include ("config.php");

$prize_name = mysqli_real_escape_string($con, $prize_name);
$prize_img = mysqli_real_escape_string($con, $prize_img);

//HOW I CAN GET ACCESS TO UPLOADED IMAGE? HOW I CAN CHECK FILE SIZE ETC. THIS BELOW DOESNT WORK.

        $file_size = $prize_img['size'];
        $file_name = $prize_img['name'];
        $file_type = $prize_img['type'];

        echo $file_size;

        if ($prize_name == NULL) {
            $problem = TRUE;
            $problem_code = 1;
            echo json_encode($dodano);
        }
?>

1 个答案:

答案 0 :(得分:0)

Ajax方法支持文件上传,但仅限于较新的浏览器。为此,您可以使用XmlHttpRequest2对象,在理想情况下使用FormData对象,其中包含您要提交的所有数据(+图片),请参阅此Article

如果您想使用此功能,可以通过HTML5 File API快速示例获取该文件:

var formData = new FormData();
// let's just take the first image
var file = $('#fileinput').files[0];

// but you also need to add the other fields to formData
var lista = $(this).closest('form').find('#lista_losowanie').val();
var prize_name = $(this).closest('form').find('#prizename').val();

formData.append('prize_img', file);
formData.append('lista', lista);
formData.append('prize_name', prize_name);

// now you pass the formData object as data
$.ajax({
    context: this,
    url: './inc/new_draw.php',
    data: formData,
    // ....
});

如您所见,文件是数组 - 因此,如果您在multiple select上使用file input field,则只需迭代即可获取所有选定图像的数组。

在PHP方面,如果您使用FormData,则需要使用$_FILES数组。见这里:PHP $_FILES array

从上面的示例中,您可以像这样访问数组(也添加了扩展名):

$size = $_FILES['prize_img']['size']
$name = $_FILES['prize_img']['name']
$type = $_FILES['prize_img']['type']
$extension = pathinfo($name, PATHINFO_EXTENSION);

使用XHR2,您还可以执行很酷的操作,例如跟踪上传文件的进度(进度条)。如果您需要兼容旧版浏览器,可以使用iframesexample