原生JS 实现图片上传预览

前端js实现图片上传的原理是通过input标签的type=file属性将input标签定义为上传文件，对input进行onchange事件的监听，当input的value值改变时代表用户已经上传了图片，而input的value值就是用户上传的图片的相对路径，new一个FileReader对象，将图片转换成base64格式的编码(表单用multipart/form-data，可以不用加hidden传base64)，动态创建img标签并将转换后的编码赋值给img标签的src属性即可。

h5页面使用原生JS实现图片上传预览功能

<ul class="weui-uploader__files" id="uploaderFiles">
    <li class="weui-uploader__file">
        <img src="/statics/front/images/picture02.jpg"/>
        <input type="hidden" name="files[]" value="value="data:image/jpeg;base64,/9j/4QAY"/>
        <i class="weui-icon-cancel"></i>
    </li>
</ul>
<div class="weui-uploader__input-box">
    <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple="">
    <img style="margin-top: 10px;" src="/statics/front/images/camera.png" width="45%" alt="">
    <p>添加图片</p>
</div>

 JS获取图片数据和预览数据

//图片上传
$('#uploaderInput').on('change',function (e) {
    var $this = $(this);

    //图片对象
    var file = $this.get(0).files[0];
    //file.name文件原名
    var maxSize = 2 * 1024 * 1024;//2M
    if (file.size > maxSize) {
        alert("上传文件不许大于2M");
        return;
    }

    //将图片对象转换成base64位格式字符串
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function(e) {
        post_base64image_str = this.result;

        var imgUrl = window.URL.createObjectURL(file);
        //获取点击的文本框
        var files = $this.parents('.weui-uploader').find('.weui-uploader__files');
        var html = '<li class="weui-uploader__file">\n' +
          ' <img src="'+imgUrl+'"/>\n<input type="hidden" name="files[]" value="'+post_base64image_str+'"/>\n' +
          '  <i class="weui-icon-cancel"></i>\n' +
          ' </li>'
        files.append(html);
    };
})
//点击叉叉 删除图片
$(document).on('click','.weui-uploader__files .weui-icon-cancel',function () {
    $(this).parents('.weui-uploader__file').remove()
})

PHP后端将base64图片转成图片文件

/**
 * [将Base64图片转换为本地图片并保存]
 * @param  [Base64] $base64_image_content [要保存的Base64]
 * @param  [目录] $path [要保存的路径]
 */
function base64_image_content($base64_image_content, $path) {
    //匹配出图片的格式
    if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image_content, $result)) {
        $type = $result[2]; //图片后缀
        if ($type === 'jpeg') {
            $type = 'jpg';
        }
        $new_file = $path . "/" . date('Ymd', time()) . "/";
        if (!file_exists($new_file)) {
            //检查是否有该文件夹，如果没有就创建，并给予最高权限
            mkdir($new_file, 0700);
        }
        $new_file = $new_file . md5($base64_image_content) . ".{$type}";
        if (file_put_contents($new_file, base64_decode(str_replace($result[1], '', $base64_image_content)))) {
            return ltrim($new_file, ".");
        } else {
            return false;
        }
    } else {
        return false;
    }
}

效果截图