溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
項目中經常需要文件上傳，每次都要重復造輪子，所以決定將文件上傳做成組件，方便使用。效果如圖：
自我感覺效果還是可以的，而且使用的代碼也變得十分清晰，前端的html代碼非常簡潔，如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link href = "fileuploader.css" rel="stylesheet"/>
<script src = "fileuploader.js"></script>
</head>
<body>
<div id = "p_w_picpathList"></div>
</body>
<script>
var fileWidget = null;
(function(){
var p_w_picpathList = document.getElementById("p_w_picpathList");
fileWidget = new FileWidgt(p_w_picpathList);
fileWidget.newPlaceholder({url:"http://127.0.0.1:8000/App/upload.php"});
})();
</script>
</html> 前端代碼只需新建一個FileWidgt類，然后調用newPlaceholder方法即可，所有復雜的操作都封裝到FileWidgt類中。接下來主要分析FileWidgt類。
首先先看一下該組件的結構圖：
根據結構圖編寫代碼：
function FileWidgt(ui){
this.ui = ui;
this.data = "";//記錄選中且已經上傳并返回的結果
this.files = [];//用于記錄已選中的文件，防止重復上傳
}
FileWidgt.prototype.newPlaceholder = function(s){
var fileholder = document.createElement("input");//內部隱藏的輸入框
fileholder.setAttribute("type","file");
fileholder.setAttribute("name","file");
var placeholder = document.createElement("div");//顯示圖片的容器
placeholder.setAttribute("class","p_w_picpath-item space");
var closeButton = document.createElement('div');//關閉按鈕
closeButton.setAttribute("class","p_w_picpath-close");
closeButton.innerHTML = 'X';
placeholder.appendChild(fileholder);
placeholder.appendChild(closeButton);
this.ui.append(placeholder);//顯示圖片的容器加入最外層容器
var that = this;
closeButton.addEventListener('click',function(event){
event.stopPropagation();
event.cancelBubble = true;
setTimeout(function(){
that.data = that.data.replace(placeholder.getAttribute("p_w_picpath-data"),"");//data中去除該關閉的圖片結果
that.data = that.data.replace(",,",",");
if(that.data.length > 0 && that.data.charAt(0) == ","){
that.data = that.data.substring(1);
}else if(that.data.length > 0 && that.data.charAt(that.data.length - 1) == ","){
that.data = that.data.substring(0,that.data.length - 1);
}
that.ui.removeChild(placeholder);//去除關閉的顯示容器
},0);
},false);
placeholder.addEventListener("click",fileholder.onclick,false);//點擊調用文件上傳
fileholder.addEventListener("change",function(e){//選中文件后上傳圖片
if(that.files.join(",").indexOf(fileholder.value) == -1){
var formData = new FormData();
formData.append("file",fileholder.files[0]);
var xhr = null;
if(window.ActiveXObject){
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}else{
xhr = new XMLHttpRequest();
}
xhr.open(s.method||'POST',s.url,true);
xhr.onreadystatechange = function(){//Ajax文件上傳返回
if(xhr.readyState == 4 && xhr.status == 200){
var filename = JSON.parse(xhr.responseText).filename;
placeholder.style.backgroundImage = 'url('+filename+')';//替換當前添加圖片為上傳文件的圖片
if(placeholder.getAttribute("p_w_picpath-data") == undefined ||placeholder.getAttribute("p_w_picpath-data") == ""){
placeholder.classList.remove('space');
placeholder.removeEventListener("click",fileholder.onclick,false);
placeholder.removeChild(fileholder);
that.newPlaceholder(s);//新建一個添加的圖標
}
//給data值添加當前上傳的文件地址
if(that.data == ""){
that.data = filename;
placeholder.setAttribute("p_w_picpath-data",filename);
}else{
that.data += "," + filename;
placeholder.setAttribute("p_w_picpath-data",filename);
}
}
}
xhr.send(formData);
}
},false);
}
FileWidgt.prototype.getData = function(){
return this.data;
} 樣式代碼：
.p_w_picpath-item {
width: 65px;
height: 65px;
background-p_w_picpath: url(img/iconfont-tianjia.png);
background-size: 100% 100%;
display: inline-block;
position: relative;
border-radius: 5px;
margin-right: 10px;
margin-bottom: 10px;
border: solid 1px #e8e8e8;
}
.p_w_picpath-item input[type="file"] {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
z-index: 0;
}
.p_w_picpath-item .p_w_picpath-close {
position: absolute;
display: inline-block;
right: -6px;
top: -6px;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
border-radius: 12px;
background-color: #FF5053;
color: #f3f3f3;
border: solid 1px #FF5053;
font-size: 9px;
font-weight: 200;
z-index: 1;
}
.p_w_picpath-item.space .p_w_picpath-close {
display: none;
} 后臺代碼：
<?php
header("Access-Control-Allow-Origin:*");
file_put_contents("log.log",$_FILES['file']['name']);
move_uploaded_file($_FILES['file']['tmp_name'],'upload/'.$_FILES['file']['name']);
echo json_encode(array("filename"=>'http://'.$_SERVER["REMOTE_ADDR"].':'.$_SERVER["SERVER_PORT"].'/App/upload/'.$_FILES['file']['name']));
?>說明：后臺代碼對中文名稱文件沒有做操作，大家可以用自己喜歡的語言做后臺代碼。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
