将图像发布到AJAX中的PHP [英] POST an image to PHP in AJAX

查看:90
本文介绍了将图像发布到AJAX中的PHP的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想使用AJAX将图像发送到php文件.

I would like to send an image to a php file using AJAX.

这是我的 JS 代码:

$.ajax({
    type: "POST",
    url: "http://website.com/add-image.php",
    data: "img=" + img
})

那是我的 PHP

<?php
if ( !empty( $_POST["img"] ) )
{
    move_uploaded_file( $_POST["img"], "image.png" );
}
?>

但是它不起作用.

我还尝试用imagepngimagejpg替换move_uploaded_file,但仍然没有结果.

I also tried to replace move_uploaded_file by imagepng or imagejpg but still no result.

如何将图像保存在服务器上? 谢谢

How can I save the image on my server ? Thanks

推荐答案

如果您只是想使其正常运行,我建议您使用Ravishanker Kusuma的Hayageek jQuery File Upload plugin. 我通常不推荐插件,但是这个插件很棒.它几乎可以为您完成所有工作.为什么要重新发明轮子?

If you are just looking to get it working, I recommend Ravishanker Kusuma's Hayageek jQuery File Upload plugin. I don't usually recommend plugins, but this one is excellent. It does almost all the work for you. Why re-invent the wheel?

http://hayageek.com/docs/jquery-upload-file.php

他将过程分为四个简单的步骤,基本上看起来像这样:

He breaks down the process into four simple steps, that basically look like this:

寻找//1//2//3:

<head>
  // (1) Load the js files (note that it requires jQuery, which we also load)
    <link href="http://hayageek.github.io/jQuery-Upload-File/uploadfile.min.css" rel="stylesheet">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://hayageek.github.io/jQuery-Upload-File/jquery.uploadfile.min.js"></script>   // (1)
</head>
<body>
    <div id="fileuploader">Upload</div>  // (2) Create DIV
    <script>
        $(document).ready(function(){
            $("#fileuploader").uploadFile({  // (3) initialize plugin
                url:"my_php_processor.php",
                fileName:"myfile"
            });
        });
    </script>
</body>

最后(第四步)是创建一个与上面的jQuery代码中指定的名称相同的PHP文件(在本例中为my_php_processor.php),以接收和处理该文件:

The final (fourth) step is to create a PHP file with same name as specified above in the jQuery code (in this case my_php_processor.php) to receive and process the file:

my_php_processor.php:

<?php
    $output_dir = "uploads/";
    $theFile = $_FILES["myfile"]["name"];
    move_uploaded_file($_FILES["myfile"]["tmp_name"],$output_dir.$fileName);

请注意PHP($_FILES["myfile"])中的myfile与jQuery代码块中指定的文件名myfile之间的关系.

Note the relationship between myfile in the PHP ($_FILES["myfile"]), and the filename myfile specified in the jQuery code block.

在Hayageek网页上,研究Server选项卡上的upload.php示例.

On the Hayageek web page, study the upload.php example on the Server tab.

请注意,您还可以使用

Note that you can also pass additional variables to the my_php_processor.php processor file by using dynamicFormData. See this other example:

$("#fileuploader").uploadFile({
    url:"my_php_processor.php",
    fileName:"myfile",
    dynamicFormData: function(){
        return {
            //my_php_processor.php will receive POST vars below
            newSubj: $("#newSubj").val(),
            newBody: $("#newBody").val(),
        };
    },
    onSuccess:function(files,data,xhr,pd){
        //files: list of files
        //data: response from server
        //xhr : jquery xhr object
        alert(xhr.responseText); //displays data ECHOd by `my_php_processor.php`
    }
});

my_php_processor.php:

<?php
    $n = $_POST['newSubj'];
    $b = $_POST['newBody'];
    $uploadedFile = $_FILES["myfile"]["name"];
    //etc.
    echo 'This will display in the alert box';

jsFiddle示例代码 - 点击图片示例

这篇关于将图像发布到AJAX中的PHP的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆