<img class="img-thumbnail img-responsive" src="" id="nlitpic">

  <input id="lefile" onchange="LitPic(this)" type="file" name="face" style="display:none">

   <div class="input-group">

      <input id="photoCover" class="form-control" type="text" style="height:30px;">

      <a class="btn btn-success input-group-addon" onclick="$('input[id=lefile]').click();">上传</a>

   </div>                                

  <script type="text/javascript">

     $('input[id=lefile]').change(function() {
            $('#photoCover').val($(this).val());

      });
      //判断浏览器是否支持FileReader接口
     if (typeof FileReader == 'undefined') {
    document.getElementById("xmTanDiv").InnerHTML = "<h1>当前浏览器不支持FileReader接口</h1>";
    //使选择控件不可操作
    document.getElementById("lefile").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;
    }
    reader.readAsDataURL(file)
}
         </script>

显示效果如下： 



样式二：

    <input id="lefiles" onchange="previewFilea()" type="file" name="face2" style="display:none">
  <div style="border: 1px dashed blue;height: 100px;width: 150px;line-height: 89px;">
    <input id="photoCovers"  type="text" style="height:30px;display: none;">
    <div onclick="$('input[id=lefiles]').click();" style="font-size: 30px;">+</div>
  </div>
  <script type="text/javascript">
   $('input[id=lefiles]').change(function() {
    $('#photoCovers').val($(this).val());
       });
  </script>

样式三：上传后可预览图片

 <img id="preview" src="__UPLOADS__/siteinfo/{$data.logo_icon}" style="widows: 200px;height: 40px;" />

      <br />

  <input type="file" name="logo_icon" onchange="imgPreview(this)" />

<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>