有滚动条，展示图的图片上传代码

<!-- start -->
		<div>
			<div class="form-group row" style="text-align: center;">
				<div class="col-md-8">
					<img id="pic" src="" class="img-rounded" style="max-height: 150px;">
				</div>
			</div>

			<div class="form-group " style="text-align: left; margin-top: 15px; margin-left: 14px">
				<div class="col-md-7">
					<input type="file" name="file" id="upload-file">
					<div class="progress">
						<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
					</div>
				</div>
				<div class="col-md-4">
					<button type="button" class="btn btn-primary" onclick="uploadFile();" style="line-height: 2;">开始上传</button>
				</div>
			</div>
		</div>
		<!-- end -->

//图片上传  
function uploadFile(){      
    var xhr ;    
    var fileObj = document.getElementById("upload-file").files[0]; // 获取文件对象      
    var FileController = "../article/uploadPic"; // 接收上传文件的后台地址      
    if(fileObj){      
          var fileName=fileObj.name;    
          var extStart=fileName.lastIndexOf(".");    
          var ext=fileName.substring(extStart,fileName.length).toUpperCase();    
          if(ext!=".BMP"&&ext!=".PNG"&&ext!=".GIF"&&ext!=".JPG"&&ext!=".JPEG"){    
              layer.alert("图片限于png,gif,jpeg,jpg格式", {  
                    skin: 'layui-layer-molv' //样式类名  
                        ,closeBtn:0  
                });  
              return;  
          }    
             var formDate = new FormData();       
             formDate.append("myFile", fileObj);// 文件对象         
             xhr = new XMLHttpRequest();          
             xhr.open("post", FileController, true);          
             xhr.onload = function () {       
                 var d = eval("(" +xhr.responseText+ ")"); //把数据转成json      
                 $("#pic").attr("src","../"+d.path);  
                 //存储到进度条（data-picUrl）自定的属性里    
                 $("#pic").attr("data-url",d.path);  
             };       
             xhr.onerror =  function(){    
                 console.log("上传失败")    
             }; //请求失败    
             xhr.upload.onprogress = function(evt){    
                 if (evt.lengthComputable) {//    
                      var progress = Math.round(evt.loaded / evt.total * 100) + "%";    
                      $(".progress-bar").css("width",progress);    
                 }       
             };    
             xhr.upload.onloadstart = function(){//上传开始执行方法    
                 $("#fileName").text(fileObj.name);    
             };    
             xhr.send(formDate);      
    }else{      
        layer.alert("请选择图片", {  
            skin: 'layui-layer-molv' //样式类名  
                ,closeBtn:0  
        });  
    }      
}