<!DOCTYPE html>
<html>
<head>
<title>上传图片预览</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="js/jquery-1.7.2.min.js">/script>
<script type="text/javascript">
$(function(){
$("input[name=img]").change(function(){
var files = $(this).prop('files');
var old_img = "<{$row.img}>"; //数据库中已有的图片
if(files[0]){ //若选择了图片
var objUrl = getObjectURL(files[0]);
if(objUrl!=''){
$(".img_tr").show();
$(".img_show").attr("src",objUrl);
}
}else{ //若未选择图片
if(old_img!=''){ //若数据库中已有图片，则显示旧图片
$(".img_show").attr("src","<{$_config.upload_path}>live/cover/"+old_img);
}else{ //若数据库中无图片，则隐藏预览行
$(".img_tr").hide();
$(".img_show").attr("src","");
}
}
});
}
//建立一个可存取到file的url
function getObjectURL(file){
var url = null;
if(window.createObjectURL!=undefined){
//基本的
url = window.createObjectURL(file);
}else if(window.URL!=undefined){
//火狐
url = window.URL.createObjectURL(file);
}else if(window.webkitURL!=undefined){
//谷歌
url = window.webkitURL.createObjectURL(file);
}
return url ;
}
</script>
</head>
<body>
<h3>请选择图片文件：JPG/GIF</h3>
<table cellpadding="0" cellspacing="0">
<tr>
<td>上传主图片：</td>
<td>
<a href="javascript:;" style="position:relative;">
<input type="file" name="img" style="opacity:0;filter:alpha(opacity=0);width:130px;height:110px;position:absolute;left:0;z-index:9;" <{if $row.img==''}>datatype="*" nullmsg="请上传图片" sucmsg=" "<{/if}> />
<img src="image/upload.png" style="width:130px;height:110px;" />
</a>
</td>
</tr>
<tr class="img_tr" style="<{if $row.img==''}>display:none;<{/if}>">
<td class="tableleft">主图片预览：</td>
<td class="tableright"><img class="img_show" src="<{$_config.upload_path}>live/cover/<{$row.img}>" style="width:130px;height:110px;" /></td>
</tr>
</table>
</body>
</html>jquery 选取图片后不上传预览图片
猜你喜欢
转载自blog.csdn.net/cuilei210/article/details/79397273
今日推荐
周排行