码迷,mamicode.com
首页 > Web开发 > 详细

ajax上传图片

时间:2018-01-31 14:45:18      阅读:183      评论:0      收藏:0      [点我收藏+]

标签:for   inline   else   content   success   status   erro   style   max-age   

某一个项目需要和java后端做数据交互,需要用到上传,并且是跨域、鉴权上传,整理在此,以便有需要的时候能有记录

方法一、

 

 function Upfile() {
        var formData = new FormData();
        var img_file = document.getElementById("File1");
        var fileObj = img_file.files[0];
        formData.append("file", fileObj);////这里设置的是表单key、value,formData.append("Post Key", file input)
        $.ajax({
            type: "POST",
            processData: false,//重要设置,默认为true。默认情况下,发送的数据将被转换为对象以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息,请设置为false。,这里我们需要做文件上传,所以设置为false 

            url: "http://127.0.0.1/upload",
            data: formData,
            async: false,
            dataType: "json",

            contentType: false,//重要设置,这里设置成false,个人理解是不设置Requset数据类型 
            beforeSend: function (xhr) {
                //在这里设置请求头,如果请求头没有特别的要求,可以删除此处代码 
                var Authorization = "";
                xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
                xhr.setRequestHeader("Accept", "*/*");
                xhr.setRequestHeader("Access-Control-Max-Age", "3600");
                xhr.setRequestHeader("Authorization", "Bearer " + Authorization);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                data = XMLHttpRequest.responseJSON;

            },
            success: function (resdata) {
                data = resdata;
            }
        });
    }

  

方法二、

function upload() {
        var img_file = document.getElementById("File1");
        var theFormFile = img_file.files[0];
        var fd = new FormData();
        fd.append(‘file‘, theFormFile);//上传的文件: 键名,键值
        var url = "127.0.0.1/upload";//接口
        url = url ? url : ‘‘;
        var XHR = null;
        if (window.XMLHttpRequest) {
            // 非IE内核
            XHR = new XMLHttpRequest();
        } else if (window.ActiveXObject) {
            // IE内核,这里早期IE版本不同,具体可以查下
            XHR = new ActiveXObject("Microsoft.XMLHTTP");
        } else {
            XHR = null;
        }
        if (XHR) {
          
            XHR.open("POST", url); 
            XHR.onreadystatechange = function () {
                if (XHR.readyState == 4 && XHR.status == 200) {
                    var resultValue = XHR.responseText;
                    var data = JSON.parse(resultValue);
                    XHR = null;
                }
            }
       //设置请求头
            var Authorization = "";
            XHR.setRequestHeader("Access-Control-Allow-Origin", "*");
            XHR.setRequestHeader("Accept", "*/*");
            XHR.setRequestHeader("Access-Control-Max-Age", "3600");
            XHR.setRequestHeader("Authorization", "Bearer " + Authorization);
            XHR.send(fd);
        }
    };

  

ajax上传图片

标签:for   inline   else   content   success   status   erro   style   max-age   

原文地址:https://www.cnblogs.com/weiaiy/p/8391432.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!