HTML表单中Ajax的enctype属性

Question

我有这段jQuery代码，可以提交我的表单数据：

<script type="text/javascript">
$(document).ready(function(){
$("#message").hide();
$("#please_wait_box").hide();
$("#viewreseller").submit(function(e){
    e.preventDefault();
    dataString=$("#viewreseller").serialize();
    $.ajax({
        type: "POST",
        url: "view_reseller-go.php",
        cache: false,
        data: dataString,
        success: function(res){
            //$("#message").show();
            $("#please_wait_box").hide();
            $("#message").html(res);
            $('#message').fadeIn('slow');
            if(res.indexOf("success")!=-1)
            {
                window.location.href = res.substr(8);
            }
        }
    });
});
});
</script>

我需要在表单上设置enctype为multipart/form-data - 我的上述代码能实现这个吗？

- charlie

---

可能是通过以下方式实现：$("#your_frm_id").attr("enctype", "multipart/form-data"); 但是你为什么想要这样做呢？能否详细说明一下？ - Sudhir Bastakoti

Answer 1

由于您正在使用Ajax提交表单数据，设置enctype将没有任何影响。您完全绕过了将使用它的表单提交过程。

那么，让我们看一下是否可以调整该代码以产生与设置enctype相同的效果。该属性对表单提交具有三个影响。

1. 它设置HTTP post请求的内容类型。您可以轻松完成此操作。headers: { "Content-Type": "multipart/form-data" }
2. 它使用multipart/form-data而不是application/x-www-form-urlencoded"编码表单中的数据 - serialize永远不会这样做
3. 它将包括来自文件输入的文件 - serialize永远不会这样做

jQuery内置没有处理通过Ajax上传文件的功能。MDN对使用内置浏览器API的过程进行了非常详细的描述（注意，您需要现代浏览器才能支持某些API）。

由于您正在使用jQuery，您应该考虑使用一个预先编写的支持Ajax文件上传的库。有很多可用的库，但我无法推荐一个特定的库。

- Quentin