JavaScript-如何将html上传框替换为图片

WP主题讨论 WP主题讨论 主题:1013 回复:2239

JavaScript-如何将html上传框替换为图片

虐人心 发布于 2017-09-16 字数 191 浏览 1271 回复 10
<input type="file" id="myfile" style="display:none"  />
<input type="image" id="uploadBtn" src="1.png" onclick="document.getElementById('myfile').click();" />

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

支持 Markdown 语法,需要帮助?

评论(10

浮生未歇 2017-10-23 10 楼

是<input type="file">这个,还是上传文件时,浏览器下面的status bar,解决方案,可以通过css display,隐藏浏览器原始的控件,通过自己开发的UI与提供给用户操作,然后将操作的文件,赋值给实际的<input>控件

瑾兮 2017-10-16 9 楼

用css方式实现,将file表单设置成透明,下面是图片,这样用户看到的是图片,点击的时候其实点击的是file表单而不是图片

泛泛之交 2017-10-11 8 楼

没有safari,在 chrome下试了下,没有问题。

但是 input type="image" 具有提交表单作用,所以在触发事件后return false;

onclick="document.getElementById('myfile').click();return false"

这里也没有必要用input,直接img标签就可以。

具体兼容情况如下图:

参考:http://www.cnblogs.com/snandy/archive/2011/07/31/2122516.html

甜柠檬 2017-10-07 7 楼

换成jquery的方法写呢,有试过吗?

$("#myfile").click( function () {

//这里写上需要执行的代码;

});

归属感 2017-10-05 6 楼

不知道这位朋友是不是要做图片按钮呢?
<input type="image" name="queding" src="images/gif1.gif" onclick="document.formcx.submit()" />
看看这个行不行?

归属感 2017-10-03 5 楼

做图片按钮有很多办法,除了这种<input type="image" />,也可以直接用<img src="" onclick="" />,甚至是div、span,用CSS,浏览器都是兼容的。
chrome下document.getElementById('myfile').click()没反应,应该是click()方法有了问题。

想挽留 2017-09-29 4 楼

推荐使用 简易的“障眼法” 很多站都是这么做的 如:腾讯微博
大致实现方法: 用div标签 放按钮 和 文件域 ,文件域posttione定位, 定位到按钮上面
透明度 设置为0 设置文件域的 font-size 以增大 他的热区
div记得要 定高定宽 设置overflow:hidden

灵芸 2017-09-25 3 楼

使用SWFUpload可以不考虑浏览器兼容性问题。

SWFUpload是一个客户端文件上传工具,最初由Vinterwebb.se开发,它通过整合Flash与JavaScript技术为WEB开发者提供 了一个具有丰富功能继而超越传统<input type="file" />标签的文件上传模式。

SWFUpload不同于其他基于Flash构建的上传工具,它有着优雅的代码设计,开发者可以利用XHTML、CSS和 JavaScript来随心所欲的定制它在浏览器下的外观;它还提供了一组简明的JavaScript事件,借助它们开发者可以方便的在文件上传过程中更新页面内容来营造各种动态效果。

SWFUpload - Flash上传组件
SWFUpload - 演示

偏爱自由 2017-09-24 2 楼

Safari/Chrome中非input/button元素没有click方法
可用如下方法:
var fileobj = document.getElementById('myfile');
var mouseevt = document.createEvent('MouseEvents');
mouseevt.initEvent( 'click', true, true);
fileobj.dispatchEvent(mouseevt);

泛泛之交 2017-09-17 1 楼

推荐一个既满足你问题需求,同时上传体验相当好的js插件--uploadfy
上传按钮可以自定义,相当方便
DEMO:http://www.uploadify.com/demos/

这个插件一直再用,现在已经更新到Uploadify Version 3.1.1了,你可以具体看下,使用起来很方便,它里边的buttonImg参数就是自定义上传按钮的,你可以看下。