`

Js/Jquery 实现自定义 上传 按钮

jqueryjsinput上传 
阅读更多

先上效果图：

http://dl.iteye.com/upload/attachment/0070/2277/ea085fc3-f0bc-3122-8c3e-b590629d433c.png

 

默认的 文件上传按钮 在各大浏览器 上兼容效果很差

http://dl.iteye.com/upload/attachment/0070/2275/47c44db2-2eca-3c28-90f1-f50814dc62d3.png

 

在chrome上直接 就没有输入框 这针对浏览器测试是一个 比较大的麻烦

 

幸好jquery可以帮助你实现 这个自定义的上传按钮的样式的修改

 

 

 

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>File Uploader</title>		
			<link href="css/basic.css" type="text/css" rel="stylesheet" />
			<script type="text/javascript" src="http://filamentgroup.github.com/EnhanceJS/enhance.js"></script>		
			<script type="text/javascript">
				// Run capabilities test
				enhance({
					loadScripts: [
						'https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js',
						'js/jQuery.fileinput.js',
						'js/example.js'
					],
					loadStyles: ['css/enhanced.css']	
				});   
		    </script>
	</head>
	<body>	
	
	<!-- realistic form attributes: <form action="#" method="post" enctype="multipart/form-data"> -->
	<form action="#">
		<fieldset>
			<legend>Profile image</legend>
			<label for="file">Choose photo</label>
			<input type="file" name="file" id="file" />
			<input type="submit" name="upload" id="upload" value="Upload photo" />
		</fieldset>
	</form>


	</body>
</html>

 完整代码 请下载

  • 大小: 10.9 KB
  • 大小: 2.9 KB
1
顶
3
踩
分享到：
| 取消 wordpress 的分类 置顶
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery实现自定义下拉条

    本项目聚焦于使用jQuery来实现一个自定义的下拉条，这将赋予开发者更多的设计自由度，使得下拉条可以更好地融入网站的整体风格，并提供个性化的交互体验。 一、jQuery基础 在开始讲解如何实现自定义下拉条之前，...

    自定义按钮

    2. JavaScript/jQuery：通过JavaScript或jQuery，可以实现按钮的动态行为，如添加点击事件、动画效果、条件判断等，增加交互性。 3. Android：在Android开发中，可以通过设置Button控件的属性，如背景、文字、大小...

    JS / jquery 图片切换焦点图

    "JS / jQuery 图片切换焦点图"就是这样的一个功能，它利用JavaScript和jQuery库来实现动态的图片轮播效果。下面我们将深入探讨这个话题，了解如何使用jQuery创建一个高效的图片切换焦点图。 首先，jQuery是一个广泛...

    jQuery实现自定义数值抽奖活动特效源码.zip

    该压缩包文件"jQuery实现自定义数值抽奖活动特效源码.zip"主要包含了一个基于jQuery库的自定义数值抽奖活动的实现。jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。...

    jquery实现通过按钮弹出表单

    本文将深入探讨如何使用jQuery实现通过按钮触发弹出式表单的功能，这个功能广泛应用于用户的新建操作、数据导入等功能，极大地提升了用户体验。 首先，我们需要在HTML页面中设置一个按钮和一个隐藏的表单。按钮将...

    利用jquery.carousel.js实现自动轮播旋转木马效果（带前后按钮和小按钮5个）

    本教程将详细介绍如何利用`jquery.carousel.js`插件实现一个具备前后按钮和五个小按钮的自动轮播旋转木马效果。 首先，`jquery.carousel.js`是一个基于jQuery库的轻量级插件，它提供了创建自定义轮播图的功能。要...

    jQuery实现自定义拖拽插件.zip

    在IT行业中，jQuery是一个非常...总的来说，通过学习这个jQuery自定义拖拽插件，你可以深入理解jQuery事件处理、DOM操作和插件开发，提升你的前端开发技能。记得阅读提供的文档，并动手实践，这是掌握技术的最好方式。

    jQuery实现一个自定义的单选按钮radio

    在本文中，我们将深入探讨如何使用jQuery来实现一个自定义的单选按钮（radio）组件，同时也会涉及相关的JavaScript和ECMAScript基础知识。 ### 1. jQuery基础 首先，我们需要了解jQuery的基本用法。jQuery通过 `$`...

    jQuery自定义单选按钮复选框样式特效.zip

    本篇文章将围绕“jQuery自定义单选按钮与复选框样式特效”这一主题，深入探讨其实现原理及应用方法。 首先，我们需要理解jQuery的核心理念——简化DOM操作。通过jQuery，我们可以用简洁的语法选择、操作和改变HTML...

    jQuery自定义单选按钮复选框样式特效

    "jQuery自定义单选按钮复选框样式特效"是一个针对初学者的简单教程，它演示了如何利用jQuery库对网页中的基本表单元素，如单选按钮（radio button）和复选框（checkbox），进行美化和功能增强。下面我们将详细探讨这...

    jquery.media.js.zip

    《jQuery.media.js：深入解析与应用》 在Web开发领域，jQuery库以其简洁的API和强大的功能，成为了JavaScript开发者们的首选工具。今天我们要探讨的是一个基于jQuery的插件——jQuery.media.js，它为网页中的多媒体...

    jquery-ui-1.11.4完整版

    jQuery UI 是一款基于JavaScript库jQuery的用户界面插件集合，提供了丰富的交互效果和可自定义的主题。本文将深入解析jQuery UI 1.11.4这个版本，涵盖其核心功能、组件、应用场景以及使用方法。 一、jQuery UI的...

    jquery upload 中文上传按钮

    本篇文章将深入探讨如何在 jQuery Upload 中实现中文上传按钮。 首先，了解 jQuery Upload 的基本原理。这是一个基于 jQuery 和 Blueimp 文件上传库的组件，它利用 HTML5 的 File API 提供了多文件选择、进度条显示...

    Uploadify HTML5 版 / Jquery上传插件 全JS

    这款插件允许用户实现多文件选择、进度条显示、预览功能，以及自定义上传事件处理，使得文件上传变得既简单又美观。尽管在官方平台上下载可能需要付费，但这里提供了一个基于其API实现的免费版本，它同样能够实现...

    使用html+css+js实现自定义弹出对话框/输入框

    `PopDrag.js`是一个自定义的插件，它扩展了jQuery的功能，提供了对话框的拖拽功能。在`PopDrag.js`中，可能有如下实现： ```javascript $.fn.PopDrag = function(options) { var opt = $.extend({ dragEle: null ...

    jQuery自定义单选按钮复选框代码.zip

    在网页设计和开发中，jQuery 是一个...总的来说，"jQuery自定义单选按钮复选框代码.zip"是一个实用的工具，它展示了如何使用jQuery和CSS来增强表单元素的视觉效果，同时保持代码简洁，非常适合网页开发者学习和使用。

    jquery自定义弹出窗口

    jQuery自定义弹出窗口的核心是通过CSS和JavaScript来创建一个新的层（div元素）模拟窗口效果。首先，我们需要在HTML文件中创建一个隐藏的弹出窗口模板： ```html ;"&gt; &lt;!-- 弹出窗口内容 --&gt; &lt;/div&gt; &lt;/div&gt; ``` ...

    自定义jquery对话框

    最后，`mydialog.js`文件可能包含了实现自定义对话框功能的JavaScript代码。开发者通常会在这样的文件中编写对话框的初始化、事件处理和逻辑控制。例如，它可能包含与服务器通信、处理用户输入、验证表单等复杂操作...

Magicbox
Global site tag (gtag.js) - Google Analytics