美文网首页
ajax上传图片(FormData形式)

ajax上传图片(FormData形式)

作者: xueyueshuai | 来源:发表于2019-04-16 16:02 被阅读0次

 function uploadfile(){

            // js 获取文件对象

            var fileObj = document.getElementById("logo").files[0]; 

            if (typeof (fileObj) == "undefined" || fileObj.size <= 0) {

                alert("请选择图片");

                return;

            }

            // 创建formData 转换成data 

            var formFile = new FormData();

            formFile.append("file", fileObj); //加入文件对象

            var data = formFile;

            // ajax 提交

            $.ajax({

                url: "http://hospital.seetest.cn/index.php/Home/Uploadfile/uploadfile",

                data: data,

                type: "post",

                dataType: "json",

                cache: false,//上传文件无需缓存

                processData: false,//用于对data参数进行序列化处理 这里必须false

                contentType: false, //必须 不要去设置Content-Type请求头

                success: function (res) {

                    // alert("上传完成!");

                    console.log(res);

                }, 

                error: function(XMLHttpRequest, textStatus, errorThrown){   

                    console.log('error');

                    console.log(XMLHttpRequest);

                    console.log(textStatus);

                    console.log(errorThrown);

                },

                xhr: function(){

                    var xhr = $.ajaxSettings.xhr();

                    if(onprogress && xhr.upload) {

                        xhr.upload.addEventListener("progress" , onprogress, false);

                        return xhr;

                    }

                } 

            });

            // 上传进度函数

            function onprogress(evt){

                var loaded = evt.loaded;     //已经上传大小情况 

                var tot = evt.total;      //附件总大小 

                var per = Math.floor(100*loaded/tot);  //已经上传的百分比 

                console.log(per);

            }

        }

相关文章

网友评论

      本文标题:ajax上传图片(FormData形式)

      本文链接:https://www.haomeiwen.com/subject/zsicvqtx.html