项目中经常需要文件上传,每次都要重复造轮子,所以决定将文件上传做成组件,方便使用。效果如图:
自我感觉效果还是可以的,而且使用的代码也变得十分清晰,前端的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进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。