图片上传预览，并且限制图片大小

图片上传预览，并且限制图片大小

  <! DOCTYPE html>

< html >

     < head >

           < meta charset = "utf-8" />

           < title ></ title >

     </ head >

     < body >

           < input type = "file" name = "file" id = "file" value = "" />

     </ body >

     < script type = "text/javascript" >

            //var wrapper = document.getElementById("img_wrapper"); //获取显示图片的div元素

          var input = document .getElementById( "file" ); //获取选择图片的input元素           

                //这边是判断本浏览器是否支持这个API。

         if ( typeof FileReader === 'undefined' ){

            // wrapper.innerHTML = "抱歉，你的浏览器不支持 FileReader";

                 alert( "抱歉，你的浏览器不支持 FileReader" );

             input .setAttribute( 'disabled' , 'disabled' );

         } else {

             input .addEventListener( 'change' ,readFile, false ); //如果支持就监听改变事件，一旦改变了就运行readFile函数。

         }

             

         function readFile ( a ){

             var file = this .files[ 0 ]; //获取file对象

             //判断file的类型是不是图片类型。

             if ( ! /image\/\w+/ .test( file .type)){

                 alert( "文件必须为图片！" );

                 return false ;

             }

            

             var reader = new FileReader(); //声明一个FileReader实例

             reader.readAsDataURL( file ); //调用readAsDataURL方法来读取选中的图像文件

             //最后在onload事件中，获取到成功读取的文件内容，并以插入一个img节点的方式显示选中的图片

             reader. onload = function ( e ){

                 var data = e.target.result;

                 var image = new Image();              

                      image . onload = function (){

                            //var wrapper = document.getElementById("img_wrapper"); //获取显示图片的div元素

                            if ( file .size > 102400 ) {

                                alert( '不能上传大于100k的图片' )

                           }

                            else {

                                 var fileSize = image .fileSize;

                                alert(width + '======' + height + "=====" + fileSize);

                                 //wrapper.innerHTML = '<img src="'+data+'" alt=""/>'

                            }

                     };

                      image .src = data;          

                // alert(this)

             }

         }

      </ script >

</ html >