<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>定义input type="file" 的样式</title>
<style type="text/css">
body{ font-size:14px;}
input{ vertical-align:middle; margin:0; padding:0}
.file-box{ position:relative;width:340px}
.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:80px; height:24px; filter:alpha(opacity:0);opacity: 0;width:260px }
</style>
<script>
var getFileUrl;
getFileUrl = function () {
var uri = {
url: ''
, filename: ''
, filetype: ''
, data: ''
};
var fileObj = document.getElementById('fileField');
var fileItems = fileObj.files;
if (fileItems.length > 0) {
var u = fileItems.item(0);
uri.data = u;
uri.url = window.URL.createObjectURL(u);
uri.filename = u.name;
}
alert("url: " + uri.url);
alert("filename: " + uri.filename);
// alert("filetype: "+uri.filetype);
alert("data: " + uri.data);
};
</script>
</head>
<body>
<div class="file-box">
<form action="" method="post" enctype="multipart/form-data">
<input type='text' name='textfield' id='textfield' class='txt' />
<input type='button' class='btn' value='浏览...' />
<input type="file" name="fileField" class="file" id="fileField" size="28" onchange="document.getElementById('textfield').value=this.value" />
<input type="submit" name="submit" class="btn" value="上传" onclick="getFileUrl()"/>
</form>
</div>
</body>
</html>
就是点击浏览会弹出音频选择框，点击上传，获取到uri.data，现在需求是省去文件选择的部分，直接通过后台代码给定文件名来获取到uri.data
