使用 jQuery ajax 上传图片的建议

素材狗 2022-01-01 23:28:28 文章分类：前端问题点击数：次

文章标签

Suggestions to upload image using jQuery ajax(使用 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?

谢谢.