js解决上传图片的预览

来源：互联网发布：网络语大仲马什么意思编辑：程序博客网时间：2024/06/15 18:42

js解决上传图片的预览

直接上代码：

<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus®">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <title>Document</title> </head> <body> <div id="img_td"></div>  <INPUT id=img type=file name=img > </body>  <script type="text/javascript">// JavaScript Document//  js解决上传图片的预览    var msg = document.getElementById("img_td");//  接受提示信息的位置    var result = document.getElementById("img_td");//  接受图片预览的位置    var input = document.getElementById("img");//  上传图片的input框（type="file"）    if(typeof FileReader==='undefined'){ //判断是否支持        msg.innerHTML = "抱歉，你的浏览器不支持 FileReader";         input.setAttribute('disabled','disabled');     }else{         //给上传图片的input框绑定change（内容改变）事件，并且触发事件时调用 readFile 方法        input.addEventListener('change',function(){            var file = this.files[0];//获得当前选中的图片            if(!/image\/\w+/.test(file.type)){ //判断是不是图片                alert("文件必须为图片！");                 input.value = "";                return false;             }              var reader = new FileReader(); //获得实例            reader.readAsDataURL(file); //把图片变成DataURL            reader.onload = function(e){ //onload  加载成功调用function                result.innerHTML = '<img src="'+this.result+'" class="img_zhanshi"/>';//把结果给页面                //this.result  图片的DataURL格式的地址            };        },false);     }  </script></html>

阅读全文

0 0