微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > js教程 > 正文

File文件控件，选中文件(图片,flash,视频)即立即预览显示_表单特效

php中文网
发布： 2016-05-16 18:54:20
原创
1436人浏览过

我们平常用file文件控件上传文件，要预览有时会刷新页面，结果file控件被清空，好多人问能能让他不清空或重新赋值，因为处于安全性的考虑，这是不可能的。那怎么进行无刷新预览呢？这里我把我所使用的方法写一下。
选择页面： 

即构数智人
即构数智人

即构数智人是由即构科技推出的AI虚拟数字人视频创作平台，支持数字人形象定制、短视频创作、数字人直播等。

即构数智人 36
查看详情 即构数智人
复制代码 代码如下:



HTML代码：
复制代码 代码如下:







runat="server" onchange="checkData()">

注：这里可以是图片（jpg或gif格式）,flash动画（swf）及视频文件（wmv,mpeg,asf,avi）。大小限定在1M以内。

当前页预览


弹出预览页面：
复制代码 代码如下:



显示：
复制代码 代码如下:


大家都在看：

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：由document.body和document.documentElement想到的_javascript技巧 下一篇：js select 控制实现代码_表单特效
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
JS函数怎样定义函数条件分支_JS函数条件分支定义与逻辑控制实现方法 答案是：JavaScript中通过if...else、switch、三元运算符和逻辑操作符实现函数条件分支。if...else用于布尔判断，switch适用于多值匹配，三元运算符简化二选一逻辑，逻辑操作符&&、||用于组合条件或设置默认值，合理选择可提升代码灵活性与可读性。
2025-11-11 16:01:02
117
Tiptap 编辑器精确空内容判断：忽略空白符与换行符 本文详细阐述了在Tiptap编辑器中如何准确判断内容是否“字面意义上”为空，即在仅包含空白符和换行符时也视作空。通过分析editor.state.doc.textContent的局限性，并引入JavaScript的trim()方法进行优化，提供了一个可靠的isEmpty函数实现，确保在表单验证或条件渲染场景下获得精确的编辑器状态。
2025-11-11 15:48:42
488
JavaScript归并排序实现：常见陷阱与优化指南 本文深入探讨了JavaScript归并排序（MergeSort）实现中常见的几个关键错误，包括归并操作中临时数组回写时的索引错位、边界参数right的语义不一致以及次优的中间点计算方式。通过详细分析问题并提供优化后的代码示例，旨在帮助开发者构建健壮、高效且符合JavaScript编程习惯的归并排序算法。
2025-11-11 15:48:10
320
javascript脚本怎么编写_javascript脚本编写入门与基础语法详解 JavaScript可通过内联、内部或外部脚本嵌入HTML，使用let/const声明变量，支持多种数据类型与运算符，通过DOM操作实现动态交互，结合事件监听和调试工具可有效提升开发效率。
2025-11-11 15:43:02
791
JavaScript键盘事件控制音频播放教程：聚焦与全局监听策略 本教程旨在解决JavaScript中键盘事件控制音频播放失效的问题。我们将深入探讨元素焦点对键盘事件的影响，并提供两种有效的解决方案：一是利用可聚焦的HTML元素（如按钮）配合其内置的键盘交互逻辑，二是实现全局键盘事件监听，并附带防止在输入框中误触的优化措施，以确保流畅的用户体验和良好的可访问性。
2025-11-11 15:40:01
724
JavaScript防抖与节流函数原理与实现_javascript优化 防抖和节流是前端优化高频事件的两种技术。防抖通过延迟执行，仅在事件停止触发后执行一次，适用于搜索框输入等场景；节流则保证单位时间内最多执行一次，适合滚动监听等持续触发场景。两者核心都是控制函数执行频率，提升性能。
2025-11-11 15:35:35
847
TinyMCE富文本编辑器：如何避免插入内容时产生不必要的元素嵌套 本文旨在解决TinyMCE富文本编辑器在使用mceInsertContent命令插入HTML内容时，尤其是重复插入相同类型元素（如合并字段标签）时，可能导致元素意外嵌套的问题。我们将探讨导致嵌套的原因，并提供一种结构化数据并迭代插入的解决方案，以确保插入的元素始终保持独立并作为兄弟元素存在，从而维护DOM的整洁性和可预测性。
2025-11-11 15:30:12
569
如何在 React Native 中动态提升 TextInput 避开键盘遮挡 本教程详细介绍了在ReactNative应用中，当软键盘弹出时，如何确保TextInput组件不被遮挡。通过监听键盘事件获取其高度，并结合条件样式动态调整输入字段容器的位置，提供了一种灵活且有效的解决方案，尤其适用于KeyboardAvoidingView难以适配的复杂布局。
2025-11-11 15:28:01
701
JS插件怎样支持多语言切换_JavaScript国际化插件开发与使用方法 答案：本文介绍如何开发一个轻量级JS多语言插件，支持国际化。1.设计I18n类管理语言资源、切换语言和文本替换2.使用JSON存储多语言数据，支持动态加载与缺失键回退3.自动识别data-i18n属性更新DOM文本4.提供简洁API用于初始化和语言切换，便于集成。
2025-11-11 15:19:02
585
深入理解 input type="time"：如何精确设置默认时间 本教程旨在解决HTMLinputtype="time"元素设置默认时间值的常见问题。核心在于value属性需要严格遵循HH:MM或HH:MM:SS的24小时制格式。文章将通过对比常见错误（如直接使用toLocaleTimeString()）与正确方法，详细阐述如何利用Date对象的toTimeString()方法并进行适当处理，从而确保时间输入框能够正确显示预设的默认时间，并提供示例代码及注意事项。
2025-11-11 15:14:01
894
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部