jquery.form.js的使用

浏览数：24 / 时间：2015年06月09日

插件API http://malsup.com/jquery/form/#api

Jquery.form.js是支持文件异步上传的插件,jq插件自然基本前提当然是要引用Jquery.js

1.0 基本使用

$("#表单ID").ajaxForm(
{
    url: "/***/****",//路径
    dataType: "json",
    beforeSubmit://提交前
    success://响应成功后
    error: //响应失败
}

这里简单得做个上传图片的一个示例

A)表单：

<form method="post" action="/Face/Find" id="uploadform">
       <span class="upLoadImgIcon">
       <input type="file" id="ImgFile" name="face" />
       <img src="~/Content/PageResource/Face/img/upimg.jpg" alt="上传图片" title="上传图片" id="faceIcon">
         </span>
</form>

B)定义参数

 $("#uploadform").ajaxForm(
{
    iframe: true,
    url: "/Face/Find",
    dataType: "json",
    beforeSubmit: function () {
        var img = $("#ImgFile").val();
        if (img == "") return false;//return false才能中断提交表单
        layer.load(‘正在匹配....‘, 0);
    },
    success: function (jsobj) {
       //响应成功后做的一些操作
    },
    error: function (xhr, textStatus, errorThrown) {
        layer.msg("error", 2, 8);
    }
});

C)给图片添加点击事件、自动提交表单

 
  $("#faceIcon").click(function () {
        $("#ImgFile").click();
    }
    );
//----选择图片后触发提交表单的事件
    $("#ImgFile").change(function () {
        $("#uploadform").submit();
    });

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

jquery.form.js的使用