1. 程式人生 > >上傳圖片直接顯示圖片操作

上傳圖片直接顯示圖片操作

直接看程式碼:本文顯示圖片一部分是程式碼是引用的一位大佬的具體的連結給忘記了抱歉

<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;
		}
		
	}

這樣就可以直接顯示並且通過伺服器進行上傳了》》》》