input type=file /，美化自定义上传按钮

上传的按钮实在是太丑了，今天看了别人的文章，自己找了找资料，琢磨了一下，结果如下。

图片如下：

代码如下，粘贴即可以用：

@{ViewBag.Title = "IndexInput";Layout = "";
}
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>input file 美化</title><style>*{margin: 0;padding: 0;}.btn_addPic{display: block;position: relative;width: 120px;height: 28px;overflow: hidden;border: 1px solid #EBEBEB;background: none repeat scroll 0 0 #F3F3F3;color: #999999;cursor: pointer;text-align: center;float: left;margin-right:5px;}.btn_addPic span{cursor: pointer;display: block;line-height: 28px;}.filePrew{cursor: pointer;position: absolute;top: 0;left:0;width: 120px;height: 30px;font-size: 100px; /* 增大不同浏览器的可点击区域 */opacity: 0; /* 实现的关键点 */filter: alpha(opacity=0); /* 兼容IE */}</style>
</head>
<body><form action="@Url.Action("IndexInput", "Uploader")" method="post" enctype="multipart/form-data" ><div style="height: 28px;margin:100px;"><div class="btn_addPic"><span>上传图片…</span><input tabindex="3" title="支持jpg、jpeg、gif、png格式，文件小于5M" size="3"name="pic" class="filePrew" type="file" οnchange="document.getElementById('textName').value=this.value"></div><input type="text" id="textName" style="height: 28px;border:1px solid #f1f1f1" /></div><br /><br /><input type="submit" /></form>
</body>
</html>

cs 代码如下：

       [HttpPost]public ActionResult IndexInput(int? page){HttpPostedFileBase saaa = Request.Files["upfile"];HttpPostedFileBase baseFile = Request.Files[0];string qqfile = Path.GetFileName(baseFile.FileName);Stream stream = baseFile.InputStream;using (var flieStream = new FileStream(HttpContext.Server.MapPath(@"\ImageNew\") + qqfile, FileMode.Create)){stream.CopyTo(flieStream);}return Content("上传成功！");}

转载于:https://www.cnblogs.com/Kummy/archive/2013/06/03/3115103.html

input type=file /，美化自定义上传按钮相关推荐

＜input type=“file“＞实现上传文件
嗨害嗨,我又来了奥.今天讲一个项目中常见的例子,就是利用input type="file"来进行表单上传文件.首先,我们写好html,如下. <form id="f ...
php多图片上传到数组,input type=file多图片上传原生html传递的数组集合
单个的input type="file"表单也是可以实现多图片上传的代码如下: 这里要给file表单加上一个multiple属性 multiple="multiple& ...
关于input type=file 限制文件上传类型
HTML <input> 标签的 accept 属性 <input type="file" name="pic" id="pic&q ...
input type=file accept=.zip上传文件响应慢的问题解决办法
在谷歌和火狐中使用 accept=".zip" 属性发现响应延迟的问题. 于是几经尝试后,发现是 accept=".zip" 属性的问题,删掉它或者将 * 通配 ...
input type属性为file时（type=file），上传一次然后做更新input的change事件
最近在做文件上传,第一次上传之后,再次上传同样的文件,不会做出相应的事件处理: 解决方案: 当你把input的文件取出之后,使用replaceWith覆盖掉以前的input,这样就做到了刷新input ...
html5 input file样式修改,css为input type=file设置自定义样式
input file上传按钮的美化思路是,先把之前的按钮透明度opacity设置为0,然后,外层用div包裹,就实现了美化功能. 主要有两点需要做: 将input type=file控件透明将inp ...
input type=file美化
最近碰到input type=file 之前用模拟点击来实现美化,发现在IE7下会有bug导致图片上传不上去,最后改用直接美化的方法 <!DOCTYPE html> <html la ...
封装一个完整版的uniapp图片和视频上传组件，拿来即用，可进行图片视频切换，可自定义上传按钮样式，删除按钮样式，可单独上传图片或者视频，可限制上传数量
第一步 components里面新建一个manyImgUpload.vue组件,将以下代码放入以下代码中需要你改的地方 uni.uploadFile中的参数,url为你公司的上传接口.files为你 ...
html表单input file,input标签type=file的文件上传
一,通过表单提交的方式该提交方式只是提交普通表单:对于file组所选中的文件内容是不上传的,因此需要设置:enctype属性 enctype="multipart/form-data&qu ...

input type=file /，美化自定义上传按钮

input type=file /，美化自定义上传按钮相关推荐

最新文章

热门文章