//html部分
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="f" type="file" name="file" οnchange="writeFile()">
<input type="hidden" name="picurl" id="pic_url" value="" />
<div style="width: 100px;height: 100px ;display: none" id="ShowImage" picurl=""></div>
</body>
<script src="UpImage.js"></script>
</html>
//js实现部分
var writeFile = function () {
var temp = null;
var formData = null;
var xhr = null;
var file = document.getElementById('f');
var f = file.files[0];
//alert(f.name);
var totalSize = f.size;
var btn = document.getElementById('t');
// 每次截取的大小
var num = 1000 * 1024;
var start = 0;
var end = start + num;
// 发送到的地址
var url = '/upload/fileupload.php';
// 进度条
var loaded = function (bili) {
console.log(bili);
// btn.style.width = bili + '%';
};
writeFile = function () {
// 如果已经截取完了跳出这个函数。
if (start >= totalSize)return;
// 截取文件
temp = f.slice(start, end);
formData = new FormData();
formData.append(file.name, temp);
formData.append('fileName', f.name);
xhr = new XMLHttpRequest();
xhr.open('POST', url);
xhr.onreadystatechange = function () {
if (this.readyState === 4 && this.status === 200) {
// 改变下一次截取的位置
start = end;
end = start + num;
// 因为截取可能超过totalSize,判断最后一次截取是否大于totalSize如果大于就直接让end等于totalSize
if (end > totalSize) {
end = totalSize;
}
var headers = JSON.parse(xhr.responseText)
console.log(headers.data.ImageUrl)
var ShowImage=document.getElementById('ShowImage');
ShowImage.innerHTML="<img src="+headers.data.ImageUrl+" style=\"width: 100px;height: 100px ;\">";
ShowImage.style.display ="block"
ShowImage.setAttribute("picurl", headers.data.src);
document.getElementById("pic_url").value=headers.data.src;
// 可以用这个做进度条
loaded((start / totalSize) * 100);
// 递归,如果文件没有截取完,继续截取
writeFile();
}
};
xhr.send(formData);
};
// 调用一下
writeFile();
};
//php 接收文件
uploadAction();
/*文件上传*/
function uploadAction()
{
$name = $_POST['fileName'];
$filename ='file';
$path = 'upload';//设置上传文件的存储目录;
//如果不存在上传文件夹,就自动创建;
if (!file_exists($path)) {
mkdir($path, 0777, true);
chmod($path, 0777);
}
uploadFile($filename,$path,"",$name);
}
/*上传函数*/
function uploadFile($filename, $path, $typelist = null,$name)
{
//1. 获取上传文件的名字
$upfile = $_FILES[$filename];
if (empty($typelist)) {
$typelist = array("image/gif", "image/jpg", "image/jpeg", "image/png");//允许的文件类型
}
//$path="upload3"; //指定上传文件的保存路径(相对的)
$res = array("error" => false);//存放返回的结果
//2.过滤上传文件件的错误号
if ($upfile["error"] > 0) {
switch ($upfile["error"]) {
case 1:
$res["info"] = "上传的文件超过了 php.ini 中 upload_max_filesize 选项限制";
break;
case 2:
$res["info"] = "上传文件的大小超过了 HTML 表单中 MAX_FILE_SIZE 选项";
break;
case 3:
$res["info"] = "文件只有部分被上传";
break;
case 4:
$res["info"] = "没有文件被上传";
break;
case 6:
$res["info"] = "找不到临时文件夹。";
break;
case 7:
$res["info"] = "文件写入失败";
break;
default:
$res["info"] = "未知错误!";
break;
}
return $res;
}
//3.本次文件大小的限制
if ($upfile["size"] > 10000*1000) {
$res["info"] = "上传文件过大!";
return $res;
}
//4. 过滤类型
/* if (!in_array($upfile["type"], $typelist)) {
$res["info"] = "上传类型不符!" . $upfile["type"];
return $res;
}*/
//5. 初始化下信息(为图片产生一个随机的名字)
$filenames=md5($upfile['name']);
$fileinfo = pathinfo($name);
session_start();
if(isset($_SESSION[$filenames])){
$FileDate=$_SESSION[$filenames];
if($FileDate['time'] >time() ){
$newfile=$FileDate['name'];
}else{
unset( $_SESSION[$filenames]);
$newfile=GetFileName($fileinfo,$filenames);
}
}else{
$newfile=GetFileName($fileinfo,$filenames);
}
//6. 执行上传处理
$FilePath=$path . "/" . $newfile;
if (is_uploaded_file($upfile["tmp_name"])) {
if(file_exists($FilePath)){
file_put_contents($FilePath, file_get_contents($_FILES['file']['tmp_name']), FILE_APPEND);
}else{
move_uploaded_file($upfile["tmp_name"],$FilePath);
}
} else {
$res["info"] = "不是一个上传的文件!";
}
$res["info"] = $newfile;
//返回图片地址
$ImageUrl="/upload/upload/";
exit(json_encode(array("code"=>200,"msg"=>"成功","data"=>array('src'=> $newfile,'ImageUrl'=>"$ImageUrl$newfile")))) ;
}
//生成文件名
function GetFileName($fileinfo,$filenames){
do {
$newfile = date("YmdHis") . rand(1000, 9999) . "." . $fileinfo["extension"];//随机产生一个的文件名
} while (file_exists($newfile));
$_SESSION[$filenames]=array("name"=>$newfile,"time"=>time()+10);
return $newfile;
}