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在手機上可識別。

看了網上好多的方法，最終暫時用了這個，等過幾天和后台接洽的時候再看看有沒有毛病！

實踐才能真知！！！