js經過文件按鈕，上傳圖片

時間 2020-01-18

原文原文鏈接

js經過文件按鈕，上傳圖片:javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--multiple能夠同時上傳好多圖片，accept設置接收的文件類型；p_w_picpath/*全部類型的圖片都接收-->
<input type="file" multiple accept="p_w_picpath/*" id="file">
<input type="button" value="肯定" id="btn">
<div id="box"></div>
</body>
</html>
<script type="text/javascript">
var oFile=document.querySelector('#file');
var oBtn=document.querySelector('#btn');
var oDiv=document.querySelector('#box');

oBtn.onclick=function () {
    console.log(oFile.files);//FileList {0: File, 1: File, length: 2}
    var files=oFile.files;
    for (var i=0;i<files.length;i++){
        showImg(files[i])
    }
}
function showImg(file) {
    var name=file.name;
    var type=file.type;
    var size=Math.floor(file.size/1024);
    if(size>500){//判斷圖片的大小
        return
    }
    if(!/p_w_picpath\/\w+/.test(type)){
        return;
    }
    if(typeof FileReader!='undefined'){
        var reader=new FileReader;//建立文件讀取的對象
        reader.readAsDataURL(file);//將圖片以base64的編碼格式讀取出來
        reader.onload=function () {//讀取成功
            console.log(this.result); //this.result保存成功讀取的數據
            oDiv.innerHTML+="<img src='"+this.result+"'><p>圖片的名稱："+name+"</p>"
        }
    }
}
</script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。