ie8本地图片上传预览示例代码

下面是“ie8本地图片上传预览示例代码”的完整攻略。

1. 需求分析

首先，我们需要明确自己的需求，即实现ie8浏览器下的本地图片上传预览功能。

在ie8浏览器中，使用<input type="file">控件上传文件时，无法预览图片，需要通过其他方式实现预览功能。可以使用微软提供的ActiveX控件，在用户选择图片后，通过控件获取图片的Base64编码，然后用<img>标签展示预览。

2. 准备工作

在进行示例代码编写前，我们需要先准备好以下工作：

一个支持ActiveX的IE8浏览器
一个Web服务器，以便在浏览器中访问示例代码

3. 示例代码

以下是一份基于jquery和jquery.form.js的ie8本地图片上传预览示例代码，可以在支持ActiveX的ie8浏览器中运行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ie8本地图片上传预览示例代码</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery.form/4.2.2/jquery.form.min.js"></script>
</head>
<body>
    <form id="uploadForm" method="post" enctype="multipart/form-data">
        <input type="file" name="file" id="file" multiple="multiple">
        <input type="button" value="上传" onclick="uploadFile()">
    </form>
    <div id="preview"></div>
    <script>
        function uploadFile() {
            var options = {
                url: "upload.php",
                type: "post",
                dataType: "json",
                success: function (response) {
                    if (response.success) {
                        var imageData = response.data;
                        $("#preview").html("<img src='" + imageData + "'/>");
                    } else {
                        alert(response.message);
                    }
                }
            };

            $("#uploadForm").ajaxSubmit(options);
        }
    </script>
</body>
</html>

其中，<form>标签中的<input type="file">用于上传文件，<input type="button">用于触发上传操作，<div id="preview">用于展示图片预览。

在上传文件后，使用$.ajax或$.post方法向服务器发送请求，在服务器端使用php代码进行图片转码，转码完毕后返回Base64编码，在回调函数中将图片展示到预览区域中。

以下是php代码示例：

<?php
    if ($_FILES["file"]["error"] > 0) {
        echo json_encode(["success" => false, "message" => "上传失败"]);
    } else {
        $filename = $_FILES["file"]["name"];
        $tmp_name = $_FILES["file"]["tmp_name"];
        $fileType = $_FILES["file"]["type"];

        $allowed_types = ["image/jpeg", "image/png", "image/gif"];
        if (!in_array($fileType, $allowed_types)) {
            echo json_encode(["success" => false, "message" => "文件类型错误"]);
            exit();
        }

        $basedir = "uploads/";

        if(!file_exists($basedir)){
            if(!mkdir($basedir, 0777, true)){
                echo json_encode(["success" => false, "message" => "目录创建失败"]);
                exit();
            }
        }

        $newfilename = md5(time() . $filename);
        $newfilepath = $basedir . $newfilename;

        if (move_uploaded_file($tmp_name, $newfilepath)) {
            $fileContent = file_get_contents($newfilepath);
            $imageData = base64_encode($fileContent);

            echo json_encode(["success" => true, "data" => "data:".$fileType.";base64,".$imageData]);
        } else {
            echo json_encode(["success" => false, "message" => "移动文件失败"]);
        }
    }

?>

4. 示例说明

对于这份示例代码，我认为有两点需要特别说明：

4.1 使用ajaxSubmit方法

在示例代码中，使用了jquery.form.js中的ajaxSubmit方法来实现上传文件。

此方法可以将表单元素的值序列化成字符串，并将其发送到服务器端。请求的content-type默认为"application/x-www-form-urlencoded"。此方法的优点在于支持异步上传和文件上传，并且可以设置各种回调函数，开发更加方便。

4.2 对图片类型的验证

在示例代码中，使用in_array函数进行文件类型的验证。

我们可以通过$_FILES["file"]["type"]来获取上传文件的类型，将其与允许的文件类型列表进行比较，如果不在列表中则返回文件类型错误信息。

需要注意的是，通过判断类型上传方式只能进行简单的校验，为了使上传文件更加安全，我们还需要对上传的文件进行真正的内容校验，防范恶意上传代码的攻击。

以上就是ie8本地图片上传预览示例代码的完整攻略，希望可以帮助到您。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：ie8本地图片上传预览示例代码 - Python技术站