Javascript美化input=file文件上传控件

2016-02-22    编辑:bluestart     点击(
现在高版本的浏览中如果我们使用的是直接input=file我们会发现非常的难看了,但我们可以进行模仿美化它了,下面有两个简单的例子我们一起看看。

【实例名称】
JS实现文件上传一次性完成
【实例描述】
默认的HTML控件file可以实现文件的上传,但必须经过选择文件和单击上传按钮两个步骤。本例学习如何实现一步上传文件的操作。

例子

 代码如下 复制代码

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>标题页-学无忧(www.111cn.net)</title>
</head>
<body>
<input id="myfile" type="file" style="display:none"
onpropertychange="document.getElementById('filename').
innerText=this.value" />
<a href="javascript:document.getElementById('myfile').click()">
浏览...</a>
<br />
<span id="filename"></span>
</body>
</html>

效果

 

Javascript美化input=file文件上传控件

【难点剖析】
本例将file控件隐藏,然后使用a标签的“href”属性调用file控件的“click”方法实现文件的选择。当选择文件后,触发file控件的“onpropertychange”事件,在其中完成上传文件名的获取。

但发现兼容性不好

 代码如下 复制代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
._box
{
position: relative;
width: 119px;
height: 37px;
background-color: #53AD3F;
background-image: url(images/bg.png);
background-repeat: no-repeat;
background-position: 0 0;
background-attachment: scroll;
line-height: 37px;
text-align: center;
color: white;
cursor: pointer;
overflow: hidden;
z-index: 1;
}
._box input
{
position: absolute;
width: 119px;
height: 40px;
line-height: 40px;
font-size: 23px;
opacity: 0;
filter: "alpha(opacity=0)";
filter: alpha(opacity=0);
-moz-opacity: 0;
left: -5px;
top: -2px;
cursor: pointer;
z-index: 2;
}
</style>
<title>js 实现 input file 文件上传 /></title>
</head>
<body>
<form id="form1" runat="server" method="post" enctype="multipart/form-data">
<div>
<div class="_box">
<input type="file" name="_f" id="_f" />
选择图片
</div>
</div>
</form>
</body>
</html>

下面再推荐一个jquery文件上传控件非常好用

 
Javascript美化input=file文件上传控件
 
Javascript美化input=file文件上传控件

jQuery插件AjaxFileUpload可以实现ajax文件上传,需要jQuery库文件和ajaxfileupload.js

一.引入部分

 代码如下 复制代码
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ajaxfileupload.js"></script>

 二.<body>部分

 代码如下 复制代码

  <img src="images/nophoto.jpg" id="picture" width="160px" height="200px"/>
  <input type="file" id="touxiang" name="photo" size="10" onchange="changImg()"/>

注意:使用AjaxFileUpload插件上传文件可不需要form

 代码如下 复制代码

 <form name="form" action="" method="POST" enctype="multipart/form-data">

       ……相关html代码……

</form>

三.js部分

 代码如下 复制代码

 function changImg(){

    $.ajaxFileUpload
     (
        {
 url:'XXX.action', //上传文件的服务端
 secureuri:false,  //是否启用安全提交
 dataType: 'text',   //数据类型 
 fileElementId:'touxiang', //表示文件域ID

 //提交成功后处理函数      html为返回值,status为执行的状态
 success: function(html,status) 
 {

 },

 //提交失败处理函数
 error: function (html,status,e)
 {
    
 }
      }
  )

 }

四.原理

     利用jQuery的选择器获得file文件上传框中的文件路径值,然后动态的创建一个iframe,并在里面建立一个新的file 文件框,提供post方式提交到后台。最后,返回结果到前台。