加強的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