laravel js 单张图片上传及预览

1.html

<div class="content">
    <label for="permit_copies" class="file">选择图片
        <input id="permit_copies" class="file" type="file" name="permit_copies">
    </label>
    <img src="" height="100px" id="img11" style="display: none">
</div>

 

 

2.css

.file {
    position: relative;
    display: inline-block;
    background: #D0EEFF;
    border: 1px solid #99D3F5;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: #1E88C7;
    text-decoration: none;
    text-indent: 0;
    line-height: 15px;
}
.file input {
    position: absolute;
    font-size: 80px;
    right: 0;
    top: 0;
    opacity: 0;
}
.file:hover {
    background: #AADFFD;
    border-color: #78C3F3;
    color: #004974;
    text-decoration: none;
}

 

 

3.js

// 限制图片大小及类型
function verificationPicFile(file) {
    var fileSize = 0;
    var fileMaxSize = 2048;//2M
    var fileTypes = [".jpg", ".png", ".bmp", ".jpeg", ".gif"];
    var filePath = file.value;
    if(filePath){
        fileSize =file.files[0].size;
        var size = fileSize / 2048;
        if (size > fileMaxSize) {
            alert("文件大小不能大于2M！");
            file.value = "";
            return false;
        }else if (size <= 0) {
            alert("文件大小不能为0M！");
            file.value = "";
            return false;
        }
        var isNext = false;
        var fileEnd = filePath.substring(filePath.indexOf("."));
        for (var i = 0; i < fileTypes.length; i++) {
            if (fileTypes[i] == fileEnd) {
                isNext = true;
                break;
            }
        }
        if (!isNext){
            alert('不接受此文件类型');
            file.value = "";
            return false;
        }
        return true;
    }else{
        return true;
    }
}

// 图片预览
var inp1 = document.getElementById('permit_copies')
    inp1. onchange = function(e){
        // 检查大小
        let checkSize = verificationPicFile(document.getElementById('permit_copies'));
        if(!checkSize){return false}

        var reads = new FileReader();
        let f = document.getElementById('permit_copies').files[0];

        if (f){
            reads.readAsDataURL(f);
            reads.onload = function (e) {
                document.getElementById('img11').src = this.result;
                document.getElementById('img11').style.display = 'block';
            };
        }
    }

 

 

4.全部

 

 

5.js 把数据传到后台

6.PHP后台正常接收数据

$permit_copies = $request->file('permit_copies');

7. 定义图片名称（uniqid()加上原图名称）加uniqid()是防止图片名称重复

8.保存图片路径

$permit_copies->move('文件名/文件名/' . 获取到的图片变量名);

 

9. 正常把图片路径存入数据库