html
If you have a picture, display picture is not empty
<div class="col-sm-2">
<img id="preview_img" src="{{ !empty($user->avatar) ? $user->avatar : '' }}" alt="" class="img-rounded" style="border-radius:500px; width:100px;heigith:100px;">
<input class=" file-loading preview_input" type="file" value="用户名" style="width:72px" id="avatar" name="avatar" onchange="mypit()">
</div>
js
<Script>
function mypit () {
var myfiles = document.getElementById ( "Avatar"); // get the object click button
var URL = '';
URL = window.URL.createObjectURL (myfiles.files [0]); / / get the document forms, and assigned to the url, each call URL.crreateObjectURl method will create an object.
document.getElementById ( "preview_img") src = url;. // Gets img src tag objects, and assigned to the url attribute of the img src tag, which is one step printing.
}
</ Script>
PHP Upload more convenient to use oss aliyun the next package sdk
? <PHP
namespace Brady \ Tool \ the Upload;
/ **
* Class Oss
* Simple single-file upload easy upload pictures only default bucket backstage Ali cloud built up
* https://github.com/aliyun/aliyun-oss-php -sdk
* Composer the require aliyuncs / OSS PHP-SDK-
* @package Brady \ Tool \ the Upload
* /
use Brady \ Tool \ Exception \ ExceptionResult;
use the OSS \ OssClient;
use the OSS \ Core \ OssException;
class Oss
{
public $ accessKeyId;
$ accessKeySecret public;
public $ Endpoint;
public $ bucket;
public $ ossClient;
public function the __construct ($ config)
{
IF (empty ($ config) || empty ($ config [ 'accessKeyId']) ||
empty ($ config [ 'accessKeySecret']) || empty ($ config [ 'Endpoint']
|| empty ($ config [ 'bucket'])
)) {
ExceptionResult :: throwException ( "Parameter error", to true);
}
$ this-> accessKeyId = $ config [ 'accessKeyId' ];
$ this-> accessKeySecret = $ config [ 'accessKeySecret'];
$ this-> Endpoint = $ config [ 'Endpoint'];
$ this-> bucket = $ config [ 'bucket'];
$ this-> = ossClient OssClient new new ($ this-> accessKeyId, $ this-> accessKeySecret, $ this-> Endpoint);
}
/ **
* @param $ local_file local file path can take /www/a.php
* @param $ upload to the server the remote_file the path and file name /test/a.php
* /
public function the Upload ($ local_file, $ remote_file)
{
the try {
$ RES = $ this-> ossClient-> the uploadFile ($ this-> bucket, the 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'] : '';
}