怎么利用HTML5实现图片文件异步上传

 
单击选择要上传的照片 
 
确认上传 

JS图片文件验证部分：

验证部分为：大小，是否已经选择，文件的类型 三个部分。第一个createObject方法为创建本地图片文件的预览路径，依次验证是否为空，文件类型以及文件大小，不满足条件则一律返回

false,满足以上3个条件后，在dom中生成图片预览，添加img元素，然后利用createObjectURL()方法获取预览路径。

代码：

代码如下:

//获取数据的URL地址 
function createObjectURL(blob) { 
if (window.URL) { 
return window.URL.createObjectURL(blob); 
} else if (window.webkitURL) { 
return window.webkitURL.createObjectURL(blob); 
} else { 
return null; 
} 
} 
//文件检测 
function checkFile() { 
//获取文件 
var file = $$("uploadFile").files[0]; 
//文件为空判断 
if (file === null || file === undefined) { 
alert("请选择您要上传的文件！"); 
$$("btnSelect").innerHTML = "单击选择要上传的照片"; 
return false; 
} 
//检测文件类型 
if(file.type.indexOf('image') === -1) { 
alert("请选择图片文件！"); 
return false; 
} 
//计算文件大小 
var size = Math.floor(file.size/1024); 
if (size > 5000) { 
alert("上传文件不得超过5M!"); 
return false; 
}; 
//添加预览图片 
$$("btnSelect").innerHTML = ""; 
};

JS Ajax请求部分：

说明：第一个监听文件选择更改事件，满足验证条件后则执行预览，第二个事件监听为监听单击btnSelect时弹出窗口的响应，下面的则是确认上传按钮的事件监听，开始发送Ajax请求。此处的createXHR()方法为创建XMLHttpRequest对象，代码我并未贴出，包括addEventListener()方法，这2个部分可以参考其他文章。

代码如下:

//监听图片URL地址更改 
addEventListener($$("uploadFile"), "change", function() { 
checkFile(); 
}); 
//监听单击文件选择按钮 
addEventListener($$("btnSelect"), "click", function() { 
//弹出文件选择框 
$$("uploadFile").click(); 
}); 
//监听确认上传按钮的点击事件 
addEventListener($$("btnConfirm"), "click", function(e) { 
if (checkFile()) { 
try { 
//执行上传操作var xhr = createXHR(); 
$$("maskLayer").style.display = "block"; 
xhr.open("post","/uploadPhoto.action", true); 
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); 
xhr.onreadystatechange = function() { 
if (xhr.readyState == 4) { 
var flag = xhr.responseText; 
if (flag == "success") { 
alert("图片上传成功！"); 
} else { 
alert("图片上传成功！"); 
}; 
$$("maskLayer").style.display = "none"; 
}; 
}; 
//表单数据 
var fd = new FormData(); 
fd.append("myPhoto", $$("uploadFile").files[0]); 
//执行发送 
xhr.send(fd); 
} catch (e) { 
console.log(e); 
} 
} 
});

“怎么利用HTML5实现图片文件异步上传”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！