加强的HTML文件上传

时间 2019-11-10

标签加强 html 文件上传栏目 HTML 繁體版

原文原文链接

<!DOCTYPE html>
<html>
<head>
<title>
加强的HTML文件上传</title>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312"/>
</head>
<body>

<input type="file" id="images" name="images" multiple accept="image/*"/><br/>
<input type="button" value="显示文件" onClick="showDetails()"/>
<script type="text/javascript">
var showDetails=function(){
   var imageEle=document.getElementById('images');
   var fileList=imageEle.files;
   for(var i=0;i<fileList.length;i++){
    var file=fileList[i];
    div=document.createElement('div');
    div.innerHTML="第"+(i+1)+"文件的文件名是:"+file.name+"---文件类型是:"+file.type+"---文件大小是:"+file.size;
    document.body.appendChild(div);
    }
   }
</script> javascript

<input type="file" id="file"/><br/>
<progress id="pro" value="0"></progress>
<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;
//若是浏览器支持FileReader对象
if(FileReader){
reader=new FileReader();
}
//若是浏览器不支持FileReader对象
else{
alert("浏览器不支持FileReader对象");
}
var readText=function(){
//经过正则表达式验证该文件是不是文本文件
var isText="text\/\w+";
var fileList=document.getElementById('file').files;
//if(isText.test(fileList[0].type)){
  reader.readAsText(fileList[0],"utf-8");
  reader.onload=function(){
    document.getElementById('result').innerHTML=reader.result;
   }
  //}
//else{
  //alert("选择文件不是文本文件");
  //}
}
var readBinary=function(){
  var fileList=document.getElementById('file').files;
  var pro=document.getElementById('pro');
  pro.max=fileList[0].size;
  reader.readAsBinaryString(fileList[0]);
  reader.onprogress=function(evt){
   pro.value=evt.loaded;
   }
  reader.onload=function(){
   document.getElementById('result').innerHTML=reader.result;
   }
  }
      var readURL=function(){
    var fileList=document.getElementById('file').files;
    reader.readAsDataURL(fileList[0]);
    reader.onload=function(){
     document.getElementById('result').innerHTML=reader.result;
     }
    }
</script> html

<form action="add">
图书名:<input name="name" type="text" required/><br/>
图书ISBN:<input name="isbn" type="text" required pattern="\d{3}-\d-\d{3}-\d{5}"/><br/>
图书价格:<input name="price" type="number" min="20" max="50" step="5"/><br/>
<input type="submit" value="提交"/>
</form>

<form action="abc">
生日:<input name="birth" type="date" id="birth"/><br/>
电邮:<input id="email" name="email" type="email"/><br/>
<input type="submit" value="提交" onClick="return check()"/>
<script type="text/javascript">
var check=function(){
     return commonCheck("email","电邮","字段必须符合电邮格式");
}
var commonCheck=function(field,fieldName,tip){
  var targetEle=document.getElementById(field);
  if(targetEle.value.trim()==""){
   alert(fieldName+"不能为空!");
   return false;
   }
  else if(!targetEle.checkValidaty()){
   alert(fieldName+tip);
   return false;
   }
  }
</script>
</form>

<form action="asdf" >
图书名:<input name="a" type="text" required placeholder="input bookname"/><br/>
<input type="submit" value="提交" onclick="checkInput()"/>
</form>

<script style="text/javascript">
var checkInput=function(){
if(!document.getElementById('a').checkValidity()){
  document.getElementById('a').setCustomValidity("图书名不能为空!");
  }
}
</script>

<body>
</html> java