因需求增加，需要點擊如下文字上傳頭像
如下圖：
原本是點擊頭像，可以上傳頭像，頭像下面是個 fiel類型的 input 標籤， 點擊可以選取圖片上傳，
需求增加，要點擊藍色文字那裏，也要可以實現頭像上傳。
頭像上傳的 HTML代碼：
<div class="upload-picture">
<p>
<span><img src="${ctx }/resources/img/min/people1.jpg" id="uers_portrait" ></span>
<i></i>
<b><img src="${ctx }/resources/img/min/upload-certifi.png" >
<input type="file" size="30" id="portrait_upload_file" οnchange="portrait_upload();" name="portrait_upload_file"
accept="text/xml,text/xml-external-parsed-entity,application/vnd.ms-excel,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
</b>
</p>
<em>修改頭像<input type="file" size="30"></em>
<div class="input-tips margin-l12 hide-wanring" id="result-Prompt" style="display:none;"></div>
<p class="v-tips">支持JPG、JPEG、PNG、GIF
格式，最佳比例124*124px，
圖片大小不超過500k</p>
</div>
js 代碼 ：
/**
* 頭像上傳
*/
function portrait_upload() {
var file = $("#portrait_upload_file").val();
if (checkNull(file)) {
showWarning("請選擇上傳的文件!");
return false;
}
if (!checkMaxSize("portrait_upload_file", 200*1024)) {
return false;
}
var filepath = file.substring(file.lastIndexOf('.') + 1, file.length).toLocaleLowerCase();
if (filepath != 'png' && filepath != 'jpg' && filepath != 'jpeg') {
showWarning("只能上傳png、jpg或jpeg格式的文件！");
return false;
}
$.ajaxFileUpload({
type : 'POST',
url : WEB_URL + "/views/system/user/uploadPortrait", // ajax請求url
secureuri : false,
dataType: 'text', //返回值類型 一般設置爲json
fileElementId : 'portrait_upload_file', // 文件選擇框的id屬性
complete : function(data, status) { // 相當於java中try語句塊的用法
try {
var data = data.responseText;
if (data.indexOf(">") != -1){
data = data.substring(data.indexOf(">") + 1, data.lastIndexOf("<"));
}
data = eval("(" + data + ")");
if (data.status != SUCCESS) {
if(data.msg && data.msg != "") {
$("#result-Prompt").html(data.msg);
$("#result-Prompt").show();
}else {
$("#result-Prompt").html("上傳失敗");
$("#result-Prompt").show();
}
}else {
readPortrait();
$("#result-Prompt").html("上傳成功");
$("#result-Prompt").show();
}
} catch(e) {
$("#result-Prompt").html("上傳失敗");
$("#result-Prompt").show();
}
}
});
}
思路：本來是想讓兩個input標籤的點擊事件都綁定到同一個方法上（portrait_upload();），上傳的都是 頭像input標籤瀏覽的圖片，後來是不行的，
後面改變了一下思路，不管點擊的是哪裏，上傳的都是頭像input標籤瀏覽的圖片， 就是說：在點擊“修改頭像” 的文字的事件上，綁定一個方法，方法裏的內容，就模擬頭像input標籤被點擊了
如下代碼：
function(){
$("#portrait_upload_file").get(0).click();
}
最後的實現，因爲一直上傳頭像都只用了一個input標籤，，另一個都沒有什麼實際用處，我把input標籤改爲了a標籤，因爲a標籤有下劃線，通過樣式把下劃線取消了（text-decoration:none;），就完美解決了
頭像上傳的 HTML代碼：
<div class="upload-picture">
<p>
<span><img src="${ctx }/resources/img/min/people1.jpg" id="uers_portrait" ></span>
<i></i>
<b><img src="${ctx }/resources/img/min/upload-certifi.png" >
<input type="file" size="30" id="portrait_upload_file" οnchange="portrait_upload();" name="portrait_upload_file"
accept="text/xml,text/xml-external-parsed-entity,application/vnd.ms-excel,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
</b>
</p>
<em><a id="portrait_file_upload_a" style="text-decoration:none;" >修改頭像</a></em>
<!-- <em>修改頭像<input type="file" size="30"></em> -->
<div class="input-tips margin-l12 hide-wanring" id="result-Prompt" style="display:none;"></div>
<p class="v-tips">支持JPG、JPEG、PNG、GIF
格式，最佳比例124*124px，
圖片大小不超過500k</p>
</div>
js 代碼 增加了如下代碼：
$(document).ready(function(){
$("#portrait_file_upload_a").click(function(){
$("#portrait_upload_file").get(0).click();
});
}
用id選取a標籤，點擊事件綁定了一個function，function的內容就是，當點擊了a標籤的時候就會通過JS動態去點擊一次頭像上傳的input標籤，然後input標籤就能拿到瀏覽的圖片了。