上传图片直接显示图片操作

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_37256896/article/details/85223777

直接看代码：本文显示图片一部分是代码是引用的一位大佬的具体的链接给忘记了抱歉

<tr><td>详细地址:</td><td colspan="3" ><textarea style="width:80%" name="address" required="true"></textarea></td></tr>
           	    <tr>
           	    	<th rowspan="5" width="90">照片</th>
					<td rowspan="5">
					<div id="preview">			           
				    <img id="myImg"src="../images/up.png"
						style="width: 102px;height: 102px;" onclick="$('#previewImg').click();"/>
					</div>
				 <input type="file" onchange="previewImage(this)" style="display: none;" id="previewImg" name="file">
					</td>
				</tr>
           </table>
       </form>
	</div>
	<script>
	function previewImage(file) {
		var MAXWIDTH = 90;
		var MAXHEIGHT = 90;
		var div = document.getElementById('preview');
		if (file.files && file.files[0]) {
			div.innerHTML = '<img id=myImg onclick=$("#previewImg").click()>';
			var img = document.getElementById('myImg');
			img.onload = function() {
				var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
				img.width = rect.width;
				img.height = rect.height;
				// img.style.marginLeft = rect.left+'px';
				img.style.marginTop = rect.top + 'px';
			}
			var reader = new FileReader();
			reader.onload = function(evt) {
				img.src = evt.target.result;
			}
			reader.readAsDataURL(file.files[0]);
		} else {//兼容IE
			var sFilter = 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
			file.select();
			var src = document.selection.createRange().text;
			div.innerHTML = '<img id=myImg>';
			var img = document.getElementById('myImg');
			img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
			var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
			status = ('rect:' + rect.top + ',' + rect.left + ',' + rect.width + ',' + rect.height);
			div.innerHTML = "<div id=divhead style='width:" + rect.width + "px;height:" + rect.height + "px;margin-top:" + rect.top + "px;" + sFilter + src + "\"'></div>";
		}
	}
	
	function clacImgZoomParam(maxWidth, maxHeight, width, height) {
		var param = {
			top: 0,
			left: 0,
			width: width,
			height: height
		};
		if (width > maxWidth || height > maxHeight) {
			rateWidth = width / maxWidth;
			rateHeight = height / maxHeight;
 
			if (rateWidth > rateHeight) {
				param.width = maxWidth;
				param.height = Math.round(height / rateWidth);
			} else {
				param.width = Math.round(width / rateHeight);
				param.height = maxHeight;
			}
		}
		param.left = Math.round((maxWidth - param.width) / 2);
		param.top = Math.round((maxHeight - param.height) / 2);
		return param;
	}
	</script>

后台使用springMVC接受：

/**
	 * 修改用户信息
	 * @param user
	 * @param file
	 * @param req
	 * @param response
	 * @return
	 */
	@RequestMapping("/updateUser")
	@ResponseBody
	public Map<String, Object> UpdateUser(User user,@RequestParam(value="file") MultipartFile file,HttpServletRequest req,
			HttpServletResponse response){
		Map<String, Object> map=new HashMap<>();
		if (user.getUsername()!=null &&user.getPassword()!=null){
			if (file.isEmpty()){
				map.put("code", "1");
				map.put("msg", "文件为空");
				map.put("data", null);
				return map;
			}else {
				return userService.updateUser(user,file,response,req);
 			}
			
		}else {
			map.put("code", "1");
			map.put("msg", "信息不全");
			map.put("data", null);
			return map;
		}	
	}

/**
	 * 添加用户
	 * @param user
	 * @param file
	 * @param request
	 * @param response
	 * @return
	 */
	@RequestMapping("/addUser")
	@ResponseBody
	public Map<String, Object> add(User user, @RequestParam(name="file") MultipartFile file,HttpServletRequest request
			,HttpServletResponse response){
		System.out.println(file);
		Map<String, Object> map=new HashMap<>();
		if (user.getUsername()!=null &&user.getPassword()!=null) {
			if (file.isEmpty()){
				map.put("code", "1");
				map.put("msg", "文件为空");
				map.put("data", null);
				return map;
			}else {
				//获取文件的原名
				String fileName=file.getOriginalFilename();
				System.out.println(fileName);
				//转换后的文件名
				String fileNewName=UUID.randomUUID().toString()+fileName;
				String path="D:/hotel/upload/user/img/";
				File dest=new File(path+fileNewName);
				System.out.println(dest.exists());
				if (!dest.getParentFile().exists()) {
					dest.getParentFile().mkdirs();
					try {
						dest.createNewFile();
					} catch (IOException e) {
						// TODO Auto-generated catch block
						e.printStackTrace();
					}
				}
				try {
					file.transferTo(dest);
					String filepath=path+fileNewName;
					user.setHeadshot(filepath);
					System.out.println("filepath:"+path+fileNewName);
				} catch (IOException e) {
					// TODO Auto-generated catch block
					e.printStackTrace();
				}
 			}
			return userService.addUser(user);
		}else {
			map.put("code", "1");
			map.put("msg", "信息不全");
			map.put("data", null);
			return map;
		}
		
	}

这样就可以直接显示并且通过服务器进行上传了》》》》