jquery form 插件的使用

使用jQuery实现表单上传

最新推荐文章于 2025-11-29 03:46:46 发布

原创最新推荐文章于 2025-11-29 03:46:46 发布 · 107 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #json #JavaScript #Ajax #HTML #ViewUI

JavaScript 专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何利用jQuery简化表单提交过程，并实现文件上传功能。通过示例代码展示了页面中引入jQuery及其插件的方法，定义了包含多个文件输入字段的表单结构，并通过JavaScript函数实现了表单数据的异步提交。

在頁面中先引入jquery的js：

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>

表單代碼：

<form action="projectNeedsAddProjectNeedsAction.action" name="projectNeedsAddForm" id="projectNeedsAddForm" method="post" enctype="multipart/form-data" > 
标题：input type="text" name="project_needs_title" id="project_needs_title"  />
內容：<textarea id="project_needs_content" name="project_needs_content" rows="13" cols="89" value="" ></textarea>
複件1：<input type="file" name="upload"  />
複件2：<input type="file" name="upload"  />
複件3：<input type="file" name="upload"  />
<input id="diandian" type="button" class="btn" value="确 定" onclick="javascript:tt()" /> 
<input type="reset" class="btn" value="取 消" />

js代碼：

function tt (){
    alert("start");
    var options ={
        //target:'#project_needs',
        url:'projectNeedsAddProjectNeedsAction.action',  //提交地址
        type:'POST',          //方式
        dataType: 'html',   //服务器返回的数据形式
        success: function('html') {    //回传函数实体，参数为XMLhttpRequest.responseText   
            alert('success!!form');
            $("#project_needs").html('html') ; 
        }
    };
    $('#projectNeedsAddForm').ajaxSubmit(options); //options
    return false; 
    alert("end");
}