js post 方法提交文件

最新推荐文章于 2024-06-13 08:49:48 发布

weixin_33887443

最新推荐文章于 2024-06-13 08:49:48 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/hg-hsd/p/5999472.html

本文介绍如何使用JavaScript实现表单的异步提交，重点讲解了FormData与XMLHttpRequest结合使用的方法，实现页面无刷新的POST上传。

使用 javascript 异步提交表单，实现无刷新的 post 上传表单，主要使用的是浏览器基础对象（chrome,edge/ie11,firefox）

FormData

FromData 是一次 http mulitpartfrom-data 的请求内容

可以使用 append 方法向其添加名词对

然后使用 XMLHttpRequest 的 send() 方法发送

eg:

var fileObj = new FromData();

fileObj.append('key',value); // value 可以是一个字符串 string 也可以是一个 blob （代表，file对象）

var xhr = new XMLHttpRequest();

xhr.open('POST','url',true);

xhr.send(fileObj);

// fileObj 传递的是 files[0] 对象，eg:fildObj = document.getElementById('file_pic').files[0]
var FILES = function(fileObj,url,callback,data){
            if(!fileObj){
                alert('请选择发布文件');
                return;
            };
            var FileController = url;                   // 接收上传文件的后台地址    
            // FormData 对象
            var form = new FormData();                  // 可以增加表单数据
            // 存入文件对象
            form.append("file",fileObj);
            // 其他描述参数解析
            if(data!=''){
                for(var key in data){
                    form.append(key,data[key]);
                };
            };
            // XMLHttpRequest 对象
            var xhr = new XMLHttpRequest();
            xhr.open("POST", FileController, true);
            xhr.onload = function () {
                if(xhr.readyState == 4 && xhr.status == 200){
                    // 查看后台反馈
                    if(callback){
                        var req = xhr.responseText; 
                        callback(req);
                    };
                } else if(xhr.readyState == 4 && xhr.status == 404){
                    callback({allow:'error'});
                    return;
                };
            };
            xhr.upload.onprogress = function(evt){  
                //侦查附件上传情况  
                //通过事件对象侦查  
                //该匿名函数表达式大概0.05-0.1秒执行一次  
                //console.log(evt);  
                //console.log(evt.loaded);  //已经上传大小情况  
                //evt.total; 附件总大小  
                var loaded = evt.loaded;  
                var tot = evt.total;  
                var per = Math.floor(100*loaded/tot);  
                var son =  document.getElementById('son');  
                son.innerHTML = per+"%";  
                //son.style.width=per+"%";  
            }  
            xhr.send(form);
    }

转载于:https://www.cnblogs.com/hg-hsd/p/5999472.html