<dd>
<span class="dlleft">文章封面<b>*</b></span>
<span class="dlright">
<input type="file" name="litpic" id="litpic" onchange="LitPic(this)" accept="image/*"/>
<cite id="show1"></cite>
<cite>缩略图尺寸200*150像素</cite>
<div class="upview" id="upw1"></div>
</span>
</dd>
<?php if($row['litpic']!='')
{
?>
<dd>
<span class="dlleft">预览缩略图<b>*</b></span>
<span class="dlright">
<img name="nlitpic" id="nlitpic" src='<?php echo $row['litpic']; ?>' style="width: 200px; height:150px" /></span>
</dd>
<?php } ?>
<script type="text/javascript">
//判断浏览器是否支持FileReader接口
if (typeof FileReader == 'undefined') {
document.getElementById("xmTanDiv").InnerHTML = "<h1>当前浏览器不支持FileReader接口</h1>";
//使选择控件不可操作
document.getElementById("litpic").setAttribute("disabled", "disabled");
}
//选择图片,马上预览
function LitPic(obj) {
var file = obj.files[0];
console.log(obj);console.log(file);
console.log("file.size = " + file.size); //file.size 单位为byte
var reader = new FileReader();
//读取文件过程方法
reader.onloadstart = function (e) {
console.log("开始读取....");
}
reader.onprogress = function (e) {
console.log("正在读取中....");
}
reader.onabort = function (e) {
console.log("中断读取....");
}
reader.onerror = function (e) {
console.log("读取异常....");
}
reader.onload = function (e) {
console.log("成功读取....");
var img = document.getElementById("nlitpic");
img.src = e.target.result;
//或者 img.src = this.result; //e.target == this
}
reader.readAsDataURL(file)
}
</script>
扩展:另外一个jquery,当上传图片的时候实现预览。
<img id="img" src="/tuan/code/code1.jpg">
<input type="file" name="face" id="face">
第三步:jquery代码。
<script type="text/javascript">
function previewFile() {
var preview = document.querySelector('#img');//img的ID
var file = document.querySelector('#face').files[0];//输入框file的ID
var reader = new FileReader();
reader.onloadend = function () {
preview.src = reader.result;
}
if (file) {
reader.readAsDataURL(file);
} else {
preview.src = "";
}
}
</script>
下一篇:dede删除会员文章中的图片