使用jquery-form.js异步上传文件和提交表单

月色无痕

于 2014-04-16 17:37:30 发布

阅读量7.8k

点赞数

分类专栏： Web AJAX

Web 同时被 2 个专栏收录

15 篇文章

订阅专栏

AJAX

3 篇文章

订阅专栏

本文介绍如何使用jQuery插件实现带文件上传功能的表单异步提交，并展示了完整的HTML页面及JavaScript代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script type="text/javascript" language="javascript" src="js/jquery-1.10.2.js"></script>
    <script type="text/javascript" language="javascript" src="js/jquery.form.js"></script>
    <script type="text/javascript" language="javascript">
        $(function(){
            //异步提交表单
            $("#ajaxSubmit").on("click",function(){
                console.log($(this));
                $("#formToUpdate").ajaxSubmit({
                    type:'post',
                    url:'p.php',
                    success:function(data){
                        console.log(data);
                    },
                    error:function(XmlHttpRequest,textStatus,errorThrown){
                        console.log(XmlHttpRequest);
                        console.log(textStatus);
                        console.log(errorThrown);
                    }
                });
            });
        });
    </script>
</head>
<body>

<form id="formToUpdate" method="post" action="#" enctype="multipart/form-data">
    <input type="text" name="t1"><br />
    <input type="file" name="f1"><br />
    <input id="ajaxSubmit" type="button" value="异步提交">
</form>

</body>
</html>

jquery.form.js下载地址 http://download.youkuaiyun.com/detail/yusewuhen/7164041