完美实现 IE10 下利用HTML5实现文件上传（图片上传）功能

最新推荐文章于 2021-04-22 13:59:41 发布

IT伟哥

最新推荐文章于 2021-04-22 13:59:41 发布

阅读量1.3w

点赞数 4

文章标签： HTML5 IE10 图片文件上传 html5实例教程

本文链接：https://blog.csdn.net/liwei3gjob/article/details/8948067

版权

近期因为工作需要研究了纯HTML5实现文件上传，并在IE10下测试完美通过，本文由笔者基于互联网源代码思路整理和改进，改进版属原创，源代码供各位朋友下载参考，本文部分文字来自互联网，版权归原作者所有。

文件上传对于Web开发者来说非常重要的，不同的语言实现的方法也不一样,从笔者几年从事的Web开发工作看，最简单的就是使用PHP实现文件上传，我们只需要简单配置PHP文件上传信息后，通过PHP的move_uploaded_file(“临时路径”,”要保存的路径”)就可以轻松实现文件上传.因为近期工作需要笔者研究了在html5下实现文件上传，并全程使用IE10进行开发、调试（其他浏览器存在不同程度的问题，Chrome表现的也还不错）。所以笔者起名为：IE10 下利用HTML5实现文件上传（图片文件）。以下笔者就来详细的介绍文件上传的详细知识。

采用WEB技术实现B/S（浏览器/服务器）结构的管理系统是办公自动化的发展趋势。基于WEB技术的管理系统，由于开发周期短；与用户平台无关；易于实现交互式应用；能对信息进行快速、高效的收集、处理和发布，近几年来得到了迅速发展。而ASP技术由于其开发效率高、交互性好，安全性强等特点，逐渐成为开发管理系统的首选工具。

许多基于WEB的应用都涉及文件上传操作。常见的文件上传技术有：基于HTTP协议的；基于文件上传组件的；基于数据库技术的等等。这些方法一般都需要编程者能同时掌握WEB技术、数据库技术或CGI技术或组件技术，对编程者的要求较高。

几种文件上传技术

1、基于HTTP协议

该方法需要编程者利用第三方软件，在应用程序中先进行HTTP协议编程，然后将待上传文件内容按HTTP协议的格式打包，最后向WEB服务器发送上传的请求报文，从而实现文件的上传。

2、文件上传组件

开发服务器组件，实现特定的文件上传服务。它首先利用表单功能将文件（二进制格式）从用户端上传到服务器端，然后使用相关的组件，对二进制文件进行处理，成为可以正常读写的文件。该方法要求编程者不仅掌握动态网站编程语言，而且还能利第三方语言进行组件编程，增加了开发的难度。

3、基于数据库技术

该方法和上个方法有类似之处。不同的地方在于对上传的二进制文件的处理上。它使用数据库来保存二进制文件。无论是小型数据库还是大型数据库都提供了存储二进制数据的数据类型，只要以Append Chunk方式将数据存入相应的字段就可以了。该方法虽然简单可行，但是因为每次上传的文件大小都是不一样的，因此，会对数据库的空间造成很大的浪费，降低了数据的访问速度；并且使得文件只能在数据库环境下进行访问，造成了很大的不便。

下面将展示一个IE10下很强大的 HTML5 的文件上传功能，并有上传进度提示以及预览，这是一个基于 jQuery 的解决方案，我们将使用 HTML5 的 FileReader 实现在浏览器上的文件预览，并使用 XMLHttpRequest 将数据发送到服务器。服务器端使用PHP语言实现文件的接收和存储。

上传文件主界面

选中要上传的文件

可以看到，当选中要上传的文件后，文件的基本信息就显示出来了，包括：文件名称、文件类型、文件大小、文件尺寸，再右侧能够显示图片的预览图。

文件上传完成界面

文件上传过程中增加了上传进度的百分比，能够清晰的看到文件上传的进度

案例源码

客户端源代码：

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>IE10 下利用HTML5实现文件上传实例教程--liwei3gjob</title>
        <link href="css/main.css" rel="stylesheet" type="text/css" />
        <script src="js/script.js"></script>
    </head>
    <body>
        <header>
            <h2>html5文件上传</h2>
        </header>
        <div class="container">
            <div class="contr"><h2>选择文件</h2></div>

            <div class="upload_form_cont">
                <form id="upload_form" enctype="multipart/form-data" method="post" action="upload.php">
                    <div>
                        <div><label for="image_file">选择图片</label></div>
                        <div><input type="file" name="image_file" id="image_file" οnchange="fileSelected();" /></div>
                    </div>
                    <div>
                        <input type="button" value="上传" οnclick="startUploading()" />
                    </div>
                    <div id="fileinfo">
                        <div id="filename"></div>
                        <div id="filesize"></div>
                        <div id="filetype"></div>
                        <div id="filedim"></div>
                    </div>
                    <div id="error">只能上传图片格式!</div>
                    <div id="error2">上传文件发生错误！</div>
                    <div id="abort">网络断开，无法继续上传！</div>
                    <div id="warnsize">文件太大，无法上传！</div>

                    <div id="progress_info">
                        <div id="progress"></div>
                        <div id="progress_percent"> </div>
                        <div class="clear_both"></div>
                        <div>
                            <div id="speed"> </div>
                            <div id="remaining"> </div>
                            <div id="b_transfered"> </div>
                            <div class="clear_both"></div>
                        </div>
                        <div id="upload_response"></div>
                    </div>
                </form>

                <img id="preview" />
            </div>
        </div>
    </body>
</html>

服务器端使用PHP编程：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<?php
function bytesToSize1024($bytes, $precision = 2) {
    $unit = array('B','KB','MB');
    return @round($bytes / pow(1024, ($i = floor(log($bytes, 1024)))), $precision).' '.$unit[$i];
}

$sFileName = $_FILES['image_file']['name'];
$sFileType = $_FILES['image_file']['type'];
$sFileSize = bytesToSize1024($_FILES['image_file']['size'], 1);
if(!$_FILES['image_file']['error']){
   if(move_uploaded_file($_FILES['image_file']['tmp_name'],"./upload/".$sFileName)){ 
	     echo $sFileName." 文件上传成功<br>";
		 echo "文件类型：".$sFileType."<br>";
		 echo "文件大小：".$sFileSize."<br>"; 
	   }else{
		   echo "文件上传失败";
		   }
}else{
	echo "文件上传错误";
}

用IE10上传文件存在的一些问题：

这是因为我们开启了IE的增加模式：

开启了“增强型保护模式”。IE对网页的权限更严格，有些网页就无法访问大部分本地文件。

总结:IE10下纯HTML5实现文件上传还是比较强大的，这一点让我感到吃惊，没想到支持的这么好，IE10好样的！

IT伟哥

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
3
评论
完美实现 IE10 下利用HTML5实现文件上传（图片上传）功能

近期因为工作需要研究了纯HTML5实现文件上传，并在IE10下测试完美通过，本文由笔者基于互联网源代码思路整理和改进，改进版属原创，源代码供各位朋友下载参考，本文部分文字来自互联网，版权归原作者所有。文件上传对于Web开发者来说非常重要的，不同的语言实现的方法也不一样,从笔者几年从事的Web开发工作看，最简单的就是使用PHP实现文件上传，我们只需要简单配置PHP文件上传信息后，通过
复制链接

扫一扫