Web实现点击图片弹出上传文件窗口代码

通过一些代码可以简单的实现点击图片弹出上传文件窗口,省去使用fileupload标签,具体的实现如下,感兴趣的朋友可以参考下哈,希望对大家有所帮助

 

 

复制代码
代码如下:

<style>
.fileInputContainer{
height:256px;
background:url(upfile.png);
position:relative;
width: 256px;
}
.fileInput{
height:256px;
overflow: hidden;
font-size: 300px;
position:absolute;
right:0;
top:0;
opacity: 0;
filter:alpha(opacity=0);
cursor:pointer;
}
</style>
<div class="fileInputContainer">
<input class="fileInput" type="file" name="" id="" />
</div>

时间: 2024-10-03 20:55:03

Web实现点击图片弹出上传文件窗口代码的相关文章

jsp中点击图片弹出文件上传界面及预览功能的实现_JSP编程

花了两天时间琢磨一下图片预览的功能 任务需求如下: 1:jsp页面中有一个图片(pic_1) 2:点击图片弹出类似于资源管理器的界面 3:选择完某一个图片之后在pic_1处预览 我在IE8上试验下面这段代码,可以实现上述功能,没有在别的浏览器中测试,如果各位朋友知道多种浏览器的支持方法,请赐教,共同学习,谢谢. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:

PHP上传文件的代码

动态网站开发中,常用的PHP上传文件的代码实例. 以下为引用的内容: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>网页教学网(webjx.com)文件上传实例</title> </head> <body> <form enctype="

Ajax表单异步上传文件实例代码(包括文件域)_AJAX相关

1.起因 做前台页面时,需要调用WebAPI的Post请求,发送一些字段和文件(相当于把表单通过ajax异步发送出去,得到返回结果),然后得到返回值判断是否成功. 2.尝试 先是尝试了一下 "jQuery Form Plugin" ,这玩意就是的巨大的坑,实现他和jquery1.9.2兼容性就不是太好,好不容易把$.browser的问题解决了,发现用他上传文件得不到返回值. $("#view").submit( $("#view").ajaxSu

一个PHP无刷新上传文件程序代码

一个最原始最简单的iframe上传例子: 前台上传页面index.html,主要是一个表单与一个js回调函数.上传文件时,form表单的method. enctype属性必须和下面代码一样.然后将target的值设为iframe的name,这样就可以实现无刷新上传文件.  代码如下 复制代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml

Ajax异步上传文件实例代码分享_AJAX相关

非常不多说,直接给大家上干货,写的不好还请见谅. 具体代码如下所示: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <script src="~/Scripts/jquery-1.8.2.min.js"></script> <title>Ind

Ajax表单异步上传文件实例代码(包括文件域)

1.起因 做前台页面时,需要调用WebAPI的Post请求,发送一些字段和文件(相当于把表单通过ajax异步发送出去,得到返回结果),然后得到返回值判断是否成功. 2.尝试 先是尝试了一下 "jQuery Form Plugin" ,这玩意就是的巨大的坑,实现他和jquery1.9.2兼容性就不是太好,好不容易把$.browser的问题解决了,发现用他上传文件得不到返回值. $("#view").submit( $("#view").ajaxSu

Ajax异步上传文件实例代码分享

非常不多说,直接给大家上干货,写的不好还请见谅. 具体代码如下所示: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <script src="~/Scripts/jquery-1.8.2.min.js"></script> <title>Ind

ExtJs 4.2.1 点击按钮弹出表单的窗口

初学ExtJs,做项目的时候想做一个这样的效果:点击按钮弹出对话框,之前一直是使用EasyUi来做的, EasyUi里有Dialog,用起来很方便,但是现在转移到ExtJs上后,发现没有Dialog这样的框架,在网上找了没有找到这样的 控件,于是搜索一下关于ExtJs 对话框的实现方法,现在将实现结果贴出来,如果有什么想法,希望多多留言! Ext.get("btn_edit").on("click", function () { var form = new Ext

javaweb web java-提交文本表单与上传文件的表单有什么不同?

问题描述 提交文本表单与上传文件的表单有什么不同? 提交文本表单与上传文件的表单有什么不同?提交文本表单与上传文件的表单有什么不同? 解决方案 不一样,文件的需要传递流数据,不是普通文本 解决方案二: 传文件需要 multipart/form-data 解决方案三: 有文件表单需要增加enctype="multipart/form-data",不包含可以去掉,默认为application/x-www-form-urlencoded