H5实现上传本地图片并能够预览的功能代码

最近工作中需要H5上传显示图片的功能，如图：

直接上代码：

htML部分

p class="works-wrap">
      p class="figure-box" id="figure_box">
    /p>
      p class="add-BTn">
       input tyPE="file" id="imgUploadBtn" />
       a href="javascript:void(0);
    " rel="external nofollow" >
    i>
    /i>
    添加作品/a>
    /p>
      /p>
     /p>
    

我这边用css将input[type=file] 设置成了opticy:0; 这样可以看起来更像原生的上传。

VAR addWork = {
  add: function(btn, figure_box) {
      var figureBox = document.getElementById(figure_box);
     //获取显示图片的p元素  var input = document.getElementById(btn);
 //获取选择图片的input元素  //这边是判断本浏览器是否支持这个API。  if (typeof FileReader === 'undefined') {
       alert("浏览器版本过低，请先更新您的浏览器~");
       input.setattribute('disabled', 'disabled');
  }
 else {
       input.addEventListener('change', reaDFile, false);
  //如果支持就监听改变事件，一旦改变了就运行readFile函数。  }
   function readFile() {
       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) {
       // 创建一个新增的图片和文字input   var figure = $('p class="figure">
    p class="figure-hd">
    我的头部/p>
    p class="figure-bd">
    img src="' + this.result + '" />
    textarea placeholder="请输入文字">
    /textarea>
    /p>
    /p>
    ');
       figure.appendTo(figureBox);
   }
  }
  }
 }
    

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

用html5的63行代码实现贪吃蛇游戏

HTML5实现留言和回复的页面

以上就是H5实现上传本地图片并能够预览的功能代码的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！