mui实现图片更换（暂未上传）

页面中有默认的图片，触发type为file的input时，更换图片，这个是mui移动端的项目，算了，不多说，开码

首先，先在html页面中设置样式，样式我就不给了，贴个布局

<div class="re_page_title re_linecolor_3 bule">模块5</div>
　　<li class="mobile_list aa">
	<dd>URL:</dd>
	<dd><input type="text" placeholder="请输入添加的网址" id="urlIdUpload" class="urlIdUpload"/></dd>
	<dd>描述:</dd>
	<dd><input type="text" placeholder="请输入描述" id="detailUpload" class="detailUpload"/></dd>
	<dd><span class="defaultIcon">默认图标:</span>
	<form id="form1" runat="server" style="width:65%;float:left;">
	　　<button type="button" class="fileUploadBox">更多图标
	　　　　<input type='file' accept="image/* id="imgInp" class="iconFileUpload"/>
	　　</button>
	　　<div class="iconShow">
		<img id="blah" class="blah" src="./resources/images/default.png" alt="默认图片"/>
	　　</div>  
	</form>
	<button type="button" class="mui-btn mui-btn-success resetBtn" id="resetBtn">重置</button>
	</dd>
　　</li>

　<li class="mobile_list aa">
	<dd>URL:</dd>
	<dd><input type="text" placeholder="请输入添加的网址" id="urlIdUpload" class="urlIdUpload"/></dd>
	<dd>描述:</dd>
	<dd><input type="text" placeholder="请输入描述" id="detailUpload" class="detailUpload"/></dd>
	<dd><span class="defaultIcon">默认图标:</span>
	<form id="form1" runat="server" style="width:65%;float:left;">
	　　<button type="button" class="fileUploadBox">更多图标
	　　　　<input type='file' accept="image/* id="imgInp" class="iconFileUpload"/>
	　　</button>
	　　<div class="iconShow">
		<img id="blah" class="blah" src="./resources/images/default.png" alt="默认图片"/>
	　　</div>  
	</form>
	<button type="button" class="mui-btn mui-btn-success resetBtn" id="resetBtn">重置</button>
	</dd>
　　</li>

　　

单个更换图片：

function readURL(input) {
　　if (input.files && input.files[0]) {

	       var reader = new FileReader();

	       reader.onload = function (e) {

	           $('.blah').attr('src', e.target.result);

	       };

	       reader.readAsDataURL(input.files[0]);
　　}

}
$(".iconFileUpload").change(function(){　　//调用

　　readURL(this);

});

　　

多个图片循环遍历更换：

var fileNum = $('.iconFileUpload');	//获取上传图片按钮
	mui.each($('.iconFileUpload'),function(index,item){	//遍历
	var newItem = item;	//item是获取的input元素，index是下标
	$('.iconFileUpload').change(function(){	//当上传触发，改变的时候
  		var el = newItem;	//将元素赋值给el
  		 var imgNum = $(this).parent().siblings('.iconShow').children('img');	//获取到当前上传input之后需要显示图片的img框架
		if (el.files && el.files[0]) {	//获取到这个文件或图片的信息或对象
			var reader = new FileReader();	//新建一个文件对象
			 reader.onload = function (e) {
			$.each(imgNum,function(){	//循环遍历多个图片框架
			　　$(this).attr('src', e.target.result);	//给当前的图片更换地址
				});
			    };
			    reader.readAsDataURL(el.files[0]);
		　　}
  		});
	}); 

　　

最终我的结果:

 

亲测有效，可以利用单个的先尝试，若是多个的需要遍历的可用下面的，但代码根据布局的变化会变化，不确定都有效，单个的有效，可自己再次修改即可。

这个暂时没有用到‘相机’。‘从相册中选取’等等的js代码，但是这个在手机上也是可以直接用的，file的input在手机上可识别。

看了网上好多的方法，最终暂时用了这个，等过几天和后台接洽的时候再看看有没有毛病！

实践才能真知！！！