美文网首页
ajax实现跨域上传文件

ajax实现跨域上传文件

作者: 超鸽带你飞 | 来源:发表于2018-11-19 19:49 被阅读4次

js代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>aaaa</title>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

</head>
<body>
    <input type="file" id="file_upload"/>
    <input type="button" value="上传图片" id="upload"/>            
</body>


<script type="text/javascript">
    $(function() { 
        function ajaxFileUpload(){
            var formData = new FormData();
            formData.append('file',$("#file_upload")[0].files[0]);    //将文件转成二进制形式
            $.ajax({
                type:"post",
                url:"http://127.0.0.1/demo.php",
                async:false,
                contentType: false,    //这个一定要写
                processData: false, //这个也一定要写,不然会报错
                data:formData,
                dataType:'text',    //返回类型,有json,text,HTML。这里并没有jsonp格式
                success:function(data){
                    console.log(data);
                },
                error:function(XMLHttpRequest, textStatus, errorThrown, data){
                    console.log(errorThrown);
                }            
            });
        }
    

    $("#upload").click(function(){
        ajaxFileUpload();
    });

});
</script>
</html>

后端php代码

<?php
header("Access-Control-Allow-Origin: *");
echo json_encode(array('code'=>200,'msg'=>''));

相关文章

  • ajax实现跨域上传文件

    js代码 后端php代码

  • FormData提交

    ajax2.0 a.formdata:控制提交数据、文件上传b.cors跨域 formdata:set(key, ...

  • 跨域上传图片并预览

    跨域上传文件 之前解决跨域问题都是使用的JQuery的JSONP类型的Ajax请求,JSONP原理是让服务器把数据...

  • 跨域上传图片 cros方式

    FormData ajax 跨域上传图片 cros方式 FormData参考: http://www.jians...

  • AJAX

    题目 手写一个ajax 跨域的常用实现方式 知识点 XMLHttpRequest 状态码 跨域:同源策略,跨域解决...

  • 解决ajax跨域问题

    Jsonp解决ajax跨域问题 CORS解决ajax跨域问题

  • 4种方法解决js跨域的实现方式

    一、JSONP 使用ajax实现跨域: 二、CORS跨域资源共享 三、Nginx反向代理 四、webpack (在...

  • nodejs基础3-数据通信:fetch,ajax2.0和web

    数据通信: ajax、跨域 fetch jsonp Ajax2.0->FormData:直接提交表单,文件 Web...

  • Nginx之跨域请求配置

    一般情况下,我们跨域请求或者跨域上传,都需要修改nginx的配置文件 比如设计跨域上传: 如果你的反向代理是Ngi...

  • 前端跨域

    什么是ajax跨域 ajax跨域的原理 ajax出现请求跨域错误问题,主要原因就是因为浏览器的“同源策略”,可以参...

网友评论

      本文标题:ajax实现跨域上传文件

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