jq css 美化上传

2024-11-09

jQuery上传文件按钮美化

效果图如下: 思路: 1:打开文件设置为透明,外面包一层标签,给标签设置颜色背景,给人点击浏览其实是点击打开文件的错觉.(给外标签相对定位,打开文件标签绝对定位). 2:点击浏览后,选择了文件,就把文件名赋值给前面自己创建的input框里面,前面的input框自己单独写出来.给样式. 3:上传按钮既上传文件到服务器的操作,请求接口即可. 代码: css: .chooseFile{ border: 1px solid #cccccc; width: 97%; height: 28px; borde

css 文件上传按钮美化

转自:http://zixuephp.net/article-85.html 思路:在一个div里面添加一个图片用作按钮再添加一个input file 文件上传,把文件上传按钮设置透明度为0,绝对定位覆盖在图片上,就实现了自定义上传图片按钮美化了. html <div style="position:relative;"> <img src="add.png" width="100"/> <input type=&q

input美化上传按钮美化

今天工作需求碰到样式改变上传按钮效果: <a href="javascript:;" class="a-upload"> <input type="file" name="" id="">点击这里上传文件 </a> <style type="text/css"> .a-upload { padding: 4px 10px; height

jq简单仿上传文件

html: <div> <input id="lefile" type="file" style="display:none"> <input id="photoCover" type="text"> <a class="btn-up">点击上传文件</a> </div> js: $('.btn-up').on('c

JQ实现图片上传预览功能

<input type="file" name="img" id="test1"> <img src="" id="demo1"> js代码如下: <script> // 图片预览功能 $("#test1").change(function(){ // getObjectURL是自定义的函数,见下面 // this.files[0]代表的是选择的文件资

页面(html,css,js)上传到服务器后乱码

http://blog.csdn.net/u011606714/article/details/44649159 将文件使用记事本保存成ANSI格式或者UTF格式(根据需要)即可. 设置格式: html : <meta charset="UTF-8"> js : <script type="text/javascript" src='...' charset="UTF-8"></script> css

ajax jQ写的上传进度条

XML/HTML Code <form id="myForm" action="upload.php" method="post" enctype="multipart/form-data"> <input type="file" size="60" name="myfile"> <input type="submit&qu

JQ图片文件上传之前预览功能

1.先准备一个div onchange触发事件 <input type="file" onchange="preview(this)" ></span> <div id="preview"></div> 2.写JS代码 //上传图片之前预览图片function preview(file){ if (file.files && file.files[0]){ var reader =

通过s3cmd上传css文件到s3导致样式加载失败

情景说明: 将css文件上传到aws s3存储桶中,通过浏览器访问页面,发现css文件渲染失败. 通过浏览器工程模式发现css为 Content-Type: text/html,正确的 Content-Type 应该为 text/css. 修改css文件上传参数,添加 --no-mime-magic ,再次访问,样式渲染正常.

【java 上传+下载】

一.先说说上传第一步:pom.xml文件加上上传文件依赖架包 <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.1</version> </dependency> 并且在配置文件中配置: <!-- 实现文件上传,这样一旦某个Reques

Jquery+Aajax 批量上传

注:转载请标明文章原始出处及作者信息网上有现成的Uploadify.WebUpload等插件,自己写一个简单的(非插件). 1.页面批量上传页面 <form action="" id="formid"> @Html.Hidden("filelist") <table> <tr> <td> 文件: </td> <td> <div id="filediv&qu

Uploadify/uploadifive上传(中文文档)

Uploadify是一款基于JQuery的优秀的文件/图片上传的插件,有基于Flash和HTML5两种版本. Uploadify/uploadifive主要特点有: 1. 多文件上传 2. 个性化设置 3. 上传进度条显示 4. 拖拽上传(HTML5版本) 官网:http://www.uploadify.com 部署在部署一个Uploadify实例前,请确保满足最低要求: 1.jQuery 1.4.x 或更高版本 2.Flash Player 9.0.24 或更高版本 3.支持PHP, AS

打造 html5 文件上传组件，实现进度显示及拖拽上传，支持秒传+分片上传+断点续传，兼容IE6+及其它标准浏览器

老早就注册了博客园帐号,昨天才发现,连博客都没开,Github也是一样,深觉惭愧,赶紧潜个水压压惊`(*∩_∩*)′ 言归正传.大概许多人都会用到文件上传的功能,上传的库貌似也不少,比如(jQuery File Uploader.FineUploader.Uploadify.Baidu Web Uploader 等等),功能都很强大,代码量一般也较大.当时心想,就这么个小功能,杀鸡焉用牛刀,用库的话还得熟悉它的用法,有的需要引入额外的库,纯Flash的不考虑,还是动手造个轮子得了,至少造过之后能

Asp.net MVC 实现图片上传剪切

使用技术:Asp.net MVC与jquery.uploadify,Jcrop 首先上页面 01 <strong><!DOCTYPE html> 02 <html> 03 <head> 04 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 05 <title>Index</t

简单好用的 AJAX 上传插件，还可以抛弃难看的 file 按钮哦~

在做网页设计的时候,设计师常常会把上传按钮设计得非常漂亮,还用了什么放大镜之类的图标来表达 browse 的效果.可是她们不知道,type="file" 的按钮在不同浏览器上的效果是不一样的,而且要做成统一的外观还非常困难.可是作为一名程序猿,美工MM给你设计了这么漂亮的上传按钮,你怎么可以不满足她呢?开什么玩笑~ 我们当然要不惜一切来实现MM们设计出来的效果,比如我们还可以请出 JavaScript 嘛~ 好了,段子讲完,下面就来介绍一下今天的主角,一款非常朴实 JavaScript

easy ui 异步上传文件，跨域

easy ui 跨域上传文件,代码如下: 1.html代码:(这段代码是个win窗体,我在点击上传图片按钮然后弹出一个上传图片的窗体,选择图片再进行上传,这样在form提交时,提交的参数会少一点.) 说明:跨域上传文件时: a.新加irame <iframe name="upload" style="display:none"></iframe> b. <form id="form_upload_pic" metho

CSS美化页面滚动条

文章来自:http://www.webhek.com/scrollbar 本文将会告诉你如何用CSS修改/美化浏览器页面上出现的滚动条.改变它们的颜色,调整它们的外形,适配你对页面UI设计.我们首先将会看看谷歌(Webkit)浏览器提供了哪些CSS属性,最后,还将介绍如何用jQuery支持其它类型的浏览器. 各种浏览器对CSS滚动条的支持情况这里说的Webkit浏览器包括谷歌浏览器,苹果公司的Safari浏览器,以及最新的Opera浏览器.这些浏览器加起来占有超过半数的桌面浏览器市场份额.对于

uploadify上传文件（1）--下载

最近在给公司做一个软件版本迭代管理的软件,是一个asp.net网站开发项目.利用mvc框架,前端采用bootstrap,数据库是MySQL,数据库访问利用EF框架. 软件需求是公司软件开发项目多,版本迭代复杂,项目开发组与测试组沟通不及时有可能使得测试组获得的软件与最新的版本不符合,因此最好的解决方式就是,开发组将一个软件的版本开发完成上传到服务器,测试组去下载最新版本. 既然要上传文件就要选择上传的技术,微软自带的上传方法问题太多,所以选用目前比较流行的上传插件--uploadify. 插件下

java前后分离使用fetch上传文件失败500

这次不是写什么技术要点,仅仅是记录一下最近遇到的一个问题背景使用fetch向java后台上传文件时,前端调试报错500,后端的报错为multipart 无法解析,翻译过来大概是这个意思. 由于本人不会java所以这里只是记录一下前端的注意事项. 原因问题的主要原因在于,我在上传时设置了contenttype,这里就不得不提一下,fetch中由于之前使用的时候如果我不设置contenttype那么我向后端传送json时就会报错. 因为contenttype本来就是用于设置http的格式的,

formData批量上传的多种实现

前言最近项目需要批量上传附件,查了下资料,网上很多但看着一脸懵,只贴部分代码,介绍也不详细,这里记录一下自己的采坑与多种实现,以免以后忘记. 这里先介绍下FormData对象,以下内容摘自:https://developer.mozilla.org/zh-CN/docs/Web/API/FormData XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XML

bootstrap file input 多图片上传编辑THINKPHP5

{layout name="layout" title="文章添加" /} <form id="defaultForm" role="form" method="POST" action="{:url('/admin/article/add/')}"> <div class="form-group"> <label for="e

jq css 美化上传

热门专题