使用 jQuery ajax 上传图片的建议

Suggestions to upload image using jQuery ajax(使用 jQuery ajax 上传图片的建议)

问题描述

我有一个有 3 个输入的表单:

I have a form that has 3 inputs:

[1] 用于状态更新的文本输入字段

[1] text input field for a status update

[2] 文件上传(用于图片)

[2] file upload (for a picture)

[3] 用于附加链接的文本输入字段

[3] text input field for attaching a link

用户根据他们想要做的事情在每一个之间切换.例如，在选择[2]时，隐藏输入[1]和[3].

The user toggles between each one depending on what they want to do. For example when choosing [2], inputs [1] and [3] are hidden.

所有这些输入都包含在一个 ID 为 posts_form 的表单中.选项 [1] 和 [3] 通过 Ajax 发布到不同的控制器.

All of these inputs are contained within a single form with id posts_form. Options [1] and [3] post via Ajax to different controllers.

我现在的问题是选项 [2]，因为无法使用 jQuery ajax 上传图片.

My problem now is with option [2] because it is not possible to upload images using jQuery ajax.

我见过的一些解决方案涉及使用 jQuery Form 插件，但我想知道是否可以在不使用插件的情况下进行图像上传.

Some solutions I've seen involve using the jQuery Form plugin, but I wonder if it would be possible to do image uploading without the use of a plugin.

例如，这将是用于上传的代码库，这当然是行不通的.

For example this would be the code base for uploading which of course doesn't work.

    $.ajax({
        url: 'chat/upload/' + <?php echo $page_id; ?>,
        type: 'POST',
        data: $('#posts_form').serialize(),
        dataType: 'html',
        beforeSend: function(){
              $('#loading').show();
            },          
        success: function(html) {
            $('#attach').replaceWith(html);
            $('#loading').hide();
            $('#posts_form input').val('');
            $('.posts_link').val('');
            $('#chat_input').hide();
            }
        });

有什么建议可以添加/更改以允许仅使用 jQuery 上传图片，无需插件?

Any suggestions on what could be added / changed to permit image upload using jQuery only, without plugins?

谢谢.

推荐答案

你最好的选择就是这个插件.如果没有这个，你就是在浪费时间.

Your best choice is this plugin. You're wasting your time trying to do it without this.

http://jquery.malsup.com/form/

这篇关于使用 jQuery ajax 上传图片的建议的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！