1 下拉框
<!DOCTYPE html>
<html>
<head lang="en">
<title></title>
<meta charset="utf-8">
</head>
<body>
<form>
单选
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select><tr>
多选
<select multiple="multiple">
<option>1</option>
<option>2</option>
<option>3</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>0</option>
</select><tr>
optiongroup
<select multiple="multiple">
<optgroup label="书籍1">
<option>1_1</option>
<option>1_2</option>
<option>1_3</option>
<option>1_4</option>
<option>1_5</option>
<option>1_6</option>
</optgroup>
<optgroup label="书籍2">
<option>2_1</option>
<option>2_2</option>
<option>2_3</option>
<option>2_4</option>
<option>2_5</option>
<option>2_6</option>
</optgroup>
</select>
</tr>
</form>
<script type="text/javascript">
</script>
</body>
</html>
2 表单属性
<!DOCTYPE html>
<html>
<head lang="en">
<title></title>
<meta charset="utf-8">
</head>
<body>
<form>
<!-- placeholder 属性指定提示内容 -->
<input type="text" placeholder="提示内容"><br/>
<!--输入与下拉同时使用-->
<input type="text" name="book" list="books" /><br/>
<!--通过指定formaction属性提交给不同的Action，不再需要通过JavaScript修改提交的Action-->
<input type="submit" formaction="action1">
<input type="submit" formaction="action2">
</form>
<datalist id="books">
<option>书籍_1</option>
<option>书籍_2</option>
<option>书籍_3</option>
<option>书籍_4</option>
</datalist>
<hr/>
多文件上传
<input type="file" multiple id="images" accept="image/*" />
<input type="button" value="显示文件" onclick="showDetails()" />
<script type="text/javascript">
var showDetails = function(){
var imageFile = document.getElementById("images");
var fileList = imageFile.files;
for(var i = 0;i < fileList.length;i++){
var file = fileList[i];
var div = document.createElement("div");
div.innerHTML = "第"+(i+1)+"个文件的文件名是："+file.name+"，该文件大小是："+file.size;
document.body.appendChild(div);
}
}
</script>
</body>
</html>
3 读取上传文件内容
<!DOCTYPE html>
<html>
<head lang="en">
<title></title>
<meta charset="utf-8">
</head>
<body>
浏览文件：<input type="file" id="file1" /><br/>
<div id="result"></div>
<input type="button" value="读取文本文件" onclick="readText();"><br/>
<input type="button" value="读取二进制文件" onclick="readBinary();"><br/>
<input type="button" value="以DataURL方式读取" onclick="readURL();"><br/>
<script type="text/javascript">
var reader = null;
if(FileReader){
reader = new FileReader();
}else{
alert("浏览器暂不支持FileReader对象");
}
var readText = function(){
reader.readAsText(document.getElementById("file1").files[0],"gbk");
reader.onload = function(){
document.getElementById("result").innerHTML = reader.result;
}
}
var readBinary = function(){
reader.readAsBinaryString(document.getElementById("file1").files[0]);
reader.onload = function(){
document.getElementById("result").innerHTML = reader.result;
}
}
var readURL = function(){
reader.readAsDataURL(document.getElementById("file1").files[0]);
reader.onload = function(){
document.getElementById("result").innerHTML = reader.result;
}
}
</script>
</body>
</html>
时间： 2024-10-12 21:11:55