Question

我开始使用javascript进行网页编程，上传文件时遇到了一些问题。

我找到了这个：http://tutorialzine.com/2013/05/mini-ajax-file-upload-form/ 但我不知道如何在mvc项目中使用upload.php文件。什么用作表单的动作，应该在哪里涂抹这个PHP代码？

任何人都可以提供一些提示吗？

Answer 1

如果您使用php创建控制器，则可以使用ajax上传您的文件：

<?php
    $valid_exts = array('jpeg', 'jpg', 'png', 'gif'); // Autorized extensions
    $max_size = 200 * 1024; // Max file size
    $path = 'uploads/'; // Folder where to upload
    if ($_SERVER['REQUEST_METHOD'] === 'POST') 
    {
        if( ! empty($_FILES['image']) ) 
        {
            // Get the extension of the file
            $ext = strtolower(pathinfo($_FILES['image']['name'], PATHINFO_EXTENSION));
            // Test the file format if it's allowed
            if (in_array($ext, $valid_exts) AND $_FILES['image']['size'] < $max_size) 
            {
                $path = $path . uniqid(). '.' .$ext;
                // Put the file in the folder of uploads
                if (move_uploaded_file($_FILES['image']['tmp_name'], $path))
                    echo $path; // returning the path
                else
                    echo 'uploads/err.gif'; // returning the error message or path or whatever
            } 
            else 
                echo 'uploads/err.gif';
        } 
        else
            echo 'uploads/err.gif';
    } 
    else
        echo 'uploads/err.gif';
?>

在你看来，你必须包含jQuery.form库和。你创建一个表单，并在表单中放置一个图像和一个按钮，表单应该有你的php文件的链接作为动作，并调用这个函数：

$('#form').ajaxUpload($('#button'),$('#image_preview'));

ajaxUpload函数的定义是：

jQuery.fn.ajaxUpload = function(Button,Preview)
{
    var Frm = $(this); // form
    var Btn = Button; // upload button
    var Prev = Preview; // preview area 
    Btn.click(function()
    {
        // implement with ajaxForm Plugin
        Frm.ajaxForm(
        {
            beforeSend: function()
            {
                Btn.attr('disabled', 'disabled');
                Prev.fadeOut();
            },
            success: function(Result)
            {
                Frm.resetForm();
                Btn.removeAttr('disabled');
                Prev.attr("src",Result).fadeIn();
            },
            error: function(Result)
            {
                Btn.removeAttr('disabled');
                Prev.attr("src",Result).fadeIn();
            }
        });
    });
};

阿贾克斯＆amp; PHP上传文件

1 个答案: