uc浏览器下 input file，上传图片问题

0 0

uc浏览器下 input file，上传图片问题

手机网站，在做上传图片时，用 <input type="file" />时， uc浏览器 会把这个控件封装为三个按钮拍照上传图片上传文件。为了做统一的样式，把这个<input type="file">隐藏掉，用js触发按钮的 click 事件，但是在uc下没有任何效果，请问怎么解决？？？

我可能没有把问题描写清楚，在uc下input-file的表现为

uc下input-file

把input-file隐藏后，在其他浏览器下如：chrome firefox，给input-file添加click事件，可以弹出选择文件的文本框，但是在 uc浏览器 下没有任何反应

html5 JavaScript

12 years, 4 months ago

邪恶D小狼

邪恶D小狼 12 years, 4 months ago

有两个地方需要注意：
1）用display:none;是没办法触发事件的，如果对dom树和render树的构建有了解的话，就明白这个原理。
2）dom代理需要触发的是input-file的click行为，但是input-file需要绑定change事件。

  <input type="file" id="_1" style="opacity:0;" />
  

  <div id="_2">

  var $ = function(id){ return document.getElementById(id); };
  

  $("_1").onchange = function(){
  

  //....这里面处理逻辑
  

  }
  

  $("_2").onclick = function(){
  

  $("_1").click();
  

  }

中午特意抽了点时间在UC上试了试，确实如你所说，UC把它封装成了三个按钮，分别对应不同的状态，但是UC也对js程序触发而不是用户触发的行为也有处理：

豌豆荚截图

  <button id="btn">拍照</button><input id="fl" style="opacity:0;" type="file" />

  $("#btn").addEventListener("click", function(e){
  

  this.nextSibling.click();
  

  }, false);
  

  $("#fl").addEventListener("change", function(){
  

  var fr = new FileReader();
  

  fr.onload = function(){
  

  console.log("loaded base64 data:", this.result);
  

  //Todo...
  

  

  }
  

  fr.readAsDataURL(this.files[0]);
  

  }, false);

answered 12 years, 4 months ago

前方高能量反应

前方高能量反应 answered 12 years, 4 months ago