progress()进度条文件上传

最新推荐文章于 2025-06-21 13:22:46 发布

好长同学

最新推荐文章于 2025-06-21 13:22:46 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： Ajax 文章标签： Ajax

本文链接：https://blog.youkuaiyun.com/phc814862399/article/details/82115281

Ajax 专栏收录该内容

2 篇文章

订阅专栏

博客提及了HTML和PHP，这两者是信息技术领域重要元素，HTML常用于前端页面构建，PHP则是常用的后端开发语言。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>商品信息发布</title>
<link rel="stylesheet" href="./css/goods.css" />
</head>
<body>
<div class="goods">
<div class="title">编辑商品信息</div>
<table class="table">
	<tr><th class="th">商品名称：</th><td class="td">
		<input type="text" name="title" /><span class="tip"></span>
		<p class="rule">商品名称长度在3~50个字符之间。</p>
	</td></tr>
	<tr><th class="th">商品图片：</th><td class="td">
		<form id="form">
			<input type="file" name="image" />
			<input type="submit" value="上传" />
		</form>
		<p>上传进度：<span class="progress"><i></i></span><span>0%</span></p>
		<img class="thumb" style="display:none;" />
	</td></tr>
</table>
<div class="act"><button>发布</button></div>
</div>
<script>
//获取DOM对象
var form = document.getElementById("form"); //表单
var image = document.getElementsByName("image")[0]; //图片上传框
var thumb = document.getElementsByClassName("thumb")[0]; //图片框
var progress = document.getElementsByClassName("progress")[0];
var barObj = progress.getElementsByTagName("i")[0]; //进度条
var perObj = progress.nextSibling; //百分比
//表单提交事件通过Ajax处理
form.onsubmit = function(){
	//如果没有选择文件则不进行上传
	if(image.value===""){
		alert("请先选择文件。");
		return false;
	}
	//创建Ajax对象
	var xhr = new XMLHttpRequest();
	//上传进度
	xhr.upload.onprogress = function(e){
		var total = e.total; //数据总大小
		var loaded = e.loaded; //已经上传的大小
		var per = Math.floor(loaded/total*100); //计算百分比
		barObj.style.width = per + "%";
		perObj.innerHTML = per + "%";
	};
	xhr.onreadystatechange = function(){
		if(xhr.readyState==4){
			if(xhr.status!==200){
				alert('图片上传失败');
			}else{
				var xmlobj = xhr.responseXML;
				if(xmlobj===null){
					alert('图片上传失败');
				}else{
					//上传完成，显示图片
					var flag = xmlobj.getElementsByTagName("flag")[0].firstChild.nodeValue;
					var message = xmlobj.getElementsByTagName("message")[0].firstChild.nodeValue;
					if(flag==="ok"){
						thumb.src = message;
						thumb.style.display = "block";
					}else{
						alert(message);
					}
				}
			}
		}
	};
	//收集表单数据
	var fd = new FormData(form);
	xhr.open("post","goods_2.php");
	xhr.send(fd);
	return false; //阻止浏览器的表单提交操作
};
</script>
</body>
</html>

PHP:

<?php
/**
 * Created by PhpStorm.
 * User: Administrator
 * Date: 2018/8/27
 * Time: 10:53
 */
//上传文件
if(isset($_FILES['image'])){
    $result=uploadImage($_FILES['image']);
    header('content-type:text/xml');
    echo '<?xml version="1.0" encoding="utf-8">';
    echo '<result>'.$result."</result>";
}
//图片上传函数
function uploadImage($file)
{
    //判断是否上传成功
    if ($file['error'] > 0) {
        return '<flag>error</flag><message>上传失败</message>';
    }
    //获取文件上传类型
    $type=strchr($file['name'],'.');
    if($type!=='.jpg'){
        return '<flag>error</flag><message>上传失败，只允许jpg格式的图片</message>';
    }
    //生成新文件名
    $filename=substr(uniqid(rand()),-6).'.jpg';
    //上传文件保存路径
    $filepath='./upload/'.$filename;
    if(move_uploaded_file($filename['tmp_name'],$filepath)){
        return '<flag>ok</flag><message>'.$filepath.'</message>';
    }else{
        return '<flag>error</flag><message>上传失败</message>';
    }
}