如何在Razor页面实现本地图片选择后无提交实时预览？

你只需要添加一段JavaScript代码，利用浏览器的FileReader API就能实现图片即时预览，以下是完整的修改方案：

完整代码 #

<tr>
    <td>
        <input type="file" name="updoc" id="upoc" class="form-control" accept="image/*" />
    </td>
    <td>
        <img id="Userpic" class="pull-right" style="margin-bottom: 7px" width="180" height="100" src="@ViewBag.pic" alt="预览图片" />
    </td>
</tr>

<script>
const fileInput = document.getElementById('upoc');
const previewImg = document.getElementById('Userpic');

fileInput.addEventListener('change', function(e) {
    const selectedFile = e.target.files[0];
    // 只处理图片文件
    if (selectedFile && selectedFile.type.includes('image/')) {
        const reader = new FileReader();
        reader.onload = function(event) {
            // 将读取到的DataURL赋值给图片src
            previewImg.src = event.target.result;
        };
        // 把文件转为可直接作为图片src的DataURL
        reader.readAsDataURL(selectedFile);
    }
});
</script>

关键说明 #

• 给input加上accept="image/*"，可以让文件选择框默认只显示图片类型，避免用户选错文件。
• 监听input的change事件，用户选完文件就触发预览逻辑。
• FileReader是浏览器原生API，能在前端读取本地文件内容，这里把图片转成DataURL格式，直接赋值给img的src就能显示预览图。
• 增加文件类型判断，确保只有图片才会执行预览，避免无效操作。

内容的提问来源于stack exchange，提问作者inno