jQuery的使用jQuery的Ajax方法（无插件）上传文件 [英] jQuery upload file using jQuery's ajax method (without plugins)

问题描述

在那一刻我想实现图片上传，而无需使用任何插件。

At moment I want to implement picture upload without using any plug-ins.

我上传的形式看起来像这样

My upload form looks like this

<form action="/Member/UploadPicture" enctype="multipart/form-data" id="uploadform" method="post">
            <span>
                <div class="upload" id="imgUpl">
                    <h3>Upload profile picture</h3>
                    <div class="clear5"></div>
                    <input  type="file" name="file" id="file"  />
                    <button class="btn-bl"  id="upComplete"><span>Upload</span></button>
                </div>

            </span>
            </form>

和我的jQuery code是：

And my jQuery code is:

  $('#upComplete').click(function () {
            $('#up').hide();
            $('#upRes').show();

            var form = $("#uploadform");

            $.ajax({
                type: "POST",
                url: "/Member/UploadPicture",
                data: form.serialize(),
                success: function (data) {
                    alert(data);
                }
            });

            $.fancybox.close();
            return false;
        });

如果我打开Firebug，我可以看到，阿贾克斯（）方法简单的形式邮寄（不是多部分）和帖子内容是空的。

If I open firebug, I can see that ajax() method does simple form post (not multi-part) and POST content is empty

是否有可能做的文件上传使用jQuery的阿贾克斯（）方法，或者我应该这样做，以任何其他方式？

Is it possible to do files upload using jQuery ajax() method or should I do this in any other way?

非常感谢你。

推荐答案

jQuery的AJAX不支持文件上传和执行这一手动可能很麻烦。我建议你​​在看jQuery的表插件。

jQuery ajax does not support file uploads and implementing this manually might be cumbersome. I would suggest you looking at the jQuery form plugin.

当然，你总是可以检查插件出源$ C ​​$ C，看看它是如何实现的，如果你不想把它列入（它使用一个隐藏的iFrame的文件不能与AJAX上传），但为什么这样做，如果你可以直接使用它： - ）

Of course you could always check out the source code of the plugin to see how it is implemented if you don't want to include it (it uses a hidden iFrame as files cannot be uploaded with AJAX) but why doing it if you could use it directly :-)

下面是一个例子，如何你的code可能是这样的：

Here's an example how your code might look like:

$(function() {
    $('#uploadform').ajaxForm();
});

也使上传按钮提交按钮：

also make the upload button a submit button:

<button class="btn-bl" id="upComplete" type="submit">
    <span>Upload</span>
</button>

这篇关于jQuery的使用jQuery的Ajax方法（无插件）上传文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！