如何用图片按钮来代替文件上传控件
&style type="text/css"&
.fileInputContainer{
height:256
background:url(http://images.cnblogs.com/cnblogs_com/dreamback/437546/o_ff6.png);
width: 256
.fileInput{
height:256
font-size: 300
opacity: 0;
filter:alpha(opacity=0);
&div class="fileInputContainer"&
&input class="fileInput" type="file" name="" id="" /&
实现原理是：用图片盖住input上传文件控件。
文章出处：http://www.cnblogs.com/wangkongming/archive//3010615.html
没有更多推荐了，李林峰的园子
&&&&&&&&&&&
1.代码如下：
1 &!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
2 &html xmlns="http://www.w3.org/1999/xhtml"&
&title&&/title&
&!--ExtJs框架开始--&
&script type="text/javascript" src="/Ext/adapter/ext/ext-base.js"&&/script&
&script type="text/javascript" src="/Ext/ext-all.js"&&/script&
&script src="/Ext/src/locale/ext-lang-zh_CN.js" type="text/javascript"&&/script&
&link rel="stylesheet" type="text/css" href="/Ext/resources/css/ext-all.css" /&
&!--ExtJs框架结束--&
&script type="text/javascript"&
Ext.onReady(function () {
//初始化标签中的Ext:Qtip属性。
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
//创建div组件
var imagebox = new Ext.BoxComponent({
style: 'width:150height:150margin:0border:1px solid # text-align:padding-top:20margin-bottom:10px',
tag: 'div',
id: 'imageshow',
html: '暂无图片'
//创建文本上传域
var file = new Ext.form.TextField({
name: 'imgFile',
fieldLabel: '文件上传',
inputType: 'file',
allowBlank: false,
blankText: '请浏览图片'
//提交按钮处理方法
var btnsubmitclick = function () {
if (form.getForm().isValid()) {
form.getForm().submit({
waitTitle: "请稍候",
waitMsg: '正在上传...',
success: function (form, action) {
Ext.MessageBox.alert("提示", "上传成功！");
document.getElementById('imageshow').innerHTML = '&img style="width:150height:150px" src="' + action.result.path + '"/&';
failure: function () {
Ext.MessageBox.alert("提示", "上传失败！");
//重置按钮"点击时"处理方法
var btnresetclick = function () {
form.getForm().reset();
var form = new Ext.form.FormPanel({
frame: true,
fileUpload: true,
url: '/App_Ashx/Demo/Upload.ashx',
title: '表单标题',
style: 'margin:10px',
items: [imagebox, file],
buttons: [{
text: '保存',
handler: btnsubmitclick
text: '重置',
handler: btnresetclick
var win = new Ext.Window({
title: '窗口',
width: 476,
height: 374,
resizable: true,
modal: true,
closable: true,
maximizable: true,
minimizable: true,
buttonAlign: 'center',
items: form
win.show();
85 &/head&
89 (1)var imagebox = new Ext.BoxComponent():创建一个新的html标记。
官方解释如下：
This may then be added to a Container as a child item.
To create a BoxComponent based around a HTML element to be created at render time, use the autoEl config option which takes the form of a DomHelper specification:
93 (2) autoEl: {style: '',tag: 'div',id: 'imageshow', html: '暂无图片'}定义这个html标记的属性，如 标记为：div，id是多少等。
官方实例为：
var myImage = new Ext.BoxComponent({
tag: 'img',
src: '/images/my-image.jpg'
101 (3)var file = new Ext.form.TextField()：创建一个新的文件上传域。
102 (4)name: 'imgFile':名称，重要，因为service端要根据这个名称接收图片。
103 (5)inputType: 'file'：表单类型为文件类型。
104 (6)waitTitle: "请稍候",waitMsg: '正在上传...',：上传等待过程中的提示信息。
105 (7)document.getElementById('imageshow').innerHTML = '&img style="width:150height:150px" src="' + action.result.path + '"/&';这个是原生态的js，把imageshow的值换成图片。
107 &/body&
108 &/html&
其中与service交互用上传图片的 一般处理程序文件，源码如下：
/App_Ashx/Demo/Upload.ashx
2 using System.W
3 using System.IO;
4 using System.G
6 namespace HZYT.ExtJs.WebSite.App_Ashx.Demo
public class Upload : IHttpHandler
public void ProcessRequest(HttpContext context)
//虚拟目录，建议写在配置文件中
String strPath = "/Upload/Image/";
//文件本地目录
String dirPath = context.Server.MapPath(strPath);
//接收文件
HttpPostedFile imgFile = context.Request.Files["imgFile"];
//取出文件扩展名
String fileExt = Path.GetExtension(imgFile.FileName).ToLower();
//重新命名文件
String newFileName = DateTime.Now.ToString("yyyyMMddHHmmss_ffff", DateTimeFormatInfo.InvariantInfo) + fileE
//文件上传路径
String filePath = dirPath + newFileN
//保存文件
imgFile.SaveAs(filePath);
//客户端输出
context.Response.Write("{success:true,path:'" + strPath + newFileName + "'}");
public bool IsReusable
return false;
&2.效果如下：
(1)上传域不光可以上传图片，还要以上传其他文件。这里我们以图片为例。
(2)在实际开发中，我们还要对图片格式，大小等进行校验，这个示例测重于上传，没有加入任何校验。
阅读(...) 评论()在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
&img src="a.jpg"&
有这样一个图片，我想实现的是，当点击这个图片的时候，实现自动弹出的动作，弹出文件选择框，选完直接上传。
用纯js和html怎么实现?
用html和jquery怎么实现?
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
1、html+css实现
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Demo&/title&
&style type="text/css"&
opacity:0;
filter:alpha(opacity=0);
height: 95
width: 100
z-index: 9;
&input type="file"&
&img src="http://7u2nae.com1.z0.glb.clouddn.com/2.jpg"&
2、html+js(jq)
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Demo&/title&
&script type="text/javascript"&
function F_Open_dialog()
document.getElementById("btn_file").click();
&input type="file" id="btn_file" style="display:none"&
&img src="http://7u2nae.com1.z0.glb.clouddn.com/2.jpg" onclick="F_Open_dialog()"&
在IE、FF、GG现代浏览器测试过
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。博客访问： 56317
博文数量： 17
博客积分： 720
博客等级： 军士长
技术积分： 210
注册时间：
分类： Java 10:10:31
ExtJs的写法太灵活了，现在收集了关于Button点击事件的三种写法。今天做一个记录，以后备查。 首先创建一个JS文件写入以下代码： 1.点击默认为handler
Javascript代码
Ext.onReady(function(){ &&
&&&&&&&&&&& &&
&&&&&&&&&&&&new Ext.Button({ &&
&&&&&&&&&&&&&&&& text:"确定", &&
&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&& renderTo:Ext.getBody(), &&
&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&& minWidth:100, &&
&&&&&&&&&&&&&&&& id:"mybutton"&&
&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&& handler:function(){ &&
&&&&&&&&&&&&&&&&&&&& Ext.MessageBox.show({ &&
&&&&&&&&&&&&&&&&&&&&&&&& title: '提示' , &&
&&&&&&&&&&&&&&&&&&&&&&&& msg: '你点击了我！' , &&
&&&&&&&&&&&&&&&&&&&&&&&& buttons: Ext.MessageBox.OK , &&
&&&&&&&&&&&&&&&&&&&&&&&& fn: function(){} , &&
&&&&&&&&&&&&&&&&&&&&&&&& icon: Ext.MessageBox.INFO &&
&&&&&&&&&&&&&&&&&&&& }); &&
&&&&&&&&&&&&&&&& } &&
&&&&&&&& }); &&
});&&Ext.onReady(function(){
new Ext.Button({
text:"确定",
//将BUTTON画在BODY中
renderTo:Ext.getBody(),
//BUTTON的宽度
minWidth:100,
id:"mybutton"
//点击事件
handler:function(){
Ext.MessageBox.show({
title: '提示' ,
msg: '你点击了我！' ,
buttons: Ext.MessageBox.OK ,
fn: function(){} ,
icon: Ext.MessageBox.INFO
});2.添加监听方法，监听click事件。注意listeners不要少s
Javascript代码
Ext.onReady(function(){ &&
&&&&&&&&&&& &&
&&&&&&&&&&&&new Ext.Button({ &&
&&&&&&&&&&&&&&&& text:"确定"&&
&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&& renderTo:Ext.getBody(), &&
&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&& minWidth:100, &&
&&&&&&&&&&&&&&&& id:"mybutton", &&
&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&& listeners:{ &&
&&&&&&&&&&&&&&&&&&&&"click":function(){ &&
&&&&&&&&&&&&&&&&&&&&&&&& Ext.MessageBox.show({ &&
&&&&&&&&&&&&&&&&&&&&&&&&&&&& title: '提示' , &&
&&&&&&&&&&&&&&&&&&&&&&&&&&&& msg: '你点击了我！' , &&
&&&&&&&&&&&&&&&&&&&&&&&&&&&& buttons: Ext.MessageBox.OK , &&
&&&&&&&&&&&&&&&&&&&&&&&&&&&& fn: function(){} , &&
&&&&&&&&&&&&&&&&&&&&&&&&&&&& icon: Ext.MessageBox.INFO &&
&&&&&&&&&&&&&&&&&&&&&&&& }); &&
&&&&&&&&&&&&&&&&&&&& } &&
&&&&&&&&&&&&&&&& } &&
&&&&&&&& }); &&
});&&Ext.onReady(function(){
new Ext.Button({
text:"确定"
//将BUTTON画在BODY中
renderTo:Ext.getBody(),
//BUTTON的宽度
minWidth:100,
id:"mybutton",
//点击事件
listeners:{
"click":function(){
Ext.MessageBox.show({
title: '提示' ,
msg: '你点击了我！' ,
buttons: Ext.MessageBox.OK ,
fn: function(){} ,
icon: Ext.MessageBox.INFO
});3.如果自己开发了多个组件，需要交互，可能要将事件写在外面达到松耦合的目的。 JS中的代码如下：
Javascript代码
Ext.onReady(function(){ &&
&&&&&&&&&&& &&
&&&&&&&&&&&&new Ext.Button({ &&
&&&&&&&&&&&&&&&& text:"确定"&&
&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&& renderTo:Ext.getBody(), &&
&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&& minWidth:100, &&
&&&&&&&&&&&&&&&& id:"mybutton"&&
&&&&&&&& }); &&
});&&Ext.onReady(function(){
new Ext.Button({
text:"确定"
//将BUTTON画在BODY中
renderTo:Ext.getBody(),
//BUTTON的宽度
minWidth:100,
id:"mybutton"
});网页代码中如下：
Javascript代码
阅读(10461) | 评论(0) | 转发(0) |
给主人留下些什么吧！~~
请登录后评论。无刷新上传图片 可以实时预览 选择图片后即自动上传，没有上传按钮-freejs.net代码演示
&&&&无刷新上传图片 可以实时预览 选择图片后即自动上传，没有上传按钮()
无刷新上传图片 可以实时预览 选择图片后即自动上传，没有上传按钮
区别一般的上传，一般的上传要点击上传按钮，本例无按钮，选择图片后就自动上传
jquery.form.js版本为2.84
&type=&text/javascript&&src=&../../js/jquery-1.3.2.min.js&&&
&type=&text/javascript&&src=&scripts/jquery.form.js&&&
&type=&text/javascript&&&&
&$(document).ready(function()&{&&&
&&&&&&&&&&
&&&&&&&&&&&&$('#photoimg').live('change',&function()&&&&&&&&&&&&{&&&
&&&&&&&&&&&&&&&&&&&&&&&$(&#preview&).html('');&&
&&&&&&&&&&&&&&&&$(&#preview&).html('&src=&loader.gif&&alt=&Uploading....&');&&
&&&&&&&&&&&&$(&#imageform&).ajaxForm({&&
&&&&&&&&&&&&&&&&&&&&&&&&target:&'#preview'&&
&&&&&&&&}).submit();&&
&&&&&&&&&&
&&&&&&&&&&&&});&&
&&&&&&&&});&&&
&style=&width:600px&&&
&id=&imageform&&method=&post&&enctype=&multipart/form-data&&action='ajaximage.php'&&
上传&&type=&file&&name=&photoimg&&id=&photoimg&&&&
&id='preview'&&
&ajaximage.php
session_start();&&
$session_id='1';&&&
$path&=&&../upload/&;&&
&&&&$valid_formats&=&array(&jpg&,&&png&,&&gif&,&&bmp&);&&
&&&&if(isset($_POST)&and&$_SERVER['REQUEST_METHOD']&==&&POST&)&&
&&&&&&&&{&&
&&&&&&&&&&&&$name&=&$_FILES['photoimg']['name'];&&
&&&&&&&&&&&&$size&=&$_FILES['photoimg']['size'];&&
&&&&&&&&&&&&&&
&&&&&&&&&&&&if(strlen($name))&&
&&&&&&&&&&&&&&&&{&&
&&&&&&&&&&&&&&&&&&&&list($txt,&$ext)&=&explode(&.&,&$name);&&
&&&&&&&&&&&&&&&&&&&&if(in_array($ext,$valid_formats))&&
&&&&&&&&&&&&&&&&&&&&{&&
&&&&&&&&&&&&&&&&&&&&if($size&())&&
&&&&&&&&&&&&&&&&&&&&&&&&{&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&$actual_image_name&=&time().substr(str_replace(&&&,&&_&,&$txt),&5).&.&.$ext;&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&$tmp&=&$_FILES['photoimg']['tmp_name'];&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&if(move_uploaded_file($tmp,&$path.$actual_image_name))&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&{&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&echo&&&img&src='../upload/&.$actual_image_name.&'&&class='preview'&&;&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&}&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&else&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&echo&&failed&;&&
&&&&&&&&&&&&&&&&&&&&&&&&}&&
&&&&&&&&&&&&&&&&&&&&&&&&else&&
&&&&&&&&&&&&&&&&&&&&&&&&echo&&Image&file&size&max&1&MB&;&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&}&&
&&&&&&&&&&&&&&&&&&&&&&&&else&&
&&&&&&&&&&&&&&&&&&&&&&&&echo&&Invalid&file&format..&;&&&&&
&&&&&&&&&&&&&&&&}&&
&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&else&&
&&&&&&&&&&&&&&&&echo&&Please&select&image..!&;&&
&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&exit;&&
&&&&&&&&}&&
&原文地址: