:那个file按钮样式先忽略点击选择图片(上)

2023-11-24    分类: 网站建设

先上传效果图:

先忽略文件按钮样式

点击选择图片(浏览)jquery+php头像上传预览代码,随机选择一张图片

js代码如下

//上传图片立即预览
 function previewImage(imgFile) {
  var filextension = imgFile.value.substring(imgFile.value
    .lastIndexOf("."), imgFile.value.length);
  filextension = filextension.toLowerCase();
  if ((filextension != '.jpg') && (filextension != '.gif')
    && (filextension != '.jpeg') && (filextension != '.png')
    && (filextension != '.bmp')) {
   alert("对不起,系统仅支持标准格式的照片,请您调整格式后重新上传,谢谢 !");
   imgFile.focus();
  } else {
   var path;
   if (document.all)//IE
   {
    imgFile.select();
    path = document.selection.createRange().text;
    document.getElementbyId("photo_info").innerHTML = "";
    document.getElementbyId("photo_info").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\""
      + path + "\")";//使用滤镜效果  
   } else//FF
   {
    path = window.URL.createObjectURL(imgFile.files[0]);// FF 7.0以上
    //path = imgFile.files[0].getAsDataURL();// FF 3.0
    document.getElementbyId("photo_info").innerHTML = "";
    //document.getElementbyId("img1").src = path;
   }
  }
 }

html 代码其实并不重要

选择图片