.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
text-align: right;
opacity: 0;
filter: alpha(opacity=0);
opacity: 0;
background: none repeat scroll 0 0 transparent;
cursor: inherit;
display: block;
}
.alert {
padding: 8px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 4px;
}
米果生活APK发布文件上传
请选择上传的类型
商家端
客户端
选择
移除
取消
上传
$("#file-data").change(function(){
var filePath = $(this).val();
//$("#showMsg").html(filePath).show();
var arr=filePath.split('\\');
var fileName=arr[arr.length-1];
$("#showFilename").html(fileName);
var errorMsg = document.getElementById('errorMsg ');
var successMsg = document.getElementById('successMsg');
addClass(errorMsg,'hidden');
addClass(successMsg,'hidden');
})
$('#send').click(function () {
var fileData = document.getElementById('file-data').files[0];
var errorMsg = document.getElementById('errorMsg ');
var successMsg = document.getElementById('successMsg');
var submitForm = document.getElementById('submit-form');
var cancelSubmit = document.getElementById('cancel-submit');
var send = document.getElementById('send');
var to = document.getElementById('to');
//抓取页面的附件信息,实现上传
var fd = new FormData(submitForm);
fd.append("file_data",fileData);
fd.append('to',to.value);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
addClass(cancelSubmit,'hidden');
removeClass(send,'hidden');
var dataObj=eval("("+xhr.response+")");
if (dataObj.status == 200) {
//成功
addClass(errorMsg,'hidden');
removeClass(successMsg,'hidden');
successMsg.innerHTML = dataObj.msg;
} else {
//失败
removeClass(errorMsg,'hidden');
addClass(successMsg,'hidden');
errorMsg.innerHTML = dataObj.msg;
var showProgress = document.getElementById('showProgress');
showProgress.setAttribute('aria-valuenow','0');
showProgress.innerHTML = 0+"%";
showProgress.style.width=0+"%";
}
}
};
//侦查当前附件上传情况
xhr.upload.onprogress = function(evt){
//console.log(evt);
//侦查附件上传情况
//通过事件对象侦查
//该匿名函数表达式大概0.05-0.1秒执行一次
//console.log(evt);
//console.log(evt.loaded); //已经上传大小情况
//evt.total; 附件总大小
var loaded = evt.loaded;
var tot = evt.total;
var per = Math.floor(100*loaded/tot); //已经上传的百分比
var showProgress = document.getElementById('showProgress');
showProgress.setAttribute('aria-valuenow',per);
showProgress.innerHTML = per+"%";
showProgress.style.width=per+"%";
};
xhr.open("post","http://mglife.cchtw.com/test.php");
xhr.send(fd);
removeClass(cancelSubmit,'hidden');
addClass(send,'hidden');
});
function removeClass(element, className) {
if (hasClass(element, className)) {
var reg = new RegExp('(\\s|^)'+className+'(\\s|$)');
element.className = element.className.replace(reg,' ');
}
}
function hasClass(element, className) {
var reg = new RegExp('(\\s|^)'+className+'(\\s|$)');
return element.className.match(reg);
}
function addClass(element, className) {
if (!this.hasClass(element, className))
{
element.className += " "+className;
}
}
function reloadWindow()
{
window.location.reload();
}
一键复制
编辑
Web IDE
原始数据
按行查看
历史