点击不同位置实现同一个文件上传框上传头像-白红宇

点击不同位置实现同一个文件上传框上传头像

阅读量：5265 次

发布时间：2019-06-14

本文共 3495 字，大约阅读时间需要 11 分钟。

因需求增加，需要点击如下文字上传头像

如下图：

原本是点击头像，可以上传头像，头像下面是个 fiel类型的 input 标签，点击可以选取图片上传，

需求增加，要点击蓝色文字那里，也要可以实现头像上传。

头像上传的 HTML代码：

<p>

<i></i>

<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>

<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代码：

<p>

<i></i>

<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>

<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();

});