如何在移动端实现图片上传并显示预览?

发布于 2024-01-18  456 次阅读


本文于 2024年1月18日 12:02 更新,注意查看最新内容

在移动端实现图片上传通常需要使用HTML5的File API和Ajax等技术。以下是一个简单的示例,演示如何在移动端实现图片上传:

HTML 结构:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>移动端图片上传</title>
</head>
<body>
<input type="file" accept="image/*" id="uploadInput" capture="camera">
<button onclick="uploadImage()">上传图片</button>
<div id="preview"></div>

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="upload.js"></script>
</body>
</html>

 

JavaScript(upload.js):

function uploadImage() {
var fileInput = document.getElementById('uploadInput');
var preview = document.getElementById('preview');

var file = fileInput.files[0];
if (file) {
var formData = new FormData();
formData.append('image', file);

// 使用Ajax进行上传
$.ajax({
url: 'upload.php', // 上传处理的服务器端脚本
type: 'POST',
data: formData,
contentType: false,
processData: false,
success: function(response) {
// 上传成功后的处理
console.log('上传成功', response);
// 在预览区域显示上传的图片
preview.innerHTML = '<img src="' + response + '" alt="上传的图片">';
},
error: function(error) {
// 上传失败后的处理
console.error('上传失败', error);
}
});
}
}

 

PHP 服务器端脚本(upload.php):

<?php
// 检查是否有文件上传
if (isset($_FILES['image'])) {
$target_dir = "uploads/"; // 上传目录
$target_file = $target_dir . basename($_FILES["image"]["name"]);
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));

// 检查文件是否为图片
if(isset($_POST["submit"])) {
$check = getimagesize($_FILES["image"]["tmp_name"]);
if($check !== false) {
echo "文件是一个有效的图片 - " . $check["mime"] . ".";
$uploadOk = 1;
} else {
echo "文件不是一个有效的图片.";
$uploadOk = 0;
}
}

// 检查文件是否已存在
if (file_exists($target_file)) {
echo "文件已经存在.";
$uploadOk = 0;
}

// 检查文件大小
if ($_FILES["image"]["size"] > 500000) {
echo "文件过大.";
$uploadOk = 0;
}

// 允许的文件格式
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
echo "只允许 JPG, JPEG, PNG & GIF 文件.";
$uploadOk = 0;
}

// 如果文件上传失败
if ($uploadOk == 0) {
echo "文件上传失败.";
} else {
// 将文件移动到上传目录
if (move_uploaded_file($_FILES["image"]["tmp_name"], $target_file)) {
echo "文件 ". basename( $_FILES["image"]["name"]). " 上传成功.";
echo $target_file; // 返回文件路径,可用于预览
} else {
echo "文件上传失败.";
}
}
}
?>

请确保服务器上存在 uploads 目录,并具有写入权限。这是用于存储上传的图片的目录。

这个例子中使用了 jQuery 库简化 Ajax 请求。上传成功后,会在预览区域显示上传的图片。这只是一个简单的示例,实际中你可能需要根据需求进行更复杂的处理。


这短短的一生,我们最终都会失去。