html

<input change=”uploadUsedImg()”  id=”uploadUsedImg” type=”file”>

js

function uploadUsedImg(){
   var $c = document.querySelector(“#uploadUsedImg”);//上传出发按钮
   var $d = document.querySelector(“#usedImg”);//图片容器
  

  var file = dome.files[0];//获取file对象单张
  var reader = new FileReader();//创建filereader对象
  reader.readAsDataURL(file);//转换数据
  reader.onload = function(e){//加载ok时触发的事件
  imgurl.src = e.target.result
  var fd = new FormData();
  var blob = dataURItoBlob(e.target.result);
  fd.append(‘file’, blob);

  var uploadurl = “/user/accountservice/uploadimg”;
 $.ajax({
     type: ‘POST’,
     url: uploadurl,
     data: fd,
     processData: false, // 不会将 data 参数序列化字符串
    contentType: false, // 根据表单 input 提交的数据使用其默认的 contentType
    success:function(res){
    var dataurl = {};
   //转成json
  dataurl = JSON.parse(res);

 //取出路径
  var bolb = dataurl.url;
   mgurl.setAttribute(‘data-url’,bolb);//替换

 },
   xhr: function() {
   var xhr = new window.XMLHttpRequest();
   xhr.upload.addEventListener(“progress”, function(evt) {
   if (evt.lengthComputable) {
  var percentComplete = evt.loaded / evt.total;
}

}, false);
   return xhr;
}
}).success(function (res) {
   // 拿到提交的结果
  console.log(res);
 }).error(function (err) {
   console.error(err);
});
};

 };

 

版权声明:本文为anxiang原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/anxiang/p/10531647.html