ajax(三) ajax提交表单、ajax实现文件上传

最新推荐文章于 2023-11-20 10:35:57 发布

道秋adol

最新推荐文章于 2023-11-20 10:35:57 发布

阅读量5.8k

点赞数 3

分类专栏： jquery 文章标签： ajax 表单 jquery 文件上传文件传输

本文链接：https://blog.csdn.net/chendaoqiu/article/details/47785393

版权

jquery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

式一：利用from表单的targer属性 + 隐藏的iframe 达到类似效果，支持提交含有文件和普通数据的复杂表单
方式二：使用jquery的 $.ajax({..})，支持提交普通表单，但不支持含有文件的复杂表单; ($ .post 或 $.get底层用的都是$ .ajax)
方式三：使用jquery插件ajaxFileUpload.js，支持上传文件，但不支持提交表单
方式四：使用jquery.from.js，支持提交同时含有文件和普通数据的复杂表单
个人四种都用过, 更好喜欢第二种和第四种; 用第二种来解决ajax普通请求, 用第四种来解决文件上传/表单提交; 不多说,上代码

方式一: from + iframe
Test1.jsp：表单、iframe、提交表单

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>测试页面1,创建表单、iframe、提交表单</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<script type="text/javascript" src="..省略/jquery.1.8.2.min.js"></script>
<script>
    $(function() {  //值得注意的是iframe会维护浏览器的历史,浏览器的后退/前进将根据ifream的访问历史来变化,而非主页面   
        $("#btn").click(function() {
            var value = $("#pic").val();
            if (Utils.isEmpty(value)) {
                alert("请选择文件");
                return false;
            }
            if (!value.match(/.jpg|.jpeg|.gif|.png|.bmp/i)) {
                alert("文件格式错误");
                return false;
            }
            $("#form0").submit();
        });
    });
</script>
</head>
<body>
    <form id="form0" method="post" action="..省略/uploadOrgPic.html"
        enctype="multipart/form-data" target="hiddenFrame">
        上传头像: <input type="file" name="imageVo.image" id="pic" /> <input
            type="button" value="提交" id="btn" />
    </form>
    <div id="result"></div>
    <iframe src="about:bland;" id="hiddenFrame" name="hiddenFrame"
        style="display: none;" frameborder="0"></iframe>
</body>
</html>

Test2.jsp：后台处理完成后的跳转页面 (后台处理代码此处就不贴了, 上传文件相信大家都会的)

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>测试页面2，处理结果、返回父页面</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<script>
    window.onload = function() {  //检查是否存在父窗口
        if (window.parent != window) {
            var resultDiv = window.parent.document.getElementById("result");
            resultDiv.innerHTML = '因为是测试,所以简单的来这么一句话';
        }
    }
</script>
</head>
<body>
</body>
</html>

方式二:$.ajax({..})
值得注意的是: serialize() 可通过序列化表单值,创建URL编码文本字符串,但不支持文件上传的表单

<script>
    $.ajax({
        url : 你要请求的url链接, //默认为当前页面url
        aysnc : true, //是否异步,默认true           
        cache : true, //使用缓存,默认true          
        type : "POST", //请求方式,默认Get           
        dataType : 'JSON', //预期服务器返回的数据类型 (若不指定jquery将根据HTTP包MIME信息来判断)        
        headers : {
            'ClientCallMode' : 'ajax'
        }, //添加头部,也可通过beforeSend函数添加          
        data : $('#formid').serialize(), //要发送的数据,将自动转换为请求字符串格式。 此处为表单序列化后生成的字符串         
        success : function(data) { //执行成功的回调函数               
            alert("success");
        },
        error : function(request) { //执行错误的回调函数(包含三个参数:XMLHttrRequest、错误信息、捕获的异常对象)              
            alert("error");
        }
    });
</script>

方式三:使用jquery插件ajaxFileUpload.js，该方式提交时无需表单, 也提交不了表单, 只用于文件上传
若在文件上传同时还要传递其它的参数,通过设置data属性即可实现; 但如果需要的参数过多, 则不建议使用这种方式, 个人更倾向于方式四

<script>
    $("#uploadFile").click(function() {
        var value = $("#imageInput").val();
        if (Utils.isEmpty(value)) {
            alert("请选择文件");
            return false;
        }
        if (!value.match(/.jpg|.jpeg|.gif|.png|.bmp/i)) {
            alert("文件格式错误");
            return false;
        }
        $.ajaxFileUpload({
            url : 'url',
            secureuri : false, //是否启用安全提交,默认false            
            dataType : 'JSON', //预期服务器返回的数据类型                
            fileElementId : 'imageInput', //文件域id值            
            data : {
                'name' : 'abc'
            }, //其它参数         
            success : function(data, status) {
                alert(data);
            },
            error : function(data, status, _exception) {
                alert(_exception);
            }

        });
    });
</script>

方式四：jquery.form.js

<script>
    function ajaxSubmitForm() {
        var value = $("#pic").val();
        if (Utils.isEmpty(value)) {
            alert("请先选择文件");
            return false;
        }
        if (!value.match(/.jpg|.jpeg|.gif|.png|.bmp/i)) {
            alert("文件格式错误");
            return false;
        }
        var option = {
            url : '..省略/uploadOrgPic.ac',
            type : 'POST',
            dataType : 'json',
            headers : {
                "ClientCallMode" : "ajax"
            }, //添加请求头部       
            success : function(data) {
                alert(JSON.stringify(data));
            },
            error : function(data) {
                alert(JSON.stringify(data) + "--上传失败,请刷新后重试");
            }
        };
        $("#form0").ajaxSubmit(option);
        return false; //最好返回false，因为如果按钮类型是submit,则表单自己又会提交一次;返回false阻止表单再次提交      
    }
</script>

道秋adol

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
ajax(三) ajax提交表单、ajax实现文件上传

式一：利用from表单的targer属性 + 隐藏的iframe 达到类似效果，支持提交含有文件和普通数据的复杂表单方式二：使用jquery的.ajax(..)，支持提交普通表单，但不支持含有文件的复杂表单;(.ajax({..})，支持提交普通表单，但不支持含有文件的复杂表单; (.post 或 .get底层用的都是.get底层用的都是.ajax) 方式三：使用jquery插件aj
复制链接

扫一扫