jq html 页面点击图片直接上传

<form id="ff" method="post" enctype="multipart/form-data" style="padding-top: 23px;">
  <input style="display: none" name="custId" id="custId"/>
  <font style="margin: 25px 0 0 10px;color: #5c5c5c;">头像</font>
  <img src="${contextPath}/static/images/btn_next.png" style="float: right;padding-right: 15px;height: 20px;"></img>
  <div style="height: 50px;float: right;margin-top: -13px;">
    <div onclick="changeImg()">
      <img src="" style="height:50px;float: left;margin-right:25px;" id="facePath" name="facePath" >
    </div>
    <input id="img_path" style="display: none" name="userLogo" type="file" accept="image/*" />
  </div>
  <div style="display: none;" onclick="addPath()" id="dd">确定</div>
</form>

//上传图片
/* function changeImg(){
  $("#img_path").trigger('click');
}
$("#img_path").change(function(){
  var file = this.files[0] ? this.files[0] : null;
  if (!file) { return false; }
  var file_reader = new FileReader();
  file_reader.onload = (function(){
    var image_url = this.result; // 这是图片的路径
    $('#facePath').attr('src', '');
    $('#facePath').attr('src', image_url); // 创建图片标签
  });
  file_reader.readAsDataURL(file);

  $("#dd").trigger('click');

});
function addPath(){
  var userLogo = $("#img_path").val();//图片地址
  var custId = $("#custId").val();
  if(userLogo != null && custId != null){
    $.ajax({
      cache: true,
      type: "POST",
      url: "${contextPath}/my/page/changeinfo_userface",
      data: $("#ff").serialize(),
      async: false,
      success: function(data){
        if(data != null){
        var jsonData = eval("("+data+")");
        var message = jsonData.message;
        var status = jsonData.status;
        if(status == "OK"){
          wxAlert(message);
        }else{
          wxAlert(message);
          return;
        }

       }
      }

    });
  }
} */

原文地址:https://www.cnblogs.com/sho560/p/5630265.html