码迷,mamicode.com
首页 > Web开发 > 详细

html   上传图片,本页预览

时间:2017-09-07 23:12:26      阅读:410      评论:0      收藏:0      [点我收藏+]

标签:html   上传图片   本页预览   

直接上代码



<!DOCTYPE html><html><head><meta charset="UTF-8"><title>图片上传预览</title><script type="text/javascript">    function imgPreview(fileDom){        //判断是否支持FileReader        if (window.FileReader) {            var reader = new FileReader();        } else {            alert("您的设备不支持图片预览功能,如需该功能请升级您的设备!");        }        //获取文件        var file = fileDom.files[0];        var imageType = /^image\//;        //是否是图片        if (!imageType.test(file.type)) {            alert("请选择图片!");            return;        }        //读取完成        reader.onload = function(e) {            //获取图片dom            var img = document.getElementById("preview");            //图片路径设置为读取的图片            img.src = e.target.result;        };        reader.readAsDataURL(file);    }</script></head><body>    <img id="preview" />    <br />    <input type="file" name="file" onchange="imgPreview(this)" /></body></html>

本文出自 “Exist” 博客,请务必保留此出处http://exist.blog.51cto.com/10305882/1963516

html   上传图片,本页预览

标签:html   上传图片   本页预览   

原文地址:http://exist.blog.51cto.com/10305882/1963516

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!