详解jQuery Uploadify 上传文件
介绍
jQuery Uploadify是一个基于jQuery的文件上传插件，支持多文件上传，多种文件类型，进度条显示等功能。本文将详细讲解如何使用jQuery Uploadify完成文件上传的功能。
安装
- 下载jQuery Uploadify的压缩包文件，将其解压缩。
- 在HTML文件中引入以下js和css文件：
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- jQuery Uploadify核心文件 -->
<script src="uploadify/jquery.uploadify.min.js"></script>
<!-- css文件 -->
<link rel="stylesheet" type="text/css" href="uploadify/uploadify.css">
使用
- 创建上传按钮，如下面的HTML代码：
<input type="file" name="file_upload" id="file_upload" />
- 在JavaScript文件中引入文件上传插件，并定义上传方法：
$("#file_upload").uploadify({
'swf': 'uploadify/uploadify.swf',
'uploader': 'uploadify/uploadify.php',
'buttonText': '选择文件',
'fileSizeLimit': '10MB',
'multi': true,
'onUploadSuccess': function(file, data, response) {
alert('文件上传成功！');
}
});
-
参数解释：
-
swf: 上传Flash组件的路径。 uploader: 处理上传请求的PHP文件路径。buttonText: 上传按钮的文本。fileSizeLimit: 限制上传文件的大小。multi: 是否支持多文件上传。onUploadSuccess: 上传成功时的回调函数。
示例1
下面是一个完整的示例代码，实现上传图片的功能。
<!DOCTYPE html>
<html>
<head>
<title>文件上传示例</title>
<meta charset="UTF-8">
<!-- 引入jQuery和jQuery Uploadify -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="uploadify/jquery.uploadify.min.js"></script>
<link rel="stylesheet" type="text/css" href="uploadify/uploadify.css">
</head>
<body>
<input type="file" name="file_upload" id="file_upload" />
<script>
$(function() {
$("#file_upload").uploadify({
'swf': 'uploadify/uploadify.swf',
'uploader': 'uploadify/uploadify.php',
'buttonText': '选择图片',
'fileSizeLimit': '10MB',
'multi': false,
'fileTypeDesc': 'Image Files',
'fileTypeExts': '*.gif; *.jpg; *.png',
'onUploadSuccess': function(file, data, response) {
alert('图片上传成功！');
}
});
});
</script>
</body>
</html>
示例2
下面是一个示例代码，实现上传多个文件的功能。
<!DOCTYPE html>
<html>
<head>
<title>文件上传示例</title>
<meta charset="UTF-8">
<!-- 引入jQuery和jQuery Uploadify -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="uploadify/jquery.uploadify.min.js"></script>
<link rel="stylesheet" type="text/css" href="uploadify/uploadify.css">
</head>
<body>
<input type="file" name="file_upload" id="file_upload" />
<script>
$(function() {
$("#file_upload").uploadify({
'swf': 'uploadify/uploadify.swf',
'uploader': 'uploadify/uploadify.php',
'buttonText': '选择文件',
'fileSizeLimit': '10MB',
'multi': true,
'onUploadSuccess': function(file, data, response) {
alert('文件上传成功！');
}
});
});
</script>
</body>
</html>
总结
以上就是使用jQuery Uploadify实现文件上传功能的完整攻略。我们可以通过这个插件快速、简单地实现文件上传的功能。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：详解jquery uploadify 上传文件 - Python技术站
微信扫一扫 
支付宝扫一扫 