使用ajax图片上传页面开发并回显

最新推荐文章于 2024-09-19 13:22:45 发布

爱笑的人、

最新推荐文章于 2024-09-19 13:22:45 发布

阅读量680

点赞数

文章标签： ajax javascript 前端

本文链接：https://blog.csdn.net/qq_44760653/article/details/122666296

版权

1，需引入ajaxfileupload.js

2，HTML代码

<tr>
	<td class="three">图片介绍</td>
    <td> <br><div id="imgDiv" style="display:block; width: 40px; height: 50px;"></div><br><br><br><br>
    <input type="file" id="pimage" name="pimage" onchange="fileChange()" >
    <span id="imgName" ></span><br>
    </td>
	</tr>

3，js代码

<script type="text/javascript">
        function fileChange(){//注意：此处不能使用jQuery中的change事件，因此仅触发一次，因此使用标签的：onchange属性
      		$.ajaxFileUpload({
				url:"${pageContext.request.contextPath}/prod/ajaxImg.action",
				secureuri: false,
				fileElementId: 'pimage',
				dataType:"json",
				success:function (obj) {
					//创建一个图片的标签
					var imgObj = $("<img>");
					imgObj.attr("src","${pageContext.request.contextPath}/image_big/"+obj.imgurl);
					imgObj.attr("width","100px");
					imgObj.attr("height","100px");
					//将图片追加到imgDiv
					$("#imgDiv").append(imgObj);
				}
			})
        }
    </script>

4，Controller代码

 //异步ajax文件上传处理
    @RequestMapping("/ajaxImg")
    @ResponseBody
    //参数名称需和name名称一样
    public Object ajaxImg(MultipartFile pimage, HttpServletRequest request){
        //提取生成文件名UUID+上传图片的后缀.jpg,.png
        saveFileName= FileNameUtil.getUUIDFileName()+FileNameUtil.getFileType(pimage.getOriginalFilename());
        //得到项目中图片存储的路径
        String path = request.getServletContext().getRealPath("/image_big");
        //转存到指定路径
        try {
            pimage.transferTo(new File(path+File.separator+saveFileName));
        } catch (IOException e) {
            e.printStackTrace();
        }

        //返回客户端JSON对象,封装图片的路径，为了在页面实现立即显现
        JSONObject object = new JSONObject();
        object.put("imgurl",saveFileName);
        return object.toString();
    }