jQuery文件上传插件的使用方法和常见问题解决方法

一、基本使用方法

1、引入jQuery和fileupload.js文件

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="jquery.fileupload.js"></script>

2、创建上传表单

<form id="fileupload" action="upload.php" method="POST" enctype="multipart/form-data">
    <input type="file" name="file" multiple>
    <input type="submit" value="上传">
</form>

3、绑定上传事件

$('#fileupload').fileupload({
    url: 'upload.php', // 后端处理上传的地址
    dataType: 'json', // 返回数据类型为json
    done: function (e, data) { // 上传成功的回调函数
        console.log(data.result); // 输出上传成功后的返回结果
    },
    fail: function (e, data) { // 上传失败的回调函数
        console.log(data.errorThrown);
    }
});

二、做出进度条

1、使用jQuery UI库提供的进度条组件，需要引入jQuery UI库的css和js文件

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

2、在绑定上传事件的时候，添加代码实现进度条

$('#fileupload').fileupload({
    // 其他配置省略
    progressall: function (e, data) { // 上传进度变化时触发的回调函数
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#progressbar').progressbar({value: progress}); // 更新进度条
    }
});

<div id="progressbar"></div>

三、解决跨域问题

1、在php文件中设置响应头

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');

2、如果使用Apache作为Web服务器，可以修改.htaccess文件

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "POST, GET, OPTIONS"
Header set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept"

四、解决上传大文件时出现的问题

1、在php.ini文件中修改上传文件的大小限制

upload_max_filesize = 100M
post_max_size = 100M
max_execution_time = 600

2、在Apache的httpd.conf文件中修改请求的响应时间

TimeOut 600

五、解决IE浏览器兼容性问题

1、在JS文件中添加以下代码

// 解决IE浏览器中数据类型不匹配的问题
$.ajaxSetup({
    xhrFields: {
        withCredentials: true // 解决IE浏览器的跨域问题
    }
});
// 解决IE浏览器文件上传进度问题
$.support.cors = true;

2、在html文件中添加以下代码

<!-- 解决IE浏览器中的跨域问题 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">