如何在上传图片的时候，选中图片可以在前端预览

其实，这个功能实现起来不难，其实jQuery已经开发了相应的功能函数，我们直接调用就可以了。

• 下面先来看看后端代码

 //处理文件上传
    @RequestMapping(value="/shoppinguploadimg", method = RequestMethod.POST)
    public String uploadImg(@RequestParam("file") MultipartFile file,
                            HttpServletRequest request, String content, String title, String money,Integer shopping_type,Model model) {
        if (content.equals("")||title.equals("")||model.equals("")||file==null){
            model.addAttribute("message","请正确填写，每一项都不能为空");
            return "addshopping";
        }
        String contentType = file.getContentType();
        String fileName = file.getOriginalFilename();
        String filePath = request.getSession().getServletContext().getRealPath("imgupload/");
        System.out.println(filePath+fileName);
        try {
            MyFileUtil.uploadFile(file.getBytes(), filePath, fileName);
        } catch (Exception e) {
            System.out.println("上传文件异常");
        }
        Shopping shopping_bean = new Shopping();
        shopping_bean.setContent(content);
        shopping_bean.setMoney(money);
        shopping_bean.setTitle(title);
        shopping_bean.setPhoto("http://localhost:8080/Second/imgupload/"+fileName);
        shopping_bean.setShopping_type(shopping_type);
        HttpSession session = request.getSession();
        User user_bean = (User) session.getAttribute("user");
        shopping_bean.setC_id(user_bean.getId());
        shoppingDao.addShopping(shopping_bean);
        model.addAttribute("message","你的"+fileName+"发布成功，请在我的发布里查看！");
        //返回json
        return "addshopping";
    }

• 前端页面的提交表单。

先引入jQuery

<script src="../js/jquery.min.js" type="text/javascript"></script>

<form enctype="multipart/form-data" method="post" action="shoppinguploadimg">
						<div class="refund-main">
							<div class="item-comment">

								<div class="am-form-group">
									<label  class="am-form-label">商品名称<span></span></label>
									<div class="am-form-content">
										<input type="text" name="title">
									</div>
								</div>

								<div class="am-form-group">
									<label class="am-form-label">商品价格<span></span></label>
									<div class="am-form-content">
										<input type="text" name="money">
									</div>
								</div>
								<div class="am-form-group">
									<label class="am-form-label">商品介绍<span></span></label>
									<div class="am-form-content">
										<textarea placeholder="" name="content"></textarea>
									</div>
								</div>
								<%--商品分类选择--%>
								<div class="am-form-group">
									<label class="am-form-label">类别</label>
									<div class="am-form-content">
										<select id="shopping_type" name="shopping_type" class="valid" >
											<c:forEach items="${requestScope.shopingclass_list}" var="line" varStatus="stat">
												<option value="${line.id}" <c:if test="${shopping_type == line.id }">selected</c:if>>${line.shoppingclass_name}</option>
											</c:forEach>
										</select>
									</div>
								</div>

							</div>
							<div class="refund-tip">
								<div class="filePic">
									<input type="file" class="inputPic" id="inputPic" value="选择图片" name="file" max="5" maxsize="5120" allowexts="gif,jpeg,jpg,png,bmp" accept="image/*">
									<img src="images/image.jpg" alt="" name="photo">
								</div>
								<div class="filePic" style="margin-top:-100px;margin-left: 200px;">
									<img id="preview" src="" alt="">
								</div>
								<span class="desc">上传商品图片</span>
							</div>
							<div class="info-btn">
								<button type="submit" class="am-btn am-btn-danger">提交申请</button>
							</div>
							<div><font style="color: red">${message}</font></div>
						</div>
				</form>

在来看JQuery提供的函数

<script>
			$(function(){
				$("#inputPic").change(function(){
					$filePath=URL.createObjectURL(this.files[0]);
					$("#preview").attr('src',$filePath);
				})
			})
		</script>

这就可以了，当你选择好图片好，就会触发change()函数，然后就会在id为preview的img标签中添加图片路径，前端就可以预览图片了。

看看效果截图.



以上就是全部步骤了。