单张图片的上传显示

1、需要导入按钮的样式

    

<link rel="stylesheet" href="${base}/resources/css/my-upload.css">

2、需要上传图片的位置

<div class="col-sm-6">
                       			 	<label class="col-sm-3 control-label">品牌缩略图(200*200)</label>
	                                <div class="col-sm-9">
	                                <div class="form-control"  id="thumbnailpicShow" style="display: none; width: 200px; height: 200px; padding: 0">
	                                <img  alt="" src="" style="width: 100%; height: 100%;">
	                                </div>
	                                <div class="upload">
	                                  <label id="uploadCut">上传<input type="file" id="fileCut"></label>
	                                </div>
										<input type="hidden" id="thumbnailPic"  name="thumbnailPic" class="form-control"/>
	                                </div>
                       			</div>

3、ajax

//书写缩略图的ajax
         $("#uploadCut").on('change',function(){
        	 var formData = new FormData();
         	var fileObj = document.getElementById("fileCut");
         	formData.append("file",fileObj.files[0]);
         	formData.append("fileType","image");
         	$.ajax({
        		url:'${base}/api/common/upload.jhtml',
        		type:'POST',
        		data:formData,
        		async:false,
        		processData:false,
    			contentType:false,
    			success:function(data){
    				console.log("没转换的数据"+data);
    				data = JSON.parse(data);
    				console.log("转换的数据"+data);
    				$("#thumbnailpicShow").show();
    				$("#thumbnailpicShow img").attr("src",'${base}'+data.object);
    				$("#thumbnailPic").val('${base}'+data.object);
    				$('#uploadCut').html("修改<input type='file' id='fileCut'/>")
    			}
        		
        	});
        	
         });