跨域ajax图片打开即上传（input file）

冯奎
2018-05-20 17:42:26
HTML
php html javascript

之前在写一个网站时，遇到了跨域ajax打开及上传图片，在网上找了半天没有找个，所以自己写了一个，记录下来，便于自己和别人使用。前台使用html及jquery的ajax上传，后台使用thinkphp3.2.3接收数据并保存，返回路径。

1、设置header头，CORS在框架或是控制器头部加入

// 指定允许其他域名访问
header('Access-Control-Allow-Origin: *');
// 响应类型
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE');
// 响应头设置
header("Access-Control-Allow-Headers: X-Requested-With, Content-Type, Accept, Apikey");

2、编写页面及ajax请求

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
    </head>
    <body>
        <div class="w-img choseimg">
            <input type="file" id="appImgs" multiple>
            <img src="" id="imageId">
        </div>
    </body>
    <script type="text/javascript">
        function readURL(input, tmpimg) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    if (!/image/.test(e.target.result)) {
                        alert('请上传图片格式...');
                        return false;
                    }
                    tmpimg.attr('src', e.target.result);
                }
                reader.readAsDataURL(input.files[0]);
            }
        }
        $(function () {
            // var tmpimgurl = $(".choseimg img").attr('src');
            // 头像
            $(".choseimg input").change(function () {
                var $me = $(this);
                var $img = $me.parent().find('img');
                readURL(this, $img); 

                var oFiles = document.querySelector("#appImgs").files;
                // 组装数据（文件数据，普通数据）
                var formData = new FormData();
                formData.append('file',    oFiles[0]);

                $.ajax({
                    type: 'POST',  //请求类型
                    url: '请求地址', //绝对路轻
                    data: formData,  //要发送到服务器的数据。包含file数据
                    cache: false,  //表示浏览器是否缓存被请求页面。
                    contentType: false,  //发送数据到服务器时所使用的内容类型。
                    processData: false,  //规定通过请求发送的数据是否转换为查询字符串。（重要）
                    xhrFields: {withCredentials: true},  //一对“文件名-文件值”在本机设置XHR对象。例如，用它来设置withCredentials为true的跨域请求。 用户固定PHPSESSID不变
                    success: function(re) {
                        console.log(re);
                    },
                    error:function(re){
                        console.log(re);
                    }
                });
            });
        });
    </script>
</html>

3、后台添加方法及图片上传的函数

/**
 * fengkui.net
 * [app_upload_image 上传图片并压缩]
 * @param  [type]  $path    [description]
 * @param  integer $maxSize [description]
 * @return [type]           [description]
 */
function app_upload_image($path,$maxSize=52428800)
{
    ini_set('max_execution_time', '0');
    // 去除两边的/
    $path=trim($path,'.');
    $path=trim($path,'/');
    $config=array(
        'rootPath'  =>'./',         //文件上传保存的根路径
        'savePath'  =>'./'.$path.'/',
        'exts'      => array('jpg', 'gif', 'png', 'jpeg','bmp'),
        'maxSize'   => $maxSize,
        'autoSub'   => true,
        );
    $upload = new \Think\Upload($config);// 实例化上传类
    $info = $upload->upload();

    if($info) {
        foreach ($info as $k => $v) {
            $name = $v['savepath'].$v['savename'];
            $image = new \Think\Image();
            $image->open("$name");
            $image->thumb(800, 800)->save("$name"); //图片压缩替换
            $data[]=trim($v['savepath'],'.').$v['savename']; //存入数组中返回
        }
        return $data;
    }
}

冯奎博客