通过ajax异步加载实现表单异步提交、文件异步上传
通过ajax异步加载实现表单异步提交、文件异步上传。
实现原理就是把上传文件转base64字符串数据进行文件上传。
源码
demo.html 代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML文件上传(三) ajax异步上传 文件base64上传</title>
<script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<input type="file" id="imagesfile" hidefocus style="display:none">
<img src="./photo_icon.png" width="100" id="imgtmp" onclick="imagesfile.click()" alt="选择文件" />
<button id="sub_btn" >上传</button>
</body>
</html>
<script>
window.onload = function(){
var imagesfile = document.getElementById("imagesfile");
imagesfile.onchange = function () {
var file = imagesfile.files[0];
//判断文件大小不能超过10M ，免去服务器的压力。
if (file.size > 10 * 1024 * 1024) {
alert("上传文件必须 < 10Mb！");
return false;
}
// 获取文件
var reader = new FileReader(); // 实例化
reader.readAsDataURL(file); // 加载
reader.onload = function () { // 异步加载完成
//console.log(reader);
var base64 = reader.result; // 获取 base64 DataURL
var imgDom = document.getElementById("imgtmp");
imgDom.src = base64;
/**图片压缩**/
imgDom.onload = function () {
imgDom.onload=null;
var canvas = document.createElement('canvas'); // 获取canvas对象
var context = canvas.getContext('2d'); // 获取canvas的上下文
canvas.width = 100;
canvas.height = 100;
context.clearRect(0, 0, canvas.width, canvas.height); // 首先先清空canvas里面的内容，以防内容叠加
context.drawImage(imgDom, 0, 0, canvas.width, canvas.height); // 画图
var base64min = canvas.toDataURL('image/jpeg', 0.92); // 格式和质量
imgDom.src = base64min;
//选择文件后可以自动上传图片
//base64_uploading(base64min);
}
/****/
}
}
}
var flag = ''; // 为了防止重复提交添加个开关
// 点击提交
$('#sub_btn').on('click',function(){
var base64Data = $('#imgtmp').attr('src');
if(base64Data && flag != base64Data){
flag = base64Data;
base64_uploading(base64Data);
}else{
alert('已经提交过了');
}
})
//AJAX上传base64
function base64_uploading(base64Data){
$.ajax({
type: 'POST',
url: "upload.php",
data: {
'img': base64Data
},
dataType: 'json',
timeout: 50000,
success: function(data){
console.log(data);
if(data.code == 10000){
alert('上传成功');
}else{
alert('上传失败：'+data.msg);
}
},
complete:function() {},
error: function(xhr, type){
alert('上传超时了');
}
});
}
</script>后端接收文件以php为例，upload.php 源码：
<?php
header("Content-type: text/html; charset=utf-8");
error_reporting(E_ALL ^ E_NOTICE);
function fileuploads(){
// 初始配置
$up_dir = './uploads/';
$fileTypes = array('pjpeg','jpeg','jpg','gif','bmp','png');
// 初始结果集
$result = array('code'=>40000,'msg'=>'参数错误','data'=>array());
// 参数验证
if(!isset($_POST['img'])){
return $result;
}
$base64_img = trim($_POST['img']);
// 路径验证生成
if(!file_exists($up_dir)){
mkdir($up_dir,0777);
}
// 正则匹配填充搜索结果
if(!preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_img, $res)){
$result['code'] = 30000;
$result['msg'] = '上传文件信息错误';
return $result;
}
$type = $res[2]; // 文件类型
// 文件类型判断
if(!in_array($type, $fileTypes)){
$result['code'] = 30001;
$result['msg'] = '上传文件类型不是图片类型';
return $result;
}
// 拼接文件全路径
$new_file = $up_dir.date('YmdHis').'_'.rand(100,999).'.'.$type;
if(!file_put_contents($new_file, base64_decode(str_replace($res[1], '', $base64_img)))){
$result['code'] = 30002;
$result['msg'] = '图片上传失败';
return $result;
}
$result['code'] = 10000;
$result['msg'] = '图片上传成功';
$result['data']['filepath'] = str_replace('../../..', '', $new_file);
return $result;
}
// 调用
$result = fileuploads();
echo json_encode($result);return;
?>
如果想实现远程提交，在后端php文件里添加head头：header("Access-Control-Allow-Origin: *");
