直接看代碼：本文顯示圖片一部分是代碼是引用的一位大佬的具體的鏈接給忘記了抱歉

<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 {//兼容IEvar 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")@ResponseBodypublic 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")@ResponseBodypublic 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 blocke.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 blocke.printStackTrace();}}return userService.addUser(user);}else {map.put("code", "1");map.put("msg", "信息不全");map.put("data", null);return map;}}

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

總結

以上是生活随笔為你收集整理的上传图片直接显示图片操作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。