php - 如何只提交表单的输入文件而不提交其他字段？

Question

怎么了？

网上有很多关于制作ajax-jquery表单上传图片的例子。像这样:

<form id="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php'> 
<input type="file" name="photoimg" id="photoimg" />
</form>

让这个表单上传文件并不难，但我需要别的东西。

我有一个比那个大一点的表格。

例子:

<form id="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php'> 
<input type="file" name="photoimg" id="photoimg" />
<input type="text" name="foo"/>
<input type="text" name="bar"/>
<input type="submit" value="FINALLY DO THE SUBMIT"/>
</form>

有什么大不了的？

好吧，我希望文件输入字段执行文件 onchange 事件的上传。但我不希望孔表单进行提交。还有其他字段需要完成，毕竟用户将进行最终提交。

我在后端执行此操作没有问题，我的 PHP 引擎正在等待并工作，但我不知道如何在前端执行此操作。

有什么建议吗？

Answer 1

您可以使用 target <form> 的属性元素提交表单而不重新加载页面。额外的字段仍将被发送，但通过动态交换 <form>属性，例如 action和 enctype ，您可以确保文件输入将发送到后端中的某个点。

我编写了一个简单的 JavaScript+jQuery 组件，可让您快速设置 AJAX uploader 。它将自动处理属性更改并让您的后端在前端触发回调:

var uploader = {

    functionBegin: function () {},
    functionCallback: function () {},

    formID: '',
    formAction: '',

    buttonID: '',

    originalAction: '',
    originalTarget: '',
    originalEnctype: '',
    originalOnSubmit: '',

    isSetup: false,

    // Initializes the AJAX uploader
    init: function(formID, buttonID, formAction, beginFunction, callbackFunction) {

        // Sets up the optional callback functions
        this.functionBegin = beginFunction;
        this.functionCallback = callbackFunction;

        // Sets up the selectors and upload form atributes
        this.formID = formID;
        this.buttonID = buttonID;
        this.formAction = formAction;

        // If we haven't already, create the invisible IFRAME that our form will target
        if(!this.isSetup) {
            $(formID).append('<iframe id="AU_IFrame" name="AU_IFrame" src="about:blank" style="width:0;height:0;border:0px solid #fff;"></iframe>');
            this.isSetup = true;
        }

        // If a button selector was defined, we hook it's click event
        if(buttonID) {
            $(buttonID).click(function () {
                uploader.triggerBegin();
                return false;
            });
        }

    },

    // Begins the file upload
    triggerBegin: function() {

        // Backs up the original form attributes
        this.originalAction = $(this.formID).attr('action');
        this.originalTarget = $(this.formID).attr('target');
        this.originalEnctype = $(this.formID).attr('enctype');
        this.originalOnSubmit = $(this.formID).attr('onSubmit');

        // Sets up the form with our upload attributes
        $(this.formID).attr('action', this.formAction);
        $(this.formID).attr('target', 'AU_IFrame');
        $(this.formID).attr('enctype', 'multipart/form-data');

        // Call our 'on upload begin' callback, if defined
        if(this.functionBegin) {
            this.functionBegin();
        }

        // Submit the upload form
        $(this.formID).submit();

        // Now that it's already uploaded, revert back to the original attributes
        $(this.formID).attr('action', this.originalAction);
        $(this.formID).attr('target', this.originalTarget);
        $(this.formID).attr('enctype', this.originalEnctype);
        $(this.formID).attr('onSubmit', this.originalOnSubmit);

    },

    // This can be called from the back-end, will trigger the user-defined callback
    triggerCallback: function(params) {
        if(this.functionCallback) {
            this.functionCallback(params);
        }
    }


};

这是一个关于如何在 HTML 表单中应用它的示例:

<form name="test" method="POST" action="regularForm.php">
    <input id="fileInput" name="fileInput" type="file" />
    <input type="text" name="foo" />
    <input type="text" name="bar" />
    <input type="submit" value="Send" />
</form>

<script type="text/javascript">
    $(function () {

        uploader.init(
            '#fileInput', // File field selector
            null, // Upload button selector (Optional, since we'll upload on change, this won't be needed here)
            'fileUpload.php', // Upload action
            function () { // Callback on upload begin (optional)
                alert("Starting upload!");
            }, 
            function (params) { // Callback on upload end/error (called by the back-end, optional)
                alert("Upload successful");
            }
        );

        $('#fileInput').change( upload.triggerBegin ); // automatically upload on file input change

    });
</script>

要正确触发回调，只需确保您的后端将运行以下命令(假设您使用的是 PHP):

$someParameter = "whatever you want to return in the callback";

echo '<script type="text/javascript">';
echo 'if(top.uploader && top.uploader.triggerCallback) { top.uploader.triggerCallback("'.$someParameter.'"); }';
echo '</script>';

您自然可以调整参数使其返回，例如文件 URL、上传状态、大小等。

至于其他解决方案，如果没有 HTML5，唯一的选择是使用 Flash/Silverlight/Java 小程序或 Google Gears 插件，它们将处理文件选择和上传。有许多 jQuery 插件将所有替代方案实现为渐进回退:

• jqUploader
• Uploadify
• SWFUpload
• In-a-Flash Uploader