黑马程序员技术交流社区

标题: 【上海校区】input的type=file上传图片简单使用 [打印本页]

---

作者: 梦缠绕的时候    时间: 2018-7-31 09:42
标题: 【上海校区】input的type=file上传图片简单使用

1.HTML

• 
  
  <!--预览图片-->
  
  
• 
  
  <img id="preview" />
  
  
• 
  
  <br />
  
  
• 
  
  <!--input的type=file实现上传文件-->
  
  
• 
  
  <input type="file" id="filePicker"/>
  
  
  

2.js

• 
  
  var upLoadControl = function() {
  
  
• 
  
          var filePicker = document.getElementById('filePicker')
  
  
• 
  
          filePicker.addEventListener('change', function(e) {
  
  
• 
  
                  //判断是否支持FileReader
  
  
• 
  
                  console.log('come in');
  
  
• 
  
                  if(window.FileReader) {
  
  
• 
  
                          console.log('y');
  
  
• 
  
                  } else {
  
  
• 
  
                          console.log('n');
  
  
• 
  
                          alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
  
  
• 
  
                          return false;
  
  
• 
  
                  }                               
  
  
• 
  
                  //如果支持h5图片上传属性则往下走
  
  
• 
  
                  var file = e.target.files[0];
  
  
• 
  
                  //判断获取的是否为图片文件  
  
  
• 
  
                  if(!/image\/\w+/.test(file.type)){
  
  
• 
  
                          alert("请确保文件为图像文件");
  
  
• 
  
                          return false;
  
  
• 
  
                  }else {
  
  
• 
  
                          previewPic(file);
  
  
• 
  
                  }
  
  
• 
  
          })
  
  
• 
  
  }();
  
  
• 
  
  //生成预览图
  
  
• 
  
  function previewPic(file) {
  
  
• 
  
          var reader = new FileReader();
  
  
• 
  
          reader.readAsDataURL(file);
  
  
• 
  
          reader.onload = function(e) {
  
  
• 
  
                  //获取图片dom
  
  
• 
  
                  var img = document.getElementById("preview");
  
  
• 
  
                  //图片路径设置为读取的图片
  
  
• 
  
                  img.src = e.target.result;
  
  
• 
  
          }                       
  
  
• 
  
  }
  
  
  

3.效果

4.说明

这个属性还是蛮好用的，h5属性，在能兼容h5属性的机器上使用

---

作者: wuqiong    时间: 2018-7-31 10:27

---

作者: 不二晨    时间: 2018-7-31 11:53
奈斯，很赞

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2