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(多文件上传）]) {
         //// 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);
            };
        }
    // } 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的大小
   //   }
    //}
    });

结果展示

标签：jquery,img,100px,imgs,file,reader,var,上传,图片
来源： https://www.cnblogs.com/baozhengrui/p/16362118.html