本文介绍了如何使用JavaScript实现图片上传后的本地预览功能。通过HTML5 File API及createObjectURL方法，可在不提交服务器的前提下实现即时显示。代码涵盖了标准浏览器及IE浏览器的兼容处理，确保不同环境下均能获取文件路径或对象URL，适用于头像上传等常见场景。
图片上传预览功能概述
在Web开发中，用户头像上传是常见需求。实现这一功能的关键在于如何在用户选择图片后，无需提交服务器即可在页面上预览该图片。
HTML布局与文件输入控件
首先需要进行HTML结构布局，定义文件输入控件以允许用户选择本地图片文件。
<label for="thumbnail" class="col-md-3 control-label">缩略图</label>
<div class="col-md-6">
<input type="file" class="form-control" id="thumbnail" name="thumbnail">
</div>
IE浏览器兼容性处理
使用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 = $('<img />');
eImg.attr('src', getObjectURL($(this)[0].files[0])); // 或 this.files[0] this->input
$(this).after(eImg);});
兼容多浏览器的解决方案
网上可用的完整代码较少，经过筛选和总结，以下方案实现了兼容主流浏览器及IE的文件上传显示功能。
<form action='' method='post' name='myform'>
<input type='file' id='iptfileupload' onchange='show()' value='' />
<img src='1.jpg' alt='' id='img' />
</form>
JavaScript核心代码实现
以下是具体的JavaScript实现代码，主要利用File API和URL.createObjectURL方法生成图片预览地址。
<script type="text/javascript">
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);
}
}
function show(){
//以下即为完整客户端路径
var file_img=document.getElementById("img"),
iptfileupload = document.getElementById('iptfileupload') ;
getPath(file_img,iptfileupload,file_img) ;
}
</script>
相关技术资源推荐
如需了解更多相关技术，可参考《ajax上传技术汇总》、《javascript文件上传操作汇总》及《jQuery上传操作汇总》等专题内容。
希望上述内容能协助大家更好地掌握JavaScript在文件处理方面的应用。