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

异步提交表单

---

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

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

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>