js修改file控件的样式

<style type="text/css">
body
{
font-size: 14px;
}
input
{
vertical-align: middle;
margin: 0;
padding: 0;
}
.file-box
{
position: relative;
width: 340px;
padding-top: 20px;
}
.txt
{
height: 22px;
border: 1px solid #cdcdcd;
width: 180px;
}
.btn
{
background-color: #FFF;
border: 1px solid #CDCDCD;
height: 24px;
width: 70px;
}
.file
{
position: absolute;
top: 0;
right: 5px;
height: 24px;
filter: alpha(opacity:0);
opacity: 0;
width: 260px;
padding-top: 20px;
padding-left:100px;
}
</style>

<div class="file-box">
<form id="impor" method="post" action="">
选择文件:<input type=‘text‘ name=‘textfield‘ id=‘textfield‘ class=‘txt‘ />
<input type=‘button‘ class=‘btn‘ value=‘浏览...‘ />
<input type="file" name="FileData" class="file" accept="application/vnd.ms-excel"
id="fileField" size="28" onchange="document.getElementById(‘textfield‘).value=this.value" />
</form>
</div>

<div style=" padding-top:30px">
<a id="im" href="#" class="easyui-linkbutton" data-options="iconCls:‘icon-redo‘"
onclick="importExcel();">导入</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a id="ca" href="#"
class="easyui-linkbutton" data-options="iconCls:‘icon-cancel‘" onclick="cancelImport();">取消</a>
</div>

//ajax提交form表单:注意:必须引用jquery.form.js和jquery-1.8.0.min.js

function importExcel() {

$.messager.progress({ text: ‘文档正在上传,请稍后。。。‘ });
$("#impor").ajaxSubmit({
type: "POST",
url: actionImport + "Import",
success: function (data) {
json = eval("(" + data + ")");
if (json.success) {
$.messager.progress(‘close‘);
$.messager.alert("导入提示", "导入成功", ‘info‘);
return;

}
else {
$.messager.progress(‘close‘);
$.messager.alert("导入提示", "导入失败", ‘info‘);

return;
}
},
error: function (data) {

$.messager.alert(‘提取提示‘, "导入失败", ‘info‘);

}
}
);

}

时间: 2024-10-06 09:38:57

js修改file控件的样式的相关文章

js获取file控件的完整路径

1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html > 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; c

美化 input type=file控件

大家都知道input的type=file控件默认样式是不能修改的 可以通过一个小技巧处理下 html: <a href="javascript:;" class="go_upload">上传游戏安装包 <input class="upload_input" type="file" value="上传游戏安装包"/> </a> css: .go_upload{ positi

js操作select控件大全(包含新增、修改、删除、选中、清空、判断存在等)

原文:js操作select控件大全(包含新增.修改.删除.选中.清空.判断存在等) js操作select控件大全(包含新增.修改.删除.选中.清空.判断存在等) js 代码// 1.判断select选项中 是否存在Value="paraValue"的Item        function jsSelectIsExitItem(objSelect, objItemValue) {            var isExit = false;            for (var i

js动态添加file控件

<html></head><script language="javascript" type="text/ecmascript">//======================//功能:在表单中input file控件//参数:parentID---要插入input file控件的父元素ID// inputID----input file控件的ID//======================function createI

File控件杂谈

我们通常使用<input type='file'/>来实现网页中文件上传功能,用户可以通过点击file控件选择本地文件,当我们提交包含该控件的表单时,浏览器会向服务器发送用户选中的文件. 看上面的描述,file控件貌似挺强大的,事实上也是这样的.但实际开发中我们也可以挑出file控件的诸多问题: 1.我们可以通过value属性获取用户选择的文件的名称,但出于安全因素,该属性只读,所以也就无法指定默认值. 2.最让我们诟病的是,file控件在不同浏览器上长相迥异.这让我们开发者情何以堪?而且“选

File控件选择图片的时候在Html5下马上预览

页面HTML <div> <img src="@pic.Path" id="img" style="width:200px;height:200px;" /> <form id="form_photo" method="post" action="/N/SavePhoto?id=1"> <input style=" display:no

file控件,以及fileList对象。

file控件和filelist对象基础知识.   file控件: <input type = "file" id = "idName" multiple = "multiple"> document.getElementById("idName").file; //返回的是fileList对象. fileList对象的常用方法有name(文件名称).type(文件类型).size(文件大小).lastModefie

File杂谈——初识file控件

首先我说明下,这里介绍的file控件指的是网页中的FileUpload对象,也就是我们常见的<input type="file">.如果你不是想寻找这方面的东西,就可以绕道了. 功能 当我们需要在网页中实现文件上传功能的时候,file控件就可以大显身手了.HTML文档中每添加一个<input type="file">,实际就是创建了一个FileUpload实例对象.用户可以通过点击file控件选择本地文件,当我们提交包含该file控件的表单时

Windows UWP开发系列 – 控件默认样式

今天用一个Pivot控件的时候,想修改一下它的Header样式,却发现用Blend和VS无法导出它的默认样式了,导致无法下手,不知道是不是Blend的bug. 在网上搜了一下,在MSDN上还是找到了它的默认样式的,位置如下:https://msdn.microsoft.com/en-us/library/windows/apps/mt299142.aspx.其它的控件默认样式这个地址上也有,如果有需要的可以查询一下.