jquery图片上传

html

<div id="bcd"></div>
<input type="file" id="abc">

css

img {
	width:100px;
	height:100px;
}

js

   $(function() {
        $("#abc").change(function(e) {
            var imgBox = e.target;
            uploadImg($('#bcd'), imgBox)； 
            //多文件同时上传
          //for(let i = 0; i< $('#abc')[0].files.length; i++) {
           //   uploadImg($('#bcd'), imgBox, i);
           //}


        });

       //function uploadImg(element, tag ,  [i(多文件上传）]) { 
          function uploadImg(element, tag ){
         // if($('#bcd').has('img').length === 0) {    //判断是否有img标签  

            var file = tag.files[0]; // file文件  多文件上传 var file = tag.files[i];
            var imgSrc;
            if (!/image\/\w+/.test(file.type)) {
                alert("看清楚，这个需要图片！");
                return false;
            }
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function() {
                console.log(this.result);
                imgSrc = this.result;  
                var imgs = document.createElement("img"); //创建img标签
                $(imgs).attr("src", imgSrc);//将img的src属性的值赋值
                $(imgs).css({'width': '100px','height': '100px',});//设置img的大小
                element.append(imgs);
                let facesave;
               ///  facesave.push( $('#abc')[0].files[i];  //加入face，将每次添加的文件加入；
            };
        }

  // } else {
     //     var file = tag.files[0]; // file文件
     //      var imgSrc;
     //     if (!/image\/\w+/.test(file.type)) {
     //         alert("看清楚，这个需要图片！");
    //          return false;
    //      }
    //      var reader = new FileReader();
    //      reader.readAsDataURL(file);
   //       reader.onload = function() {
   //           console.log(this.result);
  //            imgSrc = this.result;  
   //           $(imgs).attr("src", imgSrc);//将img的src属性的值赋值
  //          $(imgs).css({'width': '100px','height': '100px',});//设置img的大小
   ////   }
    //}

    }
//}

结果展示

上传到后端的数据 formdata

多文件上传

let file = new FormData();
for (let i = 0; i <  facesave.lenght; i ++ ){
    file.append('faceImage', facesave[i]);
}
$.ajax({
  url:url,
  data: file,
  type: 'POST',
  async: true,
  processData: false;  //文件传输 必须为设置
  contentType: false;  //文件传输 必须为设置
  }).done(function(dataa0{
    if（ data.code === 'success' ）{
      console.log('data');
    }
});

如果里面有其他内容 name ，id， file

let file = new FormData();
let array = this.$formObj.serializeArray();  //将所有的数据遍历为序列化的数组
for( let i = 0; i < array.length; i++ ){
  file.append(array[i].name, array[i].value);  // 变为json对象格式
}

file.append('fcacdefile',  $('#abc')[0].files[0]);

$.ajax({
······
});