H5 implémente un code fonctionnel pour télécharger des images locales et les prévisualiser

Cet article présente principalement le code d'implémentation de H5 pour télécharger des images locales et les prévisualiser en détail. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

L'affichage de téléchargement H5 est nécessaire dans les travaux récents. fonction de l'image, comme indiqué sur la figure :

Entrez directement le code :

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

J'ai utilisé CSS pour définir input[type=file] sur optic:0 afin qu'il ressemble davantage à un téléchargement natif.

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 = $(&#39;<p class="figure"><p class="figure-hd">我的头部</p><p class="figure-bd"><img src="&#39; + this.result + &#39;" /><textarea placeholder="请输入文字"></textarea></p></p>&#39;); 
  figure.appendTo(figureBox); 
  } 
 } 
 } 
}

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez prêter attention à. le site PHP chinois !

Recommandations associées :

Utiliser 63 lignes de code HTML5 pour implémenter le jeu Snake

HTML5 pour implémenter les messages et les réponses Page

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!