`
jiangjingxiaoxuan
  • 浏览: 33455 次
  • 性别: Icon_minigender_2
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

如何点击图片弹出文件选择框

imguploadbutton 
阅读更多

问题定义：

       在浏览器中如何点击图片弹出文件选择框呢，就像新浪微博一样，点击图片就直接弹出选择文件框？

 

实现思路：

       我们可以将file input控件设置成完全透明，然后，加入一个自定义的浏览按钮，可以是图片。然后，我们定义这个按钮的onmousemove属性，捕获到鼠标移动到上面的时候，我们就将透明的file input控件盖在上面，这样，如果我们点击了，那将点击file input控件，就能弹出文件选择框了。由于file input是透明的，给用户的感觉就是点击了自定义图片而弹出的文件选择框。

 

实现代码：

图片地址可改成自己的地址。这只是Demo

 

<body>
<input type="file" id="browse" size="1" style="position: absolute; width: 10px; filter: alpha(opacity=0);
   opacity: 0; top: 0px;" />
<img id="imgBlog" src="upload.gif" align="absmiddle" />

<script>
   function ss() {
    var img = document.getElementById("imgBlog");
    var file = document.getElementById('browse');
    img.onmousemove = function(e) {
     var x, y;
     if (e) { x = e.clientX; y = e.clientY; }
     else { x = event.x; y = event.y; }
     window.status = x + "," + y;
     file.style.left = (x - 10) + 'px';
     file.style.top = (y - 10) + 'px';

    };
   
   };
   ss();
</script>

</body>

分享到：
| ORA-00928 missing SELECT keyword
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JS点击图片弹出文件选择框并覆盖原图功能的实现代码

    本文介绍了如何通过JavaScript...以上就是关于JS点击图片弹出文件选择框并覆盖原图功能的实现代码的相关知识点。希望这些知识点能够帮助开发者们更好地理解和应用这一技术，从而在实际工作中提升开发效率和用户体验。

    jQuery点击弹出提示框代码

    在本示例中，“jQuery点击弹出提示框代码”是一个利用jQuery实现的功能，当用户点击某个元素（例如购买按钮）时，会显示一个遮罩层，并在其中弹出一个提示框，告诉用户商品已售罄。这个功能对于电子商务网站来说非常...

    Jquery 图片弹出层框架

    **jQuery图片弹出层框架详解** 在Web开发中，经常需要实现一种效果，即当用户点击图片链接时，图片能够以弹出层的形式全屏展示，这种功能在jQuery库的支持下变得非常简单。"jQuery图片弹出层框架"就是一种实现这种...

    jQuery弹出层 可移动层 提示框 浮动层

    本文将深入探讨jQuery弹出层的实现原理，以及如何构建可移动的提示框和浮动层。 首先，我们来理解jQuery弹出层的基本概念。弹出层是指在用户进行特定操作时，页面上突然出现的一个独立显示区域，它可以是信息提示、...

    html5图片响应式布局点击弹出大图切换特效

    - 使用JavaScript或者jQuery来监听图片的点击事件，当用户点击小图时，弹出大图预览框。 - 弹窗通常由`&lt;div&gt;`元素创建，通过CSS设置其位置、大小和透明度，使其具有动画效果，增强用户体验。 4. **大图切换特效**...

    jquery带提示音点击弹出消息提示框代码

    本项目涉及的是利用jQuery实现一个具有提示音功能的点击弹出消息提示框。这个功能可以提升用户体验，特别是在需要引起用户注意或者确认操作时。 首先，我们需要了解基本的HTML结构。在提供的`index.html`文件中，...

    点击图片直接弹出选取框上传效果 网易 网盘上传

    当用户点击图片或者某个按钮时，触发`input[type="file"]`的点击事件，从而弹出文件选择对话框。接着，JavaScript可以监听`change`事件，当用户选择文件后，读取文件内容，预览图片（如果允许的话），并利用`...

    点击图片触发input是file的事件

    如果图片大小超过 5M 或格式不正确，将会弹出一个警告框，提示用户上传正确的图片。 知识点5：JQuery 的使用 在代码中，我们可以看到 JQuery 的使用。JQuery 是一个流行的 JavaScript 库，用于简化 JavaScript ...

    jQuery右下角弹出提示框代码.zip

    本资源"jQuery右下角弹出提示框代码.zip"提供了一个实现点击关闭后显示下一条消息提示框的功能，这对于用户交互和信息提示非常有用。 首先，我们来详细了解一下jQuery中的弹出提示框。在传统的JavaScript中，我们...

    jQuery点击弹出提示框代码.zip

    它通过选择器定位元素，然后绑定`click`事件，当用户点击指定元素时，触发弹出提示框的代码。 3. **弹出提示框**：在JavaScript中，常见的弹出提示框有`alert()`、`prompt()`和`confirm()`。考虑到这是一个jQuery...

    Div 弹出信息框例子

    在网页设计中，"Div 弹出信息框例子"是一个常见的需求，用于向用户展示重要的提示、警告或者交互信息。Div元素是HTML中的一个布局工具，全称为“Division”，意为区域划分，常用于创建复杂页面结构。在这个场景下，...

    仿美团弹出分类选择框

    在Android开发中，创建一个仿美团弹出分类选择框是一个常见的需求，这通常涉及到用户界面（UI）的设计和交互。这个任务特别适合初学者来学习和实践，因为它是提升用户体验的关键部分，同时也能帮助开发者掌握Android...

    纯css3图片点击弹出动画遮罩层效果

    2. **过渡（Transition）**：在本项目中，点击图片时，图片会有一个平滑的缩放效果，这就是CSS3的过渡特性。通过设置`transition`属性，我们可以指定一个属性（如`transform`）从一种状态到另一种状态的变化速度。 ...

    可自定义的底部弹出框

    "可自定义的底部弹出框"是这样一种组件，它能够在屏幕底部弹出，提供用户选择或操作，常见于分享、菜单选择等场景。这种设计模式既符合人机交互原则，又能有效地利用屏幕空间。 在描述中提到的"仿分享的底部弹出框...

    简单自定义弹出框

    `images`目录可能包含了一些与弹出框相关的图形资源，如图标、背景图片等，这些图片可能被引用在CSS文件中，以提升弹出框的视觉效果。在设计自定义弹出框时，图片的使用可以增加用户体验的丰富度和吸引力。 `js`...

    漂亮的js弹出框

    1. **图片弹出框**：在网页中，当用户点击某个元素时，弹出一个框显示图片，这通常涉及到事件监听和DOM操作。例如，使用`addEventListener`监听点击事件，然后动态创建一个新的DOM元素（如`&lt;img&gt;`标签），设置其`src...

    微信小程序开发 遮罩层弹出框

    在微信小程序开发中，创建一个遮罩层弹出框是常见的需求，这通常用于实现对话框、加载提示或用户交互反馈等场景。本教程将详细讲解如何在微信小程序中实现这样一个功能。 首先，我们需要理解微信小程序的基本架构。...

    c# 示例 点击按钮打开图片

    在这个示例中，当我们点击按钮时，OpenFileDialog会弹出，让用户选择想要打开的图片文件。 5. **事件处理程序**: 在C#中，事件处理程序是响应特定事件的函数。在这个示例中，我们需要为Button的Click事件创建一个...

    android仿QQ底部弹出框选择头像

    7. **事件监听与处理**: 对底部弹出框的按钮添加点击事件监听器，处理用户选择相机或图库的操作。同时，裁剪后的图片需要进行相应的处理，例如调整大小、保存到本地或上传服务器。 8. **动画效果**: 为了提高用户...

    弹出框设计.zip

    综上所述，"动态弹出框设计.zip"文件很可能包含了实现这些功能所需的所有资源，包括HTML、CSS和JavaScript代码，可能还有示例图片或者其他设计素材。通过理解和运用这些资源，开发者和设计师可以为他们的项目添加...

Magicbox
Global site tag (gtag.js) - Google Analytics