Windows服务器的PHP怎么上传图片并在旁边显示

问题描述：

我问之前是有查过的，Windows会因为文件权限不足导致无法上传文件，希望能针对这个问题详细了解一下处理方法。以及同步图片显示的方法。

答

示例代码如下，需要注意获取图片的src中的base64字符串（注意去掉data:image/jpeg;base64,这串开头内容）回发服务器，服务器解码base64保存为图片

<!doctype html>
<meta charset="utf-8" />
<style>
    ul.list,ul.list li{margin:0;padding:0;list-style:none}
    ul.list li{margin-left:5px;width:200px;height:200px;display:inline-block;position:relative}
    ul.list li.choose{background:#f7f7f7;color:#adadad;line-height:200px;text-align:center;font-size:80px;overflow:hidden}
    ul.list li.choose input{font-size:200px;position:absolute;left:0;top:0;opacity:0}
    ul.list li img{height:100%;width:100%}
    ul.list li a.remove{position:absolute;right:5px;top:0;color:#f00;display:none;cursor:pointer}
    ul.list li:hover a.remove{display:block}
    #taMsg{resize:none;width:200px;height:200px;border:none;outline:none}
</style>
<textarea id="taMsg" placeholder="这一刻的想法..."></textarea>
<ul class="list" id="list">
    <li class="choose">+<input type="file" id="fl" accept="image/*" /></li>
</ul>
<input type="button" id="btnSubmit" value="提交" />
<script src="https://g.csdnimg.cn/??lib/jquery/1.12.4/jquery.min.js"></script>
<script>
    var comm = {
        compress: function (width, rate, img, isPng) {//压缩图片
            var canvas = document.createElement('canvas'), c = canvas.getContext('2d'), height;
            var nw = img.naturalWidth, nh = img.naturalHeight;
            height = nh;
            if (nw > width) { height = Math.floor(width * nh / nw); } else width = nw

            canvas.width = width; canvas.height = height;
            c.drawImage(img, 0, 0, nw, nh, 0, 0, width, height);
            return canvas.toDataURL(isPng ? 'image/png' : 'image/jpeg', rate / 100);
        },
        readFile: function (file, callback, width, rate) {//读取图片base64
            var r = new FileReader(), img = new Image;
            r.onload = function (e) {
                img.onload = function () {
                    callback && callback(comm.compress(width || 1200, rate || 70, img, file.type.indexOf('/png') != -1));
                    img.onload = img = r.onload = r = null;
                };
                img.src = e.target.result;
            };
            r.readAsDataURL(file);
        },
        getBase64: function (f, callback, width, rate, failure) {//获取file文件，默认图片最大长度1200，超过压缩，可以传入width指定长度，rate：压缩比率，默认70
            if (!f.files || !window.FileReader) { alert('请使用最新的浏览器如Chrome，IE11+浏览器访问此页面！'); throw 'No support H5 API el.files or FileReader' };
            if (!f.files.length) { failure && failure(); return; }
            if (!f.files[0].type.startsWith('image/')) { failure && failure(); alert('请选择图片文件！'); return }
            comm.readFile(f.files[0], callback, width || 1200, rate || 70);
        }
    };
    var list = $('#list');
    $('#fl').change(function () {
        comm.getBase64(this, function (base64) {
            list.prepend('<li><img src="' + base64 + '"/><a class="remove">x</a></li>')
        });
    });
    list.on('click', 'a.remove', function () {
        if (confirm('确认删除？！')) $(this).closest('li').remove();
    });
    $('#btnSubmit').click(function () {
        var data = { imgs: [] };
        data.msg = $('#taMsg').val();//其他附加值可以按照这个方法增加
        if (data.msg == '') { alert('请输入想法！'); return;}
        data.imgs = list.find('img').map(function () { return this.src.split('base64,').pop() }).get();//获取图片base64内容，去掉开头的data:image/jpeg;base64,内容
        $.ajax({
            url: 'x.php', type: 'POST', data: data, complete: function (xhr) {
                alert('服务器返回内容\n\n'+xhr.responseText)
            }
        });
    });
</script>

x.php，保存图片，写数据之类的操作自己加上


<?php

function base64_image_content($base64_image_content,$path){
    $new_file = $path."/".date('Ymd',time())."/";
    if(!file_exists($new_file)){//检查是否有该文件夹，如果没有就创建，并给予最高权限
        mkdir($new_file, 0700);
    }
    $new_file = $new_file.time().".jpg";
    if (file_put_contents($new_file, base64_decode($base64_image_content)))return '/'.$new_file;

    return false;
}


$msg=$_POST["msg"];
$imgs=isset($_POST["imgs"])?$_POST["imgs"]:0;//注意是数组
$savefn="";
if($imgs){//有选择图片，保存
  foreach($imgs as $img){
    $savefn.=base64_image_content($img,"upload")."\n";
  }
}

echo "msg：".$msg."\n\nimgs：".$savefn;
?>

答

是要加预览效果吗？

Windows服务器的PHP怎么上传图片并在旁边显示

相关推荐