CSS:点击图片区域上传文件

前端菜鸟,本人目前只能看懂和抄代码。因为参与一个项目需要用到这块样式,于是在网上找到的例子。于是记下来,同时也是方便自己查阅。

/*定义图像以及大小*/
.imageFileInput{
    width: 200px;
    height: 200px;
    position: absolute;
    background-color: red; /*这里可以换成图片路径(background-image:../img/....)注意图片路径*/
}

/*定义上传*/
.fileInput{
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    opacity: 0;
}

下面是HTML部分:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS样式:点击图片上传文件</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="imageFileInput">
    <input class="fileInput" type="file" id="" name="">
</div>
</body>
</html>
时间: 2024-11-05 19:42:28

CSS:点击图片区域上传文件的相关文章

jq怎么给图片绑定上传文件按钮

html代码 <img src="/img/zhengmian.png" class="file1"> <input type="file" id="file1" style="display:none;"/> jq代码 //上传头像$(function () { $(".file1").click(function () { $(this).siblings('

文件上传控件-如何上传文件-文件夹层级结构

4GB以上超大文件上传和断点续传服务器的实现 随着视频网站和大数据应用的普及,特别是高清视频和4K视频应用的到来,超大文件上传已经成为了日常的基础应用需求. 但是在很多情况下,平台运营方并没有大文件上传和断点续传的开发经验,往往在网上找一些简单的PHP或者Java程序来实现基本的上传功能,然而在实际使用中会发现,这些基于脚本语言实现的上传功能模块性能很弱,一是不支持2GB以上的内容上传:二是无法支持断点续传:三是效率极低,单台服务器最多支持几十个并发上传连接. 当前我们要搭建一个运营级的视频服务

点击图片上传文件

一.选择文件 1.隐藏input(大部分手机浏览器,微信中都不可用) 通过js触发选择文件.js获取选择的文件并上传 实现: <html> <head> <title>上传</title> </head> <body> <img src="xxxxxxx" id="image" onclick="select()" name="image" />

Android上传图片到PHP服务器并且支持浏览器上传文件(word、图片、音乐等)

暑假已经过了一半了,这才完成计划当中的第二个任务.虽然进度是慢了点.但也算是暑假的收获吧.下面我就把我学习当中的收获记录在此. 还是跟以往一样,先上图片. 操作的步骤:打开程序---->选择上传的照片----->点击返回键------>显示没有选择上传图片的toast------>点击上传的图片----->打印图片的存储的物理路径---->询问是否确认上传选择的图片----->确认则显示上传成功---->取消则退出 php代码: <?php //上传文

MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件02-多文件上传

上一篇中,使用客户端jJSAjaxFileUploader插件实现单文件异步上传,本篇实现多文件异步上传. 本篇源码在github,先看效果: ● 上传文件显示进度条. ● 停止上传按钮和关闭缩略图按钮. ● 限制上传文件的类型. ● 限制上传文件的尺寸. ●同时上传多个文件成功后显示缩略图.文件名: ● 点击界面上的删除按钮,界面删除,同步删除文件夹中文件. ● 再点击上传文件,界面追加一行新的缩略图.文件名.删除按钮: □ HomeController 把上传的文件名改成以GUID命名的格式

基于spring-boot的web应用,ckeditor上传文件图片文件

说来惭愧,这个应用调试,折腾了我一整天,google了很多帖子,才算整明白,今天在这里做个记录和分享吧,也作为自己后续的参考! 第一步,ckeditor(本博文论及的ckeditor版本4.5.6)的配置图片文件上传功能,默认这个是没有开启的,就不用多说,ckeditor官网上也说的很清楚!http://docs.ckeditor.com 下面简单的说下配置(配置文件algoConfig.js): 1 CKEDITOR.editorConfig = function( config ) { 2

强大的CSS:滤镜和混合模式处理的图片如何上传下载?

一.使用CSS滤镜和混合模式在线PS 使用CSS滤镜和混合模式可以实现各种各样的图像处理效果,内置众多图像处理效果,部分效果示意如下缩略图: 进入demo页面你也可以点击这里的按钮,更换你本地的素材,查看对应的图像效果: 呈现的效果虽好,但是也带来另外一个问题,虽然视觉上是已经处理后的图片,但是如果我们右键-图片另存为,会发现还是原图. 如果用户觉得某个图片处理后的效果很棒,想要保存到自己的本机,就会受阻. 或者说,我们基于CSS滤镜和混合模式制作了一款图像处理的工具,最后需要把这些已经处理好的

ASP.NET 上传文件以及点击下载

需求说明: 实际项目中,有必要上传附件(包括图片.文档.解压文件等)对数据库数据完善,这里实现的功能就是,上传附件到数据库,然后从数据读出来之后,可以"点击下载"之前上传的附件内容. asp.net代码如下: //用FileUpload控件,上传附件之后,导入数据库操作 protected void btnUp_Click(object sender, EventArgs e) { DbSql db = new DbSql(); //数据操作类 string fileName = &q

上传文件点击后显示图片

HTML代码 <include file="./Application/Home/View/default/Public/homeheader.html" /> <html> <body> <!--<form action="{:U('home/statistics/uploadinformation')}" method="post" enctype="multipart/form-da