使用jQuery ajax上传图片的建议

时间：2022-02-24 04:24:28

I have a form that has 3 inputs:

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

[1] text input field for a status update

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

[2] file upload (for a picture)

[2]文件上传(图片)

[3] text input field for attaching a link

用于附加链接的[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.

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

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

所有这些输入都包含在一个具有id posts_form的表单中。选项[1]和[3]通过Ajax提交给不同的控制器。

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

我现在的问题是选项[2]，因为不可能使用jQuery ajax上传图片。

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.

我看到的一些解决方案包括使用jQuery表单插件，但我想知道是否可以不使用插件进行图像上传。

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();
            }
        });

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

有什么建议可以添加/修改以允许仅使用jQuery而不使用插件上传图片吗?

Thanks.

谢谢。

2 个解决方案

#1

1  

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

你最好的选择是这个插件。没有这个你是在浪费时间。

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

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

#2

3  

There is no straightforward way to upload a file via AJAX. That is a limitation in HTML4. Workarounds are using an iframe or Flash.

通过AJAX上传文件没有直接的方法。这是HTML4的一个限制。工作区正在使用iframe或Flash。

In HTML5, a File API is introduced to solve that problem. Here's a demo of leveraging that API (using a Firefox 3.6+), which allows you to drag and drop an image and load it without sending it back to the server: http://html5demos.com/file-api. It also supports multiple files: http://demos.hacks.mozilla.org/openweb/DnD/.

在HTML5中，引入了一个文件API来解决这个问题。这里有一个利用这个API的演示(使用Firefox 3.6+)，它允许您拖放一个图像并加载它，而不会将它发送回服务器:http://html5demos.com/file-api。它还支持多个文件:http://demos.hacks.mozilla.org/openweb/DnD/。

You can read about that specification on W3.org, if you are keen.

如果你感兴趣的话，可以在W3.org上读到这个规范。

If you cannot depend on clients to have browsers supporting HTML5's File API, you may either roll you own or choose to use a library that implements the iframe workaround:

如果您不能依赖客户端支持HTML5的文件API的浏览器，您可以使用自己的或者选择使用实现iframe解决方案的库:

#1

1  

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

你最好的选择是这个插件。没有这个你是在浪费时间。

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

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

#2

3  

There is no straightforward way to upload a file via AJAX. That is a limitation in HTML4. Workarounds are using an iframe or Flash.

通过AJAX上传文件没有直接的方法。这是HTML4的一个限制。工作区正在使用iframe或Flash。

In HTML5, a File API is introduced to solve that problem. Here's a demo of leveraging that API (using a Firefox 3.6+), which allows you to drag and drop an image and load it without sending it back to the server: http://html5demos.com/file-api. It also supports multiple files: http://demos.hacks.mozilla.org/openweb/DnD/.

在HTML5中，引入了一个文件API来解决这个问题。这里有一个利用这个API的演示(使用Firefox 3.6+)，它允许您拖放一个图像并加载它，而不会将它发送回服务器:http://html5demos.com/file-api。它还支持多个文件:http://demos.hacks.mozilla.org/openweb/DnD/。

You can read about that specification on W3.org, if you are keen.

如果你感兴趣的话，可以在W3.org上读到这个规范。

If you cannot depend on clients to have browsers supporting HTML5's File API, you may either roll you own or choose to use a library that implements the iframe workaround:

如果您不能依赖客户端支持HTML5的文件API的浏览器，您可以使用自己的或者选择使用实现iframe解决方案的库:

标签：

相关文章