form表单提交获取返回值(文件提交)

最新推荐文章于 2022-11-10 17:27:26 发布

力压群剑

最新推荐文章于 2022-11-10 17:27:26 发布

阅读量4.5k

点赞数 5

分类专栏： js 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/a845581307/article/details/113373538

版权

js 专栏收录该内容

1 篇文章

订阅专栏

form表单提交获取返回值(文件提交)
昨天搞了一天，百度了好几个小时，结合了各种博客终于解决了这个问题
毕竟我就是个菜鸡嘛
emmmmm…有点蛋疼

我试了一上午才得出结论：纯ajax是不能提交文件的
如果要提交文件可以用webuploader
但是我用不来，也找不到地方下载，干脆的就放弃了

到下午我看见能用jquery.form.js可以解决这个问题
随后我果断把jquery.form.js搞进了IDEA
在IDEA创建一个js文件再复制进去引用下就能用了

然后这是我的表单

<form id="formSumbit" onsubmit="return submitChange();"  method="post" enctype="multipart/form-data" action="/housing/house/uploadInfo">
            <input id="file"  type="file" name="file">
            <input id="upload"  type="submit" value="上传">
</form>

先定义一个options用作ajaxSubmit的参数

 var options={
        //target : '#output',    // 把服务器返回的内容放入id为output的元素中
        //beforeSubmit : showRequest,    // 提交前的回调函数
        success : showResponse,    // 提交后的回调函数
        // url : url,    //默认是form的action，如果申明，则会覆盖
        // type : type,    // 默认值是form的method("GET" or "POST")，如果声明，则会覆盖
        // dataType : null,    // html（默认）、xml、script、json接受服务器端返回的类型
        // clearForm : true,    // 成功提交后，清除所有表单元素的值
        // resetForm : true,    // 成功提交后，重置所有表单元素的值
        timeout : 3000    // 限制请求的时间，当请求大于3秒后，跳出请求
    }

因为我只需要一个提交后的返回信息所以其他的都注释了
之后需要在js写一个formSumbit()的function

var submitChange = function(){
        $("#formSumbit").ajaxSubmit(options);
        return false;
    };

return false 貌似是为了不让他重复提交或者是让他不能弹到新网页
我也没学过前端这个我搞不清楚
最后定义一个showResponse的function就完事了

function showResponse(responseText,statusText){
        if (statusText != "success"){
            layer.confirm('报错喽！', {
                btn: ['确定']  //按钮
                , icon: 5
                , anim: 6
            }, function (index) {
                lock = true;
                layer.close(index);
            });
        }
        if (responseText.code == "0") {
            layer.confirm(responseText.msg, {
                btn: ['确定']  //按钮
                , icon: 6
            }, function () {
                window.parent.location.reload();    //刷新父页面
            });
        } else {
            layer.confirm(responseText.msg, {
                btn: ['确定']  //按钮
                , icon: 5
                , anim: 6
            }, function (index) {
                lock = true;
                layer.close(index);
            });
        }
    }