JS图片预览 上传

HTML

<div class="file-caption form-control  kv-fileinput-caption" id="prevView_f" tabindex="500">
	<!--图片展示-->
	<img height="300" id="prevView" src="" style="display:none;"/>
</div>
<input type="file" onchange="prev(this)" id="imgfile">

JS

function imgUpload()
    {
        // 1. 将 jQuery 对象转化为 DOM 对象，并获取选中的文件列表
        var files = $('#imgfile')[0].files
        // 2. 判断是否选择了文件
        if (files.length <= 0) {
            return alert('请选择图片后再上传');
        }
        console.log('123123')
        console.log(files[0])
        // 向 FormData 中追加文件
        var fd = new FormData()
        fd.append('file', files[0])

        $.ajax({
            method: 'POST',
            url: '/index.php/admin/upload/img',
            data: fd,
            // 不修改 Content-Type 属性，使用 FormData 默认的 Content-Type 值
            contentType: false,
            // 不对 FormData 中的数据进行 url 编码，而是将 FormData 数据原样发送到服务器
            processData: false,
            success: function(res) {
                var re = JSON.parse(res);
                if(re.code == 1)
                {
                    var file_path = re.data.file_path;
                    var path = re.data.path;
                    //获取展示图片的区域
                    $('#file_img').attr('value',path);
                    $('#prevView').attr('style','').attr('src',file_path);
                    $('#prevView_f').css('height','320px');
                }else
                {
                    // 报错
                }
            }
        })
    }

    // 图片选择展示
    function prev(event){

        //获取文件对象
        // let file = event.files[0];
        //获取文件阅读器
        // let reader = new FileReader();
        // reader.readAsDataURL(file);
        // reader.onload = function(){
        //     //给img的src设置图片url
        //     img.setAttribute("src", this.result);
        // }
        // img.style.display = block;
        // $('#prevView').attr('style','');
        // $('#prevView_f').css('height','320px');
        imgUpload();
    }