input 选择图片文件后显示图片文件

一个效果还比较漂亮，就贴上来保存下了，实现起来比较简单，share 一下了

效果截图：

dojo Version:1.91

关键代码：

require(["dojo/_base/connect","dojo/on","dojo/dom-construct","dojo/domReady!"],function(connect,on,construct){
//alert(0)
//dojo.style(dojo.query("#view .mblScrollableViewContainer"),{position:relative});
var fileNode = dojo.query("#file")[0]
dojo.connect(fileNode,"onchange",function(evt){  //connect上添加onchange事件不起作用，修改为dojo.connect
    var file = evt.target.files[0];
var path = fileNode.value;
var regex = /image\/.*/i;
if(file.type.match(regex)) { 
var reader = new FileReader();  
      reader.readAsDataURL(file);
       
       reader.onload = function(oFREvent){
       var imagePane = dojo.query("#image-pane")[0]
       if(dojo.query("img",imagePane).length > 0){
        construct.empty(imagePane);
       }
      dojo.create("img",{src:reader.result,style:{width:"193px",height:"240px"}},imagePane,"first");
       }
}
})
})

html: 为了避免原生的input file难看，使用了css效果进行遮盖

<div style="box-shadow:2px 2px 10px #cccccc;height:250px;width:280px">
<span style="width:70px;height:34px;float:left;background: -webkit-linear-gradient( top,#ccc,#ddd);">
<span style="width:70px;height:34px;position:absolute;text-align: center;padding-top: 10px;box-sizing: border-box;">Upload</span>
<input type="file" id="file" style="width:70px;height:34px;position:absolute;opacity: 0;" accept="image/*"/>
</span>
<span style="float:right"></span>
<span style="clear:both;margin-left:5px" id="image-pane"></span>
</div>