异步提交表单的应用---异步上传图片

异步提交表单

---

提问 : 为什么需要异步提交表单?

场景:有个功能需要异步提交,需要上传文件,例如在一个页面上不刷新页面上传一个图片

1.因为不刷新页面,所以必须采用异步请求

2.因为是上传图片,请求参数是个二进制字节流,常规的ajax请求无法完成

总结:此时异步提交表单.ajaxSubmit()方法应运而生

第一步:页面数据例子如下

<img width="100" height="100" id="allUrl"/>
<input type="hidden" name="imgUrl" id="imgUrl"/>
<input type="file" name="pic" onchange="uploadPic()"/>

第二步:异步上传图片代码如下

<script >
    // 上传图片
    function uploadPic(){
        var options = {
            url : "/upload.do",
            type : "post",
            dataType : "json",
            success : function(data) {
                // 设置图片的回显属性来回显图片
                $("#allUrl").attr("src",data.path);
                // 设置图片路径为为表单提交数据中图片的值
                $("#imgUrl").val(data.path);
            }
        };

        // 异步提交表单
        $("#jvForm").ajaxSubmit(options);
    }
</script>