一只陌生人
2021-09-01 17:59
采纳率: 100%
浏览 36
已结题

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

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

img

  • 收藏

2条回答 默认 最新

  • 已采纳

    示例代码如下,需要注意获取图片的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;
    ?>
    
    
    打赏 评论
    1人已打赏
  • 下圉天天 2021-09-02 17:19

    是要加预览效果吗?

    打赏 评论

相关推荐 更多相似问题