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();
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。