jquery上传头像

Html

Css

$(function() {
      $("#pic").click(function() {
          $("#upload").click(); //隐藏了input:file样式后，点击头像就可以本地上传
          $("#upload").on("change", function() {
              var objUrl = getObjectURL(this.files[0]); //获取图片的路径，该路径不是图片在本地的路径
              if (objUrl) {
                  $("#pic").attr("src", objUrl); //将图片路径存入src中，显示出图片
                  upimg();
              }
          });
      });
  });

//建立一?可存取到?file的url
  function getObjectURL(file) {
      var url = null;
      if (window.createObjectURL != undefined) { // basic
          url = window.createObjectURL(file);
      } else if (window.URL != undefined) { // mozilla(firefox)
          url = window.URL.createObjectURL(file);
      } else if (window.webkitURL != undefined) { // webkit or chrome
          url = window.webkitURL.createObjectURL(file);
      }
      return url;
  }
  //上传头像到服务器
  function upimg() {
      console.log(344)
      var pic = $('#upload')[0].files[0];
      var file = new FormData();
      file.append('image', pic);
      $.ajax({
          url: "/uploadImg",
          type: "post",
          data: file,
          cache: false,
          contentType: false,
          processData: false,
          success: function(data) {
              console.log(data);
              var res = data;
              $("#resimg").append("<img src='/" + res + "'>")
          }
      });
  }

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

jquery上传头像



代码描述：jquery upload thumb

使用ajax上传到服务器并实现预览
需要注意几点:
fd.append('name', file);
这一句中的name是后台需要接受的file的name

3

最新

发表评论全部评论

暂时没有评论！

左旋律0

2019/4/3 1:04:08

$file = request()->file('file');
回复

左旋律0

2019/4/3 1:03:06

后端接收不了回复

冻手冻脚0

2018/2/23 14:38:58

点击选择图片进行上传，时间太长了吧
回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

sky

相关代码

jquery上传头像

最新