zoukankan      html  css  js  c++  java
  • js上传图片预览

    html

    如果有头像了,显示头像 没有为空

    <div class="col-sm-2">
    <img id="preview_img" src="{{ !empty($user->avatar) ? $user->avatar : '' }}" alt="" class="img-rounded" style="border-radius:500px; 100px;heigith:100px;">
    <input class=" file-loading preview_input" type="file" value="用户名" style="72px" id="avatar" name="avatar" onchange="mypit()">

    </div>

    js
    <script>
    function mypit() {

    var myfiles = document.getElementById("avatar"); //获取点击按钮的对象

    var url = '';

    url = window.URL.createObjectURL(myfiles.files[0]); //获取forms中的文件,并赋值给url,每次调用URL.crreateObjectURl方法时,都会创建一个对象。

    document.getElementById("preview_img").src = url; //获取img标签对象的src,并将url赋值给img标签的src属性,这是完成打印的一步。

    }
    </script>

    php 上传 使用oss阿里云比较方便 下个sdk 封装下
    <?php
    
    namespace BradyToolUpload;
    
    /**
     * Class Oss
     * 简单上传单文件 方便上传图片而已 默认存储桶后台阿里云建好了
     * https://github.com/aliyun/aliyun-oss-php-sdk
     * composer require aliyuncs/oss-sdk-php
     * @package BradyToolUpload
     */
    
    use BradyToolExceptionExceptionResult;
    use OSSOssClient;
    use OSSCoreOssException;
    
    class Oss
    {
    	public $accessKeyId;
    	public $accessKeySecret;
    	public $endpoint;
    	public $bucket;
    
    	public $ossClient;
    
    
    	public function __construct($config)
    	{
    		if (empty($config) || empty($config['accessKeyId']) ||
    			empty($config['accessKeySecret']) || empty($config['endpoint']
    				|| empty($config['bucket'])
    			)) {
    			ExceptionResult::throwException("参数错误", true);
    		}
    		$this->accessKeyId = $config['accessKeyId'];
    		$this->accessKeySecret = $config['accessKeySecret'];
    		$this->endpoint = $config['endpoint'];
    		$this->bucket = $config['bucket'];
    
    		$this->ossClient = new OssClient($this->accessKeyId, $this->accessKeySecret, $this->endpoint);
    
    	}
    
    	/**
    	 * @param $local_file 本地文件 可以带路径 /www/a.php
    	 * @param $remote_file 上传到服务器的路径和文件名 /test/a.php
    	 */
    	public function upload($local_file, $remote_file)
    	{
    		try {
    			$res = $this->ossClient->uploadFile($this->bucket, $remote_file, $local_file);
    			return $res;
    		} catch (OssException $e) {
    			ExceptionResult::throwException($e->getMessage(), true);
    		}
    
    	}
    
    }
    

      



    public function uploadAvatar($request)
    {

    $config = [
    'accessKeyId'=>env("accessKeyId"),
    'accessKeySecret'=>env("accessKeySecret"),
    'endpoint'=>env("endpoint"),
    'bucket'=>env("bucket"),
    ];

    $oss = new Oss($config);
    $res = $oss->upload($request->file('avatar'),"jianshu/avatar/".md5(time()).".jpg");

    return isset($res['oss-request-url']) ? $res['oss-request-url'] : '';

    }
  • 相关阅读:
    HTTP 错误 404.17
    ASP.NET 日志组件Smart.LogNet.DLL 引用即可写入日志及读取日志
    委托(Func与Action)
    三元表达式
    http://www.cnblogs.com/nangong/p/db29669e2c6d72fb3d0da947280aa1ce.htm ASP.NET从零开始学习EF的增删改查
    文件流的读写操作
    6.递归加载文件目录树(递归自己加载自己)
    文件基本操作
    线程
    委托
  • 原文地址:https://www.cnblogs.com/brady-wang/p/11665970.html
Copyright © 2011-2022 走看看