.net fileupload批量上传可删除_SSM项目中关于图片上传并在页面显示的详细讲解（案例驱动，手把手教学）...

最近我们项目组在做一个影城项目，期间，我在做用户信息的修改时发现了一个有趣的问题，当我上传文件后，图片显示的上传的名称(太low了……)

然后我想，能不能把图片展示出来，提高用户的体验度

说干就干，优化一波：

先把照片显示出来

再写个按钮来绑定一下

选择图片后……

意料之内，上传图片后肯定不能正常显示，毕竟我现在是从磁盘上传的图片，而我的代码里的路径是这样的

上传图片之后肯定拿不到原有的路径，所以肯定不能正常显示

哦对，我可以直接使用js将图片的src做一个更改，或者直接持久化到数据库再来展示！

来来来，两种方式：

一：暴力型(不推荐)

图片上传后直接请求后台，此时你可以将图片持久化到数据库，然后再拿到，可是，如果用户上传后又不想换了呢，或者用户只是想选一些图片看看效果呢，我们如果这样写代码，频繁请求后台，频繁操作数据库，这也太不现实了吧

二：温柔型(推荐)

点击图片上传后，直接在前端显示出来，此时我们的图片src路径需要经过一些处理，但是我们实际的上传文件还是原来的，只有当用户点击确定提交后，我们才请求后台，这样才符合用户的体验。

呐呐呐：

看了上面的内容，大家都明白了本次图片上传的实现思路，那么接下来再看一下具体的实现代码吧

修改之前

html

我是这样写的，由于input标签在上传文件时我感觉不是太好看，然后我就用button盖住了它，然后图片单独显示，现在显示的是用户原有的头像，src路径大家应该可以看懂吧，用了监听器

"width: 200px;height: 200px" id="headUser" src="${img}/${user.uIcon }"/>

class="upload-avatar-w upload-avatar-image">"button" class="upload-avatar upload-btn" value="点击更改头像" />"file" id="fileupload" name="image" accept="image/*" onchange="uploadImg()" />




当用户点击“更改头像”时，触发了uploadImg方法

js