博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

兼容浏览器的图片上传本地预览

Posted on 2012-11-17 09:20  liyanxue  阅读(218)  评论(0)    收藏  举报 
   1:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   2:  <html xmlns="http://www.w3.org/1999/xhtml">
   3:  <head>
   4:      <title></title>
   5:      <script type="text/javascript" src="scripts/jquery.min.js"></script>
   6:     <script type="text/javascript">
   7:              $(function () {
   8:              $("#fuImg").change(function () {
   9:                  previewImage(this);
  10:              });
  11:          });
  12:   
  13:          function previewImage(file) {
  14:              var porImg = $('#imgPrv');
  15:   
  16:              if (file["files"] && file["files"][0]) {
  17:                  var reader = new FileReader();
  18:                  reader.onload = function (evt) {
  19:                      porImg.attr({ src: evt.target.result });
  20:   
  21:                  }
  22:                  reader.readAsDataURL(file.files[0]);
  23:              }
  24:              else {
  25:   
  26:                  //IE下，使用滤镜
  27:   
  28:   
  29:                  var docObj = document.getElementById('fuImg');
  30:                  docObj.select();
  31:                  //解决IE9下document.selection拒绝访问的错误
  32:                  docObj.blur();
  33:                  var imgSrc = document.selection.createRange().text;
  34:                  var localImagId = document.getElementById("imgPrv");
  35:                  //   $('#imgPrv').width(150).height(200); //必须设置初始大小
  36:   
  37:                  //图片异常的捕捉，防止用户修改后缀来伪造图片
  38:                  try {
  39:                      localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
  40:                      localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
  41:                  } catch (e) {
  42:                      alert("您上传的图片格式不正确，请重新选择!"); return false;
  43:                  }
  44:   
  45:                  // $('#imgPrv').hide();
  46:                  document.selection.empty();
  47:              }
  48:          }
  49:      </script>
  50:  </head>
  51:  <body>
  52:  <table>
  53:  <tr>
  54:    <td>
  55:                      <asp:FileUpload ID="fuImg" runat="server" />
  56:                  </td>
  57:                  <td >
  58:                      <asp:Image ID="imgPrv" ImageUrl="/Images/org/no_pic.gif" runat="server" Width="150"
  59:                          Height="200" />
  60:                  </td>
  61:  </tr>
  62:  </table>
  63:  </body>
  64:  </html>