上传图片的样式
来源:互联网 发布:python 驼峰命名 编辑:程序博客网 时间:2024/04/20 06:49
最近两天,在给公司做活动,其中有一个图片上传的样式,一般图片的上传都是这样的:
(对了,csdn的图片上传在chrome下怎么没有浏览呢。。 不能上传图片,后来发现在后面的空白处单击才行!)
可我们的需求是这样的:
我觉的这样式美工应该搞定的,tm美工又没时间,没办法自己弄吧,在网上找了一些也没有合适的,操自己想。
第一种想法是:
用一个div,把<input type="file" ..>覆盖,当点击浏览图片的时候,相当于<input type="file" ..>focus+select+回车键,然后把<input type="file" ..>的值,赋给div,不就行了。
<div id="uptupian">
<input type="file" id="upload" name="upload" style="display:aaa"/>
</div>
<div onclick="find(event);" >点我上传</div>
<script>
function find(e){
var obj=document.getElementById("upload");
obj.click();
obj.select();
obj.focus();
var event = (e)?e:window.event;
event.keyCode=13;
}
</script>
可问题是偏偏是在火狐下,不能用,真是气死我了。。。这个思路断了,哪位高手知道,请多多指教。。 不胜感激!!
第二种想法是:
把<input type='file'...>放入div中控制他的width,height,postion是absolute,透明度为0,定位在指定的图片上,就可以了。靠,又是firefox的问题,div控制不了样式,...... 对,用size='1',控制到最小。这样你点击图片相当于是点击<input type='file'..>
对了,前面是一个<input ..>,这样就模仿出了上传图片的样式了。。谢天谢地。只要样式出来,剩下就是我们code的问题了。
代码大概是(是从项目上弄下的没有单独测)
/* file设为透明 */
#upfiles{
width:70px;
height:55px;
/*background-color:red;*/
position:absolute;
z-index:2100;
top:125px;
left:585px;
filter:alpha(opacity=0);
opacity:0;
cursor:pointer;
}
</style>
<div class="photo_in">
<p><b>上传您和侯佩岑的合影:</b></p>
<p class="in_text"><input type="text" id="picsrc" readonly><input type="file" name='upfiles' id="upfiles" class="files" onchange="loadimg()" size="1"/></p>
</div>
<div class="right"><input type="image" src="{STYLEIMGDIR}patty/btn_05.gif" onclick="return false" /><input type="image" src="{STYLEIMGDIR}patty/btn_06.gif" style="cursor:pointer;"/></div>
function loadimg(){
var imgsrc = document.getElementById("upfiles").value;
document.getElementById("picsrc").value = imgsrc;
}
哇,基本可以实现了。。。 有什么问题可以留言啊!
- 上传图片的样式
- 上传图片的样式
- 上传图片之样式问题
- phpcms v9 去掉编辑器上传图片的宽高样式
- 上传图片时button按钮隐藏,用做好的样式
- 自定义上传图片样式,同时实现多图片的上传和预览
- UIBarButtonSystemItem的样式图片
- 关于django上传显示图片,以及css,js等样式的显示问题的解决
- 如何把上传文件的浏览按钮换成其他样式 或者图片
- ckeditor上传图片后取的内容存在style样式解决方案
- 图片上传的jsp-项目可借鉴-可基于自身调整样式
- 自定义上传文件的样式
- iOS图片上传-AFNetWorking的图片上传
- 图片上传的例子
- 图片上传的实现
- 图片上传的方法!
- Resin的图片上传
- 上传图片的限制
- kingcms5.0/5.1漏洞
- Extjs按钮字体大小的调整
- ssh2 整合jbpm
- SAX方式解析XML的简单方法
- 163邮箱收不到mdaemon 11发过来的邮件
- 上传图片的样式
- 在新窗口打开链接的使用
- 详细剖析Linux睡眠休眠状态
- QT单元测试
- GIS、地图服务、移动终端等相关简介
- Linux内核的Oops
- 使用fastcgi_finish_request提高页面响应速度
- 应对网站高并发访问的四个建议
- play framework学习笔记之 表单提交,超链接提交 与 页面渲染