如何以 ajax 形式创建回调？答案

【问题标题】：How can I create the callback in ajax form?如何以 ajax 形式创建回调？
【发布时间】：2012-07-24 16:03:51
【问题描述】：

文件上传到服务器后如何创建回调？

我想在 JS 函数调用后将文件上传到服务器上。我想调用函数addDownload，在这个函数完成后，再调用下一个javascript函数。我该怎么做？

我有以下源代码：

HTML：

<form id="imageform" method="post" enctype="multipart/form-data" action="actions/downloadsadd.php">
 <strong>File: </strong><input name="photoimg" id="photoimg" style="width: 100px;" type="file" />
Select Image: <br />
<div id="divPreview"></div>
</form>

Javascript：

addDownload: function ()
    {

        $("#divPreview").html('');
        $("#divPreview").html('<img src="Images/loader.gif" alt="Uploading...."/>');
        $("#imageform").ajaxForm(
        {
            target: '#divPreview'
        }).submit();             
    },

PHP - 下载.php：

public function addDownloads() {

            $db = new DB();
            $db->connect();

            $path = "../../images/upload/files/";

            $valid_formats = array("php", "phtml", "php3", "php4", "js", "shtml", "pl", "py", "html", "exe", "bat", "htm", "sql");
            if (isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST") {
                $name = $_FILES['photoimg']['name'];
                $size = $_FILES['photoimg']['size'];
                if (strlen($name)) {
                    list($txt, $ext) = explode(".", $name);
                    if (!in_array($ext, $valid_formats)) {
                        if ($size < (1024 * 1024)) { // Image size max 1 MB
                            $actual_image_name = time() . "." . $ext;
                            $tmp = $_FILES['photoimg']['tmp_name'];
                            if (move_uploaded_file($tmp, $path . $actual_image_name)) {


                                $arr = array(
                                    'file' => $actual_image_name
                                );


                                dibi::query('INSERT INTO [downloads]', $arr);

                                echo "FILE:" .$actual_image_name;
                            }
                            else
                                echo "Failed upload!";
                        }
                        else
                            echo "Image file size max 1 MB";
                    }
                    else
                        echo "Invalid file format..";
                }
                else
                    echo "Please select image..!";
            }
        }

【问题讨论】：

标签： javascript jquery ajax callback

【解决方案1】：

只是猜测，但您的代码似乎使用了jQuery form plugin： $("#imageform").ajaxForm(...);

该插件允许您使用success 选项添加回调函数。当 AJAX 请求（即您正在调用的 PHP 文件中的所有代码）成功完成时，将调用此函数。

$("#imageform").ajaxForm({
    target: '#divPreview',
    data: {
        var1: $("#inputText").val()   //assuming #inputText is a text field
    },
    success: function() {
        alert("Callback!");
    }
}).submit();

请参阅documentation 以获取更多参考。

【讨论】：

Aletheios，如何使用 ajaxForm 从表单发送数据？（例如来自带有 ID 的输入：#inputText）
我猜，ajaxForm 使用 POST，所以 $_POST['var1'];

【解决方案2】：

我确实喜欢这样上传头像。

<script type="text/javascript">
    $('input[id=lefile]').change(function() {
        $('#photoCover').val($(this).val());
    });

    function doUpload(){
        //Use FormData to get files in form.
        var formData = new FormData($("#myform")[0]);
         $.ajax({
              url: $('#myform').attr('action'),
              type: 'POST',
              data: formData,
              async: false,
              cache: false,
              contentType: false,
              processData: false,
              success: function (returndata) {
                  alert(returndata);
              },
              error: function (returndata) {
                  alert(returndata);
              }
         });
    }
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="avatar-content">
    <form id="myform" action="http://www.example.com/editor/" method=post enctype=multipart/form-data>
        <input id="lefile" type="file" name="file" style="display:none">
        <div class="input-append">
            <input id="photoCover" type="text" class="form-control" style="height:34px; width: 54%; display: inline-block;" onclick="$('input[id=lefile]').click();">
            <div class="btn btn-primary btn-file" onclick="doUpload()">
                <i class="fa fa-upload"></i> Upload
            </div>
        </div>
    </form>
</div>

【讨论】：