前端怎么修改input file的默认样式

前端怎么修改input file的默认样式,第1张

html文件:

<div class="fileBox">

<div class="fileName"></div>

<button class="fileButton">选择文件</button>

<input type="file" class="file1">

</div>

<div class="fileBox">

<div class="fileName"></div>

<button class="fileButton">选择文件</button>

<input type="file" class="file2">

</div>

css文件:

fileBox{

position: relative;

display: inline-block;

}

fileButton{

display: inline-block;

width: 80px;

height: 34px;

line-height: 34px;

background: #FFA837;

border-radius: 0px 4px 4px 0px;

text-align: center;

color: #fff;

vertical-align: top;

}

file1,file2{

width: 80px;

height: 34px;

position: absolute;

top: 0px;

right: 0px;

opacity: 0;

filter:Alpha(opacity=0); /透明度兼容IE8/

vertical-align: top;

}

fileName{

display: inline-block;

width: 150px;

height: 34px;

line-height: 34px;

padding:0px 5px;

overflow: hidden;

text-overflow:ellipsis;

white-space: nowrap;

border: 1px solid #eee;

vertical-align: top;

float: left;

}

js文件:

function upFile(fileX){

var path;

var fileName;

var file=fileX;

var fileFrame=fileXparent("fileBox")children("fileName");

path=fileval();

//path为获取的<input type="file">的文件名或文件路径

//火狐获取的是文件名,所以pos=-1,chrome和IE获取的是文件路径

if(path!=''){

var pos1 = pathlastIndexOf('/');

var pos2 = pathlastIndexOf('\\');

var pos = Mathmax(pos1, pos2)

if( pos<0 ){

fileName =path;

fileFrametext(fileName);

fileFrameattr("title",fileName);

}

else{

fileName=pathsubstring(pos+1);//截取从pos+1索引到末尾

fileFrametext(fileName);

fileFrameattr("title",fileName);

}

}

}

调用:

$("file1")change(function(){

upFile($(this));

});

$("file2")change(function(){

upFile($(this));

});

以后只要调用upFile()就可以了

兼容:IE8+,firefox,chrome

$(this)parents("ul")children("lilast")before('<li class="filebox" ><input name="N' + ($("tipbox_tp ul li")length + 1) + '" type="file"/><p>开始上传</p></li>');

根据length去设置name

绑定onChange事件就行了,filebox继承自textbox,textbox的事件都可以作用于filebox

<input class="easyui-filebox" name="file1" data-options="onChange:function(){alert('change file')},prompt:'Choose a file'" style="width:100%">

或者:

<input class="easyui-filebox" name="file1" data-options="onChange:function(){alert($(this)filebox('getValue'))},prompt:'Choose a file'" style="width:100%"> 

《MVC + EasyUI 》——利用Ajax给Action传值

我用的方法是documentgetElementById('filebox_file_id_1')files[0];

filebox_file_id_1 这个ID 是easyui 自己创建的input 便签 这里面是真正保存文件的地方

如果创建了多个filebox  那么后面的ID 就是filebox_file_id_2,filebox_file_id_3

拿到文件之后,我想用ajax 方式去上传这个文件就用创建一个表单的形式 ,然后附加文件进去,再上传:

var fd = new FormData(); //创建表单

fdappend("rwFile", mypic); //附加文件到表单

然后 创建>

var xhr = new XML>

xhronreadystatechange = function () {

if (xhrreadyState == 4 ){

//发送完成

if(xhrstatus == 200){

//成功之后 干什么

}else{

//错误之后 干什么

}

}

最后发送>

xhropen("post", "url", false); //post方式, 目标地址, 非异步形式

xhrsend(fd); //发送表单

数据库与文本文件返回数据的方法不同如果把文本文件比作一个Textbox 的话,那么数据库更像是一个ListBox使用文本文件时我们需要从整个Textbox中取出有用的信息,并进行处理,而Listbox则可以根据需要返回特定的某一项

由于VB本身并不带有可以访问数据库的类,所以我们需要引用一个包含能访问数据库的类来使用数据库这里我们采用ADODB,相比DAO和能访问数据库的API来说,它比DAO更灵活,更强大;而比起API,它更简单易用,更适合初学者而Access数据库比起SQL,也相对简单了很多,且能够满足中小型应用程序的需要,所以我们在使用数据库时,选择了Access

就像使用文本文件来存储数据一样,我们需要先设计好数据结构,只不过在设计Access数据库的结构时,我们需要用到其它的程序来进行详细的规划建议采用的程序是office中的Access或VB自带的VISDATA

当数据库设计好了以后,我们可以开始"数据库编程"了

首先,我们需要引用ADO具体的方法是,在"工程" -- "引用" 中,找到"Microsoft ActiveX Data Object Library",这里的""是指的时ADO的版本号,一般来说,应用程序或ActiveX控件都具有向下兼容性,所以我们尽可能选择比较新的版本以确保程序在能识别旧版本Access的同时,也能识别较新版本的Access

然后我们需要在程序中创建一个对象就好比我们在窗体上添加一个FileBox才能看到文件名一样,只有创建了ADO对象,我们才能够访问数据库常用的对象有两个,Connection和Recordset

创建这两个对象的具体方法是:

1在引用后,使用New关键字,如

Private Conn As New ADODBConnection

Private Reco As New ADODBRecordset

2在没引用时,用CreateObject创建对象:

Dim Conn,Reco

Set Conn = CreateObject("ADODBConnection")

Set Reco = CreateObject("ADODBRecordset")

创建了对象之后,下一步我们要做的就是打开数据库了

先看下面的代码,可以成功的打开数据库

Connopen "Provider=MicrosoftJetOLEDB40;Data Source=D:\Mainmdb"

这句代码打开了D盘中的Mainmdb这个数据库

ConnectionOpen方法的第一个参数是连接代码,它将传递给系统的数据库引擎前半部分"Provider=MicrosoftJetOLEDB40",它表示了数据库的类型不同的数据库可能会不同后半句"Source=d:\mainmdb"它表示了数据库所在的绝对路径

打开数据库之后,还要打开表假如数据库中有一个表,表名为"Users",字段有两个,一个为用户名,一个为密码那么看以下代码

1想返回"Users"中,[用户名]为"去年烟花"的[密码]

Recordsetopen "Select 密码 From Users Where 用户名='去年烟花'",Connection,1,1

之后我们就可以把用户输入的密码进行比较,看是否允许登录

If Recordseteof and Recordsetbof then

Msgbox "用户不存在!",16

Else

If PassWord =Recordset("密码")value then

msgbox "登录成功!",64

Else

msgbox "密码错误!",32

End If

End If

RecordsetClose

2假设Admin已经成功登录系统,我们想把所有的用户名和密码都显示出来

Recordsetopen "Select From Users",Connection,1,1

这时,表已经被打开,我们就用以下代码把它显示出来

Do whlie Not Recordseteof

Print "用户名: " & Recordset("用户名")value & "密码: " & Recordset("密码")value

RecordsetMoveNext

Loop

RecordsetClose

由以上代码示例可以看出,打开表时,可以只打开其中的一个字段,也可以打开所有第一个参数是SQL语句

Select [字段名] From 表名 [Where 条件]

这里的条件可以省略且字段名也可以用""来代替所有字段

需要注意的是,如果你用(1)中的方法打开,那么(2)后面显示的代码就不能再用在(1)中因为(1)里并没有打开[用户名]字段,所以这一句Recordset("密码")就没有值存在,还有可能出错

后面的条件,可以用"="、">"、"<"等运算符比如 "Where ID > 32"(这里假设[ID]为数字型)

这是打开的部分第二个很重要的部分就是查询记录

数据库它并不是把所有记录全部放到一个变量中备用的而是以"当前记录"的形式来返回一个值所以我们想从中找到有用的信息,就必须要对信息进行定位/筛选

定位:

移动到下一条 RecordsetMoveNext

移动到上一条 RecordsetMovePrevious

移动到最后一条 RecordsetMoveLast

移动到第一条 RecordsetMoveFrist

移动到某一条 RecordsetMove Number

筛选:

RecordsetFind "条件"

如:[用方法(2)打开表之后]

Private Sub Command1_Click()

RecordsetFind "用户名=" & "text1text"

If RecordsetEof <> True Then

Msgbox "该用户的密码是:" & Recordset("密码")value,64

Else

Msgbox "未找到该用户的资料!",16

End If

End Sub

MoveNext 只有当Eof不为True时,才可用,否则发生错误而MovePrevious刚是Bof不为True时

而只要Eof 和 Bof中有一个不为真时,也就是说只要有一条记录时,它就可以使用

Find 方法中的条件和Open时的第一个参数中的条件表述方法是完全一致的当在已打开的记录集中,找不到该记录时,Eof为True找到则当前的值就是符合条件的记录

第三个部分就是添加/修改记录

修改记录很简单,先按以上的方法找到相关记录之后,给记录赋值就可以了

比如:[(修改密码)按方法(1)打开表之后]

Recordset("密码")value = "123456"

RecordsetUpdata

需要注意的就是,在修改完成后,要调用Updata方法,这样修改才能生效

而添加记录则可以用以下代码来实现:

Recordsetaddnew

Recordset("用户名")value = "Admin"

Recordset("密码")value = "Admin"

RecordsetUpdata

这里,先要调用Addnew方法,增加一条新记录,然后对这个新记录中的各字段赋值,最后再调用Updata方法

到这里就差不多了,最后说一下上面提到的几个方法

RecordsetOpen SQL语句,数据源,游标类型,打开方法

SQL语句不用说了,就是Select那啥的,目的就是按要求从表中返回数据

数据源就是一个打开之后的Connection对象

去他妈的游标类型,填1就可以了 [偷笑ing]

打开方法对应了几个常数,具体哪几个可以从对象浏览器里看

对应数值的意义:

1 只读 2 独占 3 可写 4 自已可写,别人可读

Connectionopen 连接代码,服务器用户名,密码

这里的连接代码就不在多说了,服务器用户名,密码只有在连接远程数据库时才用到

win8下运行软件老是报错,说未将对象引用设置到对象的实例的解决方法如下:

方案一:根据以下步骤确认security center服务的设置

1、“开始”-“运行”中输入servicesmsc并回车,找到Security Center,双击,启动类型选择“自动”,服务状态选择“启动”;

2、如果此时启动失败,继续按照上述同样方法启用Remote Procedure Call(RPC)以及Windows Management Instrumentation这两个服务后,再次尝试启动Security Center服务。

方案二:禁用杀毒软件以及防火墙

1、暂时禁用计算机中的安全类防护软件以及第三方的防火墙程序(例如:金山毒霸、360、优化大师等),然后启用Security Center服务;

2、此时依然无法启动,暂时将杀毒软件卸载,再启动安全中心服务。

《莎士比亚诗选》百度网盘txt 最新全集下载

6ipf

《莎士比亚诗选》是2012年1月时代文艺出版社出版的图书,作者是柳鸣九。

第一种:用basePath方式,但是前提必须加个。第二种:直接用路径方式,用src="/easyui_demo/js/jquery-easyui-143/jqueryminjs代替了。

绝对路径是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。完整的描述文件位置的路径就是绝对路径,以web站点根目录为参考基础的目录路径。

以上就是关于前端怎么修改input file的默认样式全部的内容,包括:前端怎么修改input file的默认样式、jquery 给input name 动态赋值、怎么用jquery设置easyui-filebox的值等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9737206.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-01
下一篇 2023-05-01

发表评论

登录后才能评论

评论列表(0条)

保存