使用jquery提交FormData数据

来源：互联网发布：s7200plc密码破解软件编辑：程序博客网时间：2024/06/06 16:25

源码示例

<!doctype html><html><head>    <title>测试</title>    <meta charset="utf8">    <script src="../js/jquery-1.11.3.min.js"></script></head><body>    <form id="form">        <input name="file" type="file" />        <input name="a" value="1" />        <input value="2" />    </form>    <button>提交</button></body></html><script>    $(function() {        // 监听上传进度        var xhrOnProgress = function(fun) {            xhrOnProgress.onprogress = fun; //绑定监听            return function() {                //通过$.ajaxSettings.xhr();获得XMLHttpRequest对象                var xhr = $.ajaxSettings.xhr();                //判断监听函数是否为函数                if (typeof xhrOnProgress.onprogress !== 'function')                    return xhr;                //如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去                if (xhrOnProgress.onprogress && xhr.upload) {                    xhr.upload.onprogress = xhrOnProgress.onprogress;                }                return xhr;            }        }        $('button').on('click', function() {            var formData = new FormData($('#form')[0]);// 自动搜索表单信息(表单内没有name属性的input不会被搜索到)，IE<=9不支持FormData            formData.append('b', 3);// 还可以添加额外的表单数据            $.ajax({                type: 'post',                url: '../../../material/jQueryFileUpload?type=1',                data: formData,                contentType: false,// 当有文件要上传时，此项是必须的，否则后台无法识别文件流的起始位置(详见：#1)                processData: false,// 是否序列化data属性，默认true(注意：false时type必须是post，详见：#2)                xhr: xhrOnProgress(function(e){// (详见：#3)                    var percent=e.loaded / e.total;//计算百分比                    $('body').append('->'+ percent);                }),                success: function(data) {                    $('body').append('完成');                }            })        })    })</script>

参考文章

[#1] 浅谈contentType = false
[#2] 原生ajax请求怎么设置processData这个参数？
[#3] jQuery监听文件上传实现进度条效果

1 0