牛骨文教育服务平台(让学习变的简单)
博文笔记

PHP与h5 ajax 跨域上传图片解决方案

创建时间:2017-12-06 投稿人: 浏览次数:582

可能很多人会遇到一种很烦人的情况,那就是文件上传各种限制,参数设置,这里记录一下php与h5利用ajax上传图片。废话少说上代码:

html页面的啦~

<form  method="post" enctype="multipart/form-data" id="form">
    <input type="file" id="uploadFile" runat="server" />
    <input type="button" id="btnUpload" value="确定" onclick="uploadImage()" />
    <div id="imgDiv">
    </div>
</form>

js方法的啦~

//获取图片
    var file = $("#uploadFile")[0].files[0];
    //设置传参
    var formdata = new FormData();
    //获取文件放到formdata
    formdata.append("file",file);
    formdata.append("参数2","123456789");

    $.ajax({
        url : 你的接口或者请求路径,
        type: "post",
        // dataType: "json",
        // json:"callback",(因为php设置了header跨域,并不需要用这两个参数,设置了反而影响返回)
        data: formdata,
        processData: false,
        contentType: false,
        cache: false,
        success:function(res){
            console.log(res);
        },error:function(res){
            console.log("错误");
        }
    })

php(服务器端)关键点!就是上面这两个header设置,接收所有域的请求!


//下面的请求头也是我在网上各种搜索才找到的

header("Access-Control-Allow-Origin:*");
/*星号表示所有的域都可以接受,*/
header("Access-Control-Allow-Methods:GET,POST");

//其实写到这基本后面就是基本的参数接收了
        //获取图片的临时路径
        $image = $_FILES["file"]["tmp_name"];
        //只读方式打开图片文件
        $fp = fopen($image, "r");
        //读取文件(可安全用于二进制文件)
        $file = fread($fp, $_FILES["file"]["size"]); //二进制数据流

        //获取时间
        $date_info = getdate();
        $year = $date_info["year"];
        $mon = $date_info["mon"];
        //上传路径
        $dir_url = "../images/test/";
        //检测目录是否存在,不存在则建立目录
        if (is_dir($dir_url)) {

        } else {
            mkdir($dir_url, 0777, true);
        }

        //生成初始化文件名
        $filename= $_FILES["file"]["name"];
        //获取后缀
        $type = explode(".",$_FILES["file"]["name"]);

        //新图片的路径
        $newFilePath = $dir_url.$filename.".".$type[1];
        $data = $file;
        $newFile = fopen($newFilePath,"w"); //打开文件准备写入
        fwrite($newFile,$data); //写入二进制流到文件
        fclose($newFile); //关闭文件

o -> right !!!ok,这就是很完美的上传文件或者图片了~。终于设置大小或者图片压缩之类的,你们就见仁见智各自发挥了哈!

声明:该文观点仅代表作者本人,牛骨文系教育信息发布平台,牛骨文仅提供信息存储空间服务。