(asp)FileUpload控件美化以及预览图片

news/2024/2/29 4:38:00

FileUpload控件美化

你会发现原来的控件样式(我加了一个边框)并不好看,虽然说我们可以给这个控件设置宽度,高度等常规样式,但是旁边的未选择任何文件以及选择文件按钮都在,无法去掉,至少单单设置这个input的样式我是没有成功
示例图片1
那么既然可以设置宽度,高度,那么我们就设置为130px 40px,设置好之后是这样的,我还设置了border,之前通过一番捯饬,我发现里面的选择文件按钮不能设置宽高
示例图2
那么怎么美化呢?
1.通过css用容器遮盖
在与这个FileUpload控件同级创建一个div(不是同级也行),里面写上信息“点击选择图片”,设置它的宽高和这个upload一样为130px 40px,设置背景颜色等样式

<div id="big"><input type="file" /><div id="new">点击选择图片</div>
</div>
#new{width: 130px;height: 40px;background-color: #ededed;text-align: center;line-height: 40px;
}

先给包裹它们的容器设置position,利用父相子绝

#big{position: relative;
}
#new{position: absolute;//具体的top,left等参数请以具体为准top: 0px;
}

然后用绝对定位将这个#new容器移动到FileUpload上,遮住,如图,利用F12的检查功能细调
示例图3
再设置FileUpload的样式,同样设置为绝对定位,top设置为0px(具体可能会改变)就行保证它俩的位置是一样的
接下来调整图层顺序,input的图层顺序一定要比遮盖的容器要大

input{z-index: 2;
}
#new{z-index: 1;
}

效果如图
示例图4
接下来利用opacity(透明度)属性,将FileUpload的透明度设置为0,完全不显示,和display还是有区别的

input{opacity: 0;
}

效果如图,鼠标悬浮上去还有title提示
示例图片5

2.通过js
下面是结构,样式,美化啥的就靠自己吧,23333
首先不管干啥,先把FileUploaddisplay none

<div id="big"><input type="file" id="file"/><input type="button" id="btn" value="点击选择图片"/>
</div>
#file{display: none;
}

那么就只剩一个按钮孤零零的一个真是满地飘零
示例图6
接下来写JQuery,没有引用JQuery文件的小伙伴记得先引用哦

$(function(){$("#btn").click(function(){$("#file").click()})
})

这样的话就可以通过按钮的单击引用FileUpload的单击事件,整体结构是这样:

<div id="big"><input type="file" id="file"/><input type="button" id="btn" value="点击选择图片"/>
</div>
<!-- 这个JQuery的引用路径请以实际为准 -->
<script src="jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
<script>$(function(){$("#btn").click(function(){$("#file").click()})})
</script>

FileUpload控件联合img预览图片

1.点击选择图片之后图片预览
首先用的是之前的css方法,这是结构,定位啥的参考前面

<div id="big"><input type="file" id="file"/><div id="new">点击选择图片</div><img src="" >
</div>

写下如下Js,利用JQuery:

$(function(){$("#file").change(function(){//图片路径设置为FileUpload控件获得的路径值$("img").attr('src',URL.createObjectURL($(this)[0].files[0]))$("#new").text("点击更换图片").css("background-color", "#3dcccc").css("color", "white");})
})

点击选择图片之后效果如图,我还将文字做了改变,背景色也变化了,因为使用了绝对定位,脱离了文档流,所以图片顶上去了。
鼠标悬浮上去还有文件名
使用asp的小伙伴就可以用hasfile属性判断并使用相关属性获取文件名再用saveas保存啦(属性名应该没打错叭)
示例图7
2.选择图片过程中弹出来的选择文件窗口点击取消图片跟随消失

看着这个标题你会有点迷糊,为什么要跟着消失掉?(亦可以不跟随消失)因为使用遮盖方法鼠标悬浮上去有title提示图片名(如上图)或者有未选择图片的title,用上面的js方法美化FileUpload就不会有这个title出现,其实也可以不管,但这是个细节问题,如图:
示例图8

看了很多,都说不能监听取消选择的事件,但是可以使用value,那我们就监听value,当FileUpload的change事件之后就打开定时器,不断验证FileUpload的value值是否为 “” 。

function start() {var timer = setInterval(function () {//判断upload的值,如果为空用户就点击了取消var $url = $("#file").val();//要用变量接收再判断,不然是undefinedif ($url == "") {//置空图片的src$("img").attr('src', "");//变回样式$("#new").text("点击选择图片").css("background-color", "#ededed").css("color", "black");//停止计时器//也可以不停止,看你个人,哼哼~clearInterval(timer);}}, 1000)
}
//FileUpload控件选择图片之后
$("#file").change(function () {//获取图片路径并给图片设置src$("img").attr('src', URL.createObjectURL($(this)[0].files[0]));//改变覆盖在FileUpload上的容器样式$("#new").text("点击更换图片").css("background-color", "#3dcccc").css("color", "white");//启动定时器start();
})

碎碎念,当然还有更好的方法,我之前研究这个的时候就打开那些图片转换网站的Js仔细瞅瞅,问题就是每个字都认识,但是连在一起就不认识惹


http://www.ppmy.cn/news/521166.html

相关文章

Windows10 深度美化

壁纸主题&#xff08;非Steam用户&#xff09;&#xff1a; https://dl.3dmgame.com/patch/wallpaperengine.html 软媒魔方&#xff1a;https://mofang.ruanmei.com/ Dism &#xff1a;https://www.chuyu.me/zh-Hans/index.html Wallpaper Engine&#xff1a;https://store.…

Python 窗体美化,背景图片,字体样式

背景图片&#xff1a; import tkinterwintkinter.Tk() phototkinter.PhotoImage(filer"C:\Users\Desktop\1.gif") labeltkinter.Label(win,imagephoto) #图片 label.pack() win.mainloop()字体样式&#xff1a; import tkinterwintkinter.Tk() labeltkinter.Label(w…

pandas美化表格并生成图片

背景 甲方爸爸的任(无)性(理)需(要)求(求)&#xff1a;统计数据&#xff0c;并以表格的形式生成图片&#xff0c;每一列要用颜色标明前三位和后三位&#xff0c;最后把图片发送到钉钉群。 之前都是手工统计&#xff0c;既费时又费力&#xff1b;要改成代码每天自动发送。 调研…

个人博客美化

文章目录 Butterfly 主题安装修改博主头像生成文章唯一链接本地搜索SitemapRSS追番插件夜间模式繁星&#xff08;宇宙&#xff09;背景添加页脚徽标和计时器关于页面 总体参考&#xff1a; Butterfly 文档&#xff1a;https://butterfly.js.organzhiyu &#xff1a;https://anz…

图像处理:Tiler制作你的专属卡通头像和LOGO(圣诞特别篇)

目录 0 前言1 安装与贴图2 算法原理2.1 计算像素频率2.2 计算像素相对距离2.3 计算合适贴图 3 配置功能4 使用&#xff1a;以圣诞老人为例推荐内容 0 前言 Tiler是一种使用各种其他较小图像平铺创建新图像的工具&#xff0c;它与其他马赛克工具不同&#xff0c;因为它可以适应多…

#美化ggplot2生成的原始图片至清爽的感觉

美化ggplot2生成的原始图片至清爽可出版的样子 针对于ggplot2的可视化教程网上有很多&#xff0c;展示了很多ggplot2的图示&#xff0c;根据代码照猫画虎我们都可以去复原&#xff0c;但复原出来的图会有一些粗糙感。如何优雅的将这些图形应用到生产实际中呢&#xff0c;网上的…

python做图片美化_python图片美化

广告关闭 腾讯云11.11云上盛惠 &#xff0c;精选热门产品助力上云&#xff0c;云服务器首年88元起&#xff0c;买的越多返的越多&#xff0c;最高返5000元&#xff01; 功能性是开发的第一要务每一个 python 图形界面库都有它自有的功能特性和界面特性。 一般来说&#xff0c;…

美化上传文件框(上传图片框)

传统的表单控件十分简陋&#xff0c;可以说是很难看&#xff0c;那怎么办&#xff1f; 方法:我们自己做一个好看的样式出来&#xff0c;用各种标签啊&#xff0c;css啊&#xff0c;是可以做到的。如图: 做出这样一个样子应该是很简单的&#xff0c;但是怎么让他具有上传的功能的…

第三节 折线图

文章目录 折线图1.1 numpy介绍1.2 预测趋势1.3 折线图流程工具 Pandas1.3.1 读取并生成 CSV1.3.2 输出列数据1.3.3 画折线图1.5 添加横纵坐标,标题 屏幕属性 1.4 画双折线图1.5 扩展:做三线图 折线图 1.1 numpy介绍 上节课我们学了柱状图, 通过柱状图可以了解, numpy主要是科…

MyBatis第六讲:MyBatis缓存

八、MyBatis缓存机制 MyBatis 提供了一级缓存和二级缓存的支持。默认情况下&#xff0c;MyBatis 只开启一级缓存。 8、1MyBatis一级缓存 一级缓存是基于MyBatis自带的 HashMap 本地缓存&#xff0c;作用范围为 SqlSession 域内。当刷新或者关闭之后&#xff0c;该 SqlSessio…

内存不够用,那你的内存去哪了?

一、前言 近几年开发了一些大型的应用程序&#xff0c;在程序性能调优或者解决一些疑难杂症问题的过程中&#xff0c;遇到最多的还是与内存相关的一些问题。例如glibc内存分配器ptmalloc&#xff0c;google的内存分配器tcmalloc都存在“内存泄漏”&#xff0c;即内存不归还操作…

Blender导出模型到maya

1 将模型面朝-Y方向&#xff08;-Y是blender的正方向&#xff09; **增加一个Human1的骨骼层级作为Root&#xff08;视需要&#xff09;。 2 将骨架与mesh的旋转设置为0 CTRLA&#xff0c;选择Rotation & Scale 3 确保骨架的hips的Roll是0度 4 导出设置 5 导入ue 设置强制…

Maya导出当前选择没有Fbx格式

作为一个学习Maya的新手小白&#xff0c;做第一个模型是就遇到了这个问题&#xff0c;经过搜索前辈们的作品找到了解决方法&#xff0c;步骤如下:1.打开Maya→窗口→设置/首选项→插件管理器找到fbxmaya.mll将后方的选项都勾选→关闭 2.选中要导出的部件&#xff0c;按照正规导…

Maya2020安装错误1603

1.找到这个文件夹C\Program Files (x86)\Common Files\Autodesk Shared\ adsklicense 2.以管理员身份运行uninstall.exe(右键单击>以管理员身份运行)删除软件。 3.删除注册表“计算机\HKEY_LOCAL_MACHINE\SOFTWARE\Autodesk\Maya” 4.然后重新开始安装。

Maya中怎么一键清除历史

maya中删除历史的函数操作是: cmds.delete(constructionHistoryTrue) 但这个函数有一个弊端是必须要选择对应的mesh才会删除&#xff0c;否则不起作用 所以必须要选中对应的mesh在进行history的删除 如果想要总体删除有一个小窍门是选择最外层的文件&#xff0c;可以使用cmds…

Maya记

如图是有颜色加有线框 F键是放大选中的物体在窗口中央。 2. 提示正交试图被锁定时&#xff0c;可按照以上步骤。旋转和移动。 3.W左键 shift右键分别有不同的选项 4.P键可以建立父子关系 &#xff0c;controlP解除父子关系 5.controlg分组 可以把两个物体分为一组&#…

maya正交视图锁定与解锁

正交视图锁定&#xff1a;本质是进入不能旋转的固定视图中&#xff0c;退出即可 空格鼠标左键拖动出现视图视角&#xff0c;点空格鼠标左键点击maya&#xff0c;出现视图视角&#xff0c;点击右视图等&#xff0c;处于锁定状态&#xff0c;不能旋转 解锁&#xff1a; 空格面板…

Maya---晶格

搬运&#xff01;Maya绑定教程&#xff08;上&#xff09;&#xff08;火星教程&#xff09;_哔哩哔哩_bilibili

Maya---封口

Maya学习必遇到的31个常用命令&#xff0c;超详细讲解&#xff0c;解决你的所有疑问&#xff01;&#xff01;&#xff01;Maya教程 Maya基础教程 Maya入门教程 Maya人物建模 Maya游戏建模_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1Bq4y1z78Y?p10边模式下--->s…
最新文章