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

最新推荐文章于 2021-07-18 22:32:17 发布

heganlin

最新推荐文章于 2021-07-18 22:32:17 发布

阅读量1.4k

点赞数

分类专栏： javaSrcipt

本文链接：https://blog.csdn.net/heganlin/article/details/52597945

版权

javaSrcipt 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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

如下图：

原本是点击头像，可以上传头像，头像下面是个 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>
       
          <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标签就能拿到浏览的图片了。