手机端Html页面实现上传头像功能，之前一直百度js的代码，其实用不着，input标签，type=file就可以了，效果如图，点击头像上传更换头像，当然直接用input样式比较麻烦，(反正我觉得麻烦，对css不是很精通),然后我就通过点击div来触发input按钮
HMTL代码：
<div class="hui-list-text"><div class="hui-list-text-content">头像</div><div class="hui-list-info set-up-img" onclick="selectFile()" id="head"><img src="<%=model.avatar %>" id="headImg" /><span class="hui-icons hui-icons-right"></span></div><input class="upload-img" type="file" name="cover" accept="image/*" style="filter: alpha(opacity=0); opacity: 0; width: 0; height: 0;" onchange="uploadImg(this)" id="android" /></div>
input被隐藏了，注意不用display:none,或者hidden,会没有效果，通过点击div触发input按钮
js:
//触发Input按钮function selectFile() {$("#android").trigger("click");}//选择文件事件function uploadImg(e) {var files = e.files;console.log(files[0]);if (files.length == 0) {return;}var form = new FormData();// 可以增加表单数据form.append("Filedata", files[0]); // 文件对象var file = files[0];$.ajax({url: ' ',//后台上图接口type: "POST",data: form,dataType: 'json',processData: false, //tell jQuery not to process the datacontentType: false, //tell jQuery not to set contentTypesuccess: function (res) {if (res.status == 1) {$("#headImg").prop("src", res.path);} else { }}});}
在手机测试时，有些浏览器会自动让你选择拍照或者图片，就是这样子，后台接口的代码就不发了
