`
jiangjingxiaoxuan
  • 浏览: 32619 次
  • 性别: 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点击图片弹出文件选择框并覆盖原图功能的实现代码

    主要介绍了JS点击图片弹出文件选择框并覆盖原图功能的实现代码,需要的朋友可以参考下

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

    一个form上面有一个按钮即一个图片显示框。 点击按钮后，实例化一个openFileDialog 类对象，然后打开用户选中的图片。 并且可以根据图片的大小调节button的长度以及窗口的大小

    高德地图-自定义点击弹框（气泡）

    在高德地图中点击弹出自定义弹框(气泡)。（结合上一个上传的文件，也可用于标记点的点击弹出的弹框气泡）

    asp.net 无刷新附件上传实现方法

    点击图片弹出文件选择框，运行效果图二 选中文件打开，文件开始上传，点击“停止”按钮，“正在上传”变为“等待上传”，“停止”变为“上传”，运行效果图三 由于附件的大小受限或页面访问超时，上传失败，运行...

    MFC选择位图文件并显示

    在MFC中点击一个按钮，然后会弹出文件选择框，从文件选择框中选择一个bmp格式的位图文件并显示出来。

    绝对好用Flash多文件大文件上传控件

    　fileDesc ： 这个属性值必须设置fileExt属性后才有效，用来设置选择文件对话框中的提示文本，如设置fileDesc为“请选择rar doc pdf文件”，打开文件选择框效果如下图： 　fileExt ： 设置可以选择的文件的类型，...

    通过点击屏幕发出喵的叫声

    用来哄小孩开心，文件操作简单，点击屏幕即可，发出“喵”的叫声，家长安装后给小孩提供娱乐，也可更改代码图片和声音举一反三

    图片文字提取软件 图片内容转变文字 ORC软件

    1、 OCR用法简介 1）打开带有文字的图片，根据所要提取的文字进行裁剪（如果是电子书籍，可...不修改默认设置，直接点击"识别"后，弹出的界面 将框内的文字选中，并复制到文本文件或Word文档进行个别错字修正即可。

    利用HTML5的新特点实现图片文件异步上传

    思路：下面代码中我利用css的z-index属性将input=file”标签隐藏在了id=btnSelect元素下面，通过触发a标签的点击后，弹出文件选择框。下面的masklayer用于点击确认按钮后的弹出层，避免用户重复点击确认按钮。 复制...

    文件服务器规划设计.docx

    情况一：弹出文件选择窗口 情况二：弹出多选文件选择窗口 第三步：上传文件 该步骤为根据文件上传组件自动构造参数，将文件上传到FUS Server中。FUS Server接收到传来的文件信息和各种参数后，将文件转存到指定的...

    COLLADAMax.dle插件及DaeToGltf工具-2014

    1.安装插件导出DAE模型 解压后将插件COLLADAMaxNew.dle文件存放于3ds MAX2014安装目录下的plugins文件夹，本示例地址为：“C:\Program Files\Autodesk\3ds Max 2014\plugins”。...等待弹出转换完成提示框，完成。

    COLLADAMax插件和DaeToGltf工具-2014.rar

    COLLADAMax.dle插件及DaeToGltf工具-2014评分:  1.安装插件导出DAE模型 解压后将插件COLLADAMaxNew.dle文件存放于3ds MAX2014安装目录下的plugins文件夹，本示例地址为：“C:\...等待弹出转换完成提示框，完成。

    图片批处理

    右键弹出菜单中可选择【幻灯片浏览】模式以幻灯片方式自动播放所有图片。右键菜单中可选择【适合屏幕】模式来查看图片的全貌，选择【原始大小】模式查看图片的实际效果，超出屏幕部分可以用鼠标拖动图片查看。双击...

    java写的记事本源代码

    点击不保存（N）：不保存文本，弹出选择文件对话框 ==》选择文件对话框： 选择打开（O）：就打开新的文本 选择取消：取消打开操作，返回原文本 点击取消：取消打开操作 1.3保存（S） 菜单内点击或助记符S或...

    jquery使用FormData实现异步上传文件

    点击按钮，弹出文件选择框 选中图片并确认后直接上传图片 实现这个功能，需要使用&lt;input&gt;来添加文件，并实现上传功能。传统的上传文件是将&lt;input&gt;放到&lt;form&gt;中提交，但在这个场景中并不存在form...

    特斯拉Touch 150W电子烟升级工具 升级文件.rar

    点击连接 Connect 字体由红转绿后表示连接成功如果弹出窗口提示连接失败，等5秒后重试点击连接方框里选择 “updata Theme”添加或替换壁纸3.选择为升级模式　4.选择将要添加或替换的图片文件的路径（要求图片...

    jQuery提示框插件SweetAlert用法分析

    SweetAlert可以替代Javascript原生的alert和confirm等函数呈现的弹出提示框， 它将提示框进行了美化，并且允许自定义， 支持设置提示框标题、提示类型、内容展示图片、确认取消按钮文本、点击后回调函数等。 准备...

    PopActionSheet:常用整理（网络;弹出菜单）会继续整理

    根据自己的需求就控制点击按钮的颜色，弹出框的背景颜色等。 使用方法 只需要将PopActionSheet.h 和 PopActionSheet.m，以及Image文件夹的两个png图片放到你的工程文件。 代码使用 PopActionSheet *sheet = ...

    为XP系统设置屏保

    2、鼠标右键单击桌面，在弹出的快捷菜单中选择“属性”，打开显示属性对话框，然后选择“屏幕保护程序”标签，在“屏幕保护程序”下拉框中选择“图片收藏幻灯片”，点击“设置”按钮，进入“图片收藏屏幕保护程序...

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