& lt; html>
& lt; head>
& lt; meta http-equiv=" - type ",内容=" text/html;, charset=gb2312”比;=& lt; link href “fileuploader.css”, rel="样式表"/比;=& lt; script src “fileuploader.js祝辞& lt;/script>
& lt;/head>
& lt; body>=& lt; div id “p_w_picpathList祝辞& lt;/div>
& lt;/body>
& lt; script>
var fileWidget =,空;
(函数(){
var p_w_picpathList =, . getelementbyid (“p_w_picpathList”);
时间=fileWidget new FileWidgt (p_w_picpathList);
fileWidget.newPlaceholder ({url: http://127.0.0.1:8000/App/upload.php "});
}) ();
& lt;/script>
& lt;/html> ,,,
function FileWidgt (ui) {
时间=this.ui 界面;
this.data =,””;//记录选中且已经上传并返回的结果
时间=this.files [];//用于记录已选中的文件,防止重复上传
}
时间=FileWidgt.prototype.newPlaceholder 函数(s) {
var fileholder =, document.createElement("输入");//内部隐藏的输入框
fileholder.setAttribute(“类型”,“文件”);
fileholder.setAttribute(“名字”,“文件”);
var placeholder =, document.createElement (" div ");//显示图片的容器
placeholder.setAttribute(“阶级”、“p_w_picpath-item 空间”);
var closeButton =, document.createElement (div);//关闭按钮
closeButton.setAttribute(“类”、“p_w_picpath-close”);
时间=closeButton.innerHTML “X”;
placeholder.appendChild (fileholder);
placeholder.appendChild (closeButton);
this.ui.append(占位符);//显示图片的容器加入最外层容器
var that =,;
closeButton.addEventListener(“点击”,函数(事件){
event.stopPropagation ();
时间=event.cancelBubble 真实;
setTimeout(函数(){
时间=that.data that.data.replace (placeholder.getAttribute (“p_w_picpath-data”), " ");//数据中去除该关闭的图片结果
时间=that.data that.data.replace (“,”,”、“);
如果(that.data.length 祝辞,0,,,,that.data.charAt (0),==, ", ") {
时间=that.data that.data.substring (1);
}else 如果(that.data.length 祝辞,0,,,,that.data.charAt (that.data.length 安康;1),==,","){
时间=that.data that.data.substring (0, that.data.length 作用;1);
}
that.ui.removeChild(占位符);//去除关闭的显示容器
},0);
},假);
placeholder.addEventListener(“点击”,fileholder.onclick假);//点击调用文件上传
fileholder.addEventListener(“改变”,函数(e){//选中文件后上传图片
如果(that.files.join (", ") .indexOf (fileholder.value),==, 1) {
var formData =, new FormData ();
formData.append(“文件”,fileholder.files [0]);
var xhr =,空;
如果(window.ActiveXObject) {
时间=xhr new ActiveXObject (“Microsoft.XMLHTTP”);
其他}{
时间=xhr new XMLHttpRequest ();
}
xhr.open (s.method | |“POST”, s.url, true);
xhr.onreadystatechange ,=, function () {//Ajax文件上传返回
如果(==xhr.readyState 4,,,, xhr.status ==, 200) {
var filename =, JSON.parse (xhr.responseText) .filename;
placeholder.style.backgroundImage =, url(' +文件名+ ')',//替换当前添加图片为上传文件的图片
如果(placeholder.getAttribute (“p_w_picpath-data”),==, undefined | | placeholder.getAttribute (“p_w_picpath-data”),==, " ") {
placeholder.classList.remove(空间);
placeholder.removeEventListener(“点击”,fileholder.onclick假);
placeholder.removeChild (fileholder);
that.newPlaceholder(年代);//新建一个添加的图标
}//给数据值添加当前上传的文件地址
如果(that.data ==, " ") {
that.data =,文件名;
placeholder.setAttribute (“p_w_picpath-data”,文件名);
其他}{
+=that.data 拖延”、“,+,文件名;
placeholder.setAttribute (“p_w_picpath-data”,文件名);
}
}
}
xhr.send (formData);
}
},假);
}
时间=FileWidgt.prototype.getData 函数(){
return this.data;
}, ,
.p_w_picpath-item {
宽度:65 px;
身高:65 px;
background-p_w_picpath: url (img/iconfont-tianjia.png);
background-size: 100%, 100%;
显示:inline-block;
位置:,相对;
border - radius: 5 px;
margin-right: 10 px;
margin-bottom: 10 px;
边界:solid 1 px # e8e8e8;
}
.p_w_picpath-item 输入(type="文件"),{
位置:绝对的;
左:,0 px;
上图:,0 px;
宽度:100%;
高度:100%;
透明度:0;
光标:指针;
z - index: 0;
}
.p_w_picpath-item .p_w_picpath-close {
位置:绝对的;
显示:inline-block;
右:,6 px;
上图:,6 px;
宽度:20 px;
高度:20 px;
text-align:中心;
行高:20 px;
border - radius: 12 px;
background - color: # FF5053;
颜色:# f3f3f3;
边界:solid 1 px # FF5053;
字体大小:9 px;
粗细:200;
z - index: 1;
}
.p_w_picpath-item.space .p_w_picpath-close {
显示:没有;
}
