基于jquery跨浏览器显示的file上传控件

介绍：基于jQuery的跨浏览器显示的file上传控件是一种使用jQuery实现的，不需要Flash、Java Applet或者ActiveX等插件的file上传控件，且可以跨浏览器正常显示，可以实现上传文件的功能。本文将详细介绍这种上传控件的使用方法。

步骤一：下载并引入jQuery和插件库

首先要下载jQuery和插件库jquery.form.min.js，然后在网页中引入：

<script src="jquery.js"></script>
<script src="jquery.form.min.js"></script>

步骤二：HTML代码

在HTML代码中添加一个file上传控件，代码如下：

<form action="upload.php" method="post" enctype="multipart/form-data" id="myForm">
    <input type="file" name="myfile" />
    <button type="submit">上传文件</button>
</form>

其中，action属性指定了文件上传的地址，method属性指定了数据提交的方式，enctype属性指定了提交的编码类型，id属性方便后面使用jQuery进行操作。

步骤三：JavaScript代码

在JavaScript代码中，使用jQuery对上传控件进行操作：

<script>
    $(function() {
        $('#myForm').ajaxForm({
            beforeSubmit: function() {
                // 文件上传之前执行的操作
            },
            success: function(data) {
                // 文件上传成功后执行的操作
            },
            error: function(xhr) {
                // 文件上传出错后执行的操作
            }
        });
    });
</script>

其中，beforeSubmit、success和error分别为文件上传前、文件上传成功后和文件上传失败后的回调函数，可以在函数中编写相应的操作。

步骤四：后端代码

服务器端代码可以使用PHP等语言实现，这里以PHP为例，代码如下：

<?php
    $file = $_FILES['myfile'];
    $uploads_dir = 'uploads/';
    $fileName = $uploads_dir . $file['name'];
    move_uploaded_file($file['tmp_name'], $fileName);
    echo '文件上传成功！';
?>

以上代码实现了上传文件到指定目录，并输出上传成功的提示信息。

示例一：上传PDF文件

<form action="upload.php" method="post" enctype="multipart/form-data" id="myForm">
    <input type="file" name="myfile" accept="application/pdf" />
    <button type="submit">上传文件</button>
</form>

上述代码中，accept属性指定了只能上传PDF格式的文件。

示例二：限制上传文件大小

<script>
    $(function() {
        $('#myForm').ajaxForm({
            beforeSubmit: function() {
                var fileSize = $('#myForm input[type=file]')[0].files[0].size;
                var maxSize = 10 * 1024 * 1024; // 最大上传文件大小为10MB
                if(fileSize > maxSize) {
                    alert('文件大小不能超过10MB，请重新选择！');
                    return false;
                }
            },
            success: function(data) {
                // 文件上传成功后执行的操作
            },
            error: function(xhr) {
                // 文件上传出错后执行的操作
            }
        });
    });
</script>

上述代码中，通过判断上传文件的大小来限制上传文件的大小，如果上传文件的大小超出了规定大小，弹出提示信息并取消提交。

通过以上步骤及示例，就可以完成基于jQuery的跨浏览器显示的file上传控件的使用。