Ajax文件上传组件-创新互联

项目中经常需要文件上传，每次都要重复造轮子，所以决定将文件上传做成组件，方便使用。效果如图：

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：空间域名、雅安服务器托管、营销软件、网站建设、西秀网站维护、网站推广。

Ajax文件上传组件

自我感觉效果还是可以的，而且使用的代码也变得十分清晰，前端的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类。

首先先看一下该组件的结构图：

Ajax文件上传组件

根据结构图编写代码：

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']));

?>

说明：后台代码对中文名称文件没有做操作，大家可以用自己喜欢的语言做后台代码。

附件：http://down.51cto.com/data/2366430

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

网站标题：Ajax文件上传组件-创新互联
转载源于：https://www.cdcxhl.com/article48/cseohp.html

成都网站建设公司_创新互联，为您提供手机网站建设、Google、品牌网站设计、网站营销、网站内链、企业建站

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容