php网站怎么把上传的图片加载在头像上,JavaScript

news/2024/5/15 11:43:54/文章来源:https://blog.csdn.net/weixin_39574720/article/details/116282642

js实现图片上传并正常显示

项目经常会用到头像上传，那么怎么实现呢？

首先是HTML布局：

缩略图

jquery方式，IE不支持，但IE会获得绝对的上传路径信息：

function getObjectURL(file) {

var url = null ;

if (window.createObjectURL!=undefined) { // basic

url = window.createObjectURL(file) ;

} else if (window.URL!=undefined) { // mozilla(firefox)

url = window.URL.createObjectURL(file) ;

} else if (window.webkitURL!=undefined) { // webkit or chrome

url = window.webkitURL.createObjectURL(file) ;

}

return url ;

}

$('#thumbnail').change(function() {

var eImg = $('');

eImg.attr('src', getObjectURL($(this)[0].files[0])); // 或 this.files[0] this->input

$(this).after(eImg);});

网上找一份可用的代码非常不易，经过不断的筛选总结才得出兼容所有的文件上传显示

HTML布局

JS代码：

function getPath(obj,fileQuery,transImg) {

var imgSrc = '', imgArr = [], strSrc = '' ;

if(window.navigator.userAgent.indexOf("MSIE")>=1){ // IE浏览器判断

if(obj.select){

obj.select();

var path=document.selection.createRange().text;

alert(path) ;

obj.removeAttribute("src");

imgSrc = fileQuery.value ;

imgArr = imgSrc.split('.') ;

strSrc = imgArr[imgArr.length - 1].toLowerCase() ;

if(strSrc.localeCompare('jpg') === 0 || strSrc.localeCompare('jpeg') === 0 || strSrc.localeCompare('gif') === 0 || strSrc.localeCompare('png') === 0){

obj.setAttribute("src",transImg);

obj.style.filter=

"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+path+"', sizingMethod='scale');"; // IE通过滤镜的方式实现图片显示

}else{

//try{

throw new Error('File type Error! please image file upload..');

//}catch(e){

// alert('name: ' + e.name + 'message: ' + e.message) ;

//}

}

}else{

// alert(fileQuery.value) ;

imgSrc = fileQuery.value ;

imgArr = imgSrc.split('.') ;

strSrc = imgArr[imgArr.length - 1].toLowerCase() ;

if(strSrc.localeCompare('jpg') === 0 || strSrc.localeCompare('jpeg') === 0 || strSrc.localeCompare('gif') === 0 || strSrc.localeCompare('png') === 0){

obj.src = fileQuery.value ;

}else{

//try{

throw new Error('File type Error! please image file upload..') ;

//}catch(e){

// alert('name: ' + e.name + 'message: ' + e.message) ;

//}

}

} else{

var file =fileQuery.files[0];

var reader = new FileReader();

reader.onload = function(e){

imgSrc = fileQuery.value ;

imgArr = imgSrc.split('.') ;

strSrc = imgArr[imgArr.length - 1].toLowerCase() ;

if(strSrc.localeCompare('jpg') === 0 || strSrc.localeCompare('jpeg') === 0 || strSrc.localeCompare('gif') === 0 || strSrc.localeCompare('png') === 0){

obj.setAttribute("src", e.target.result) ;

}else{

//try{

throw new Error('File type Error! please image file upload..') ;

//}catch(e){

// alert('name: ' + e.name + 'message: ' + e.message) ;

//}

}

// alert(e.target.result);

}

reader.readAsDataURL(file);

}