您的位置：首页 > Web前端 > JQuery

基于jQuery的Web上传插件Uploadify使用示例

2016-05-19 00:00 567 查看

Uploadify是一款功能强大，高度可定制的文件上传插件，实现的效果非常不错，带进度显示。在最简单的方式下，Uploadify使用很少的代码就可以运行起来。

Uploadify官方下载地址：http://www.uploadify.com/download/

测试例子

以下是一个使用的简单例子：

这里我们采用了Uploadify包中自带的php测试脚本作为上传的处理，所以这里安装了wamp作为php的测试环境，在php的网站根目录中，解压上面下载好的Uploadify文件，并创建一个文件上传保存的目录，这里我们在Uploadify的解压目录中创建到了uploads作为文件保存目录。

创建uploadify_test.php文件，添加如下内容：

<html>
<head>
<link href="uploadify-v2.1.4/uploadify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="uploadify-v2.1.4/jquery-1.4.2.min.js" ></script>
<script type="text/javascript" src="uploadify-v2.1.4/swfobject.js" ></script>
<script type="text/javascript" src="uploadify-v2.1.4/jquery.uploadify.v2.1.4.min.js" ></script>

<style type="text/css">
#custom-demo .uploadifyQueueItem {
background-color: #FFFFFF;
border: none;
border-bottom: 1px solid #E5E5E5;
font: 11px Verdana, Geneva, sans-serif;
height: 50px;
margin-top: 0;
padding: 10px;
width: 350px;
}
#custom-demo .uploadifyError {
background-color: #FDE5DD !important;
border: none !important;
border-bottom: 1px solid #FBCBBC !important;
}
#custom-demo .uploadifyQueueItem .cancel {
float: right;
}
#custom-demo .uploadifyQueue .completed {
color: #C5C5C5;
}
#custom-demo .uploadifyProgress {
background-color: #E5E5E5;
margin-top: 10px;
width: 100%;
}
#custom-demo .uploadifyProgressBar {
background-color: #0099FF;
height: 3px;
width: 1px;
}
#custom-demo #custom-queue {
border: 1px solid #E5E5E5;
height: 213px;
margin-bottom: 10px;
width: 370px;
}
</style>

<script type="text/javascript">
$(function() {
$('#custom_file_upload').uploadify({
'uploader'    : 'uploadify-v2.1.4/uploadify.swf',
'script'     : 'uploadify-v2.1.4/uploadify.php',
'cancelImg'   : 'uploadify-v2.1.4/cancel.png',
'folder'     : 'uploadify-v2.1.4/uploads',
'multi'     : true,
'auto'      : true,
'fileExt'    : '*.jpg;*.gif;*.png;*.txt',
'fileDesc'    : 'Image Files (.JPG, .GIF, .PNG)',
'queueID'    : 'custom-queue',
'queueSizeLimit' : 3,
'simUploadLimit' : 3,
'sizeLimit'  : 1024000,
'removeCompleted': false,
'onSelectOnce'  : function(event,data) {
$('#status-message').text(data.filesSelected + ' files have been added to the queue.');
},
'onAllComplete' : function(event,data) {
$('#status-message').text(data.filesUploaded + ' files uploaded, ' + data.errors + ' errors.');
}
});
});
</script>
</head>
<body>
<div id="custom-demo" class="demo">

<h2>Custom Demo</h2>
<p>Uploadify is fully customizable. Here is an implementation with multiple files, auto uploads, limited file types, limited queue size, and custom onSelectOnce and onAllComplete functions.</p>
<div class="demo-box">
<div id="status-message">Select some files to upload:</div>

<div id="custom-queue"></div>
<input id="custom_file_upload" type="file" name="Filedata" />
</div>
</div>
</body>
</html>

Uploadify插件提示$(“#id”).uploadify is not a function错误可能原因

swfobject.js和jquery.uploadify.v2.1.4.min.js由于使用到了jquery的API，所以这两个文件需要依赖于jquery-1.4.2.min.js这个文件。

正常情况下需要引入如下几个js文件：

<script type="text/javascript" src="uploadify-v2.1.4/jquery-1.4.2.min.js" ></script>
<script type="text/javascript" src="uploadify-v2.1.4/swfobject.js" ></script>
<script type="text/javascript" src="uploadify-v2.1.4/jquery.uploadify.v2.1.4.min.js" ></script>

而在项目中已经存在了另外一个jquery的JS文件，导致文件冲突。而另外的一个jQuery文件的引入位置位于上面三个js文件引入位置的后面，此时项目中使用的是原本已经存在的jquery的JS文件，导致在加载jquery.uploadify.v2.1.4.min.js文件时还没有可用的jquery相关函数的定义，才会报这个错误。

解决方法：

去掉其中一个jquery的JS文件，并把swfobject.js和jquery.uploadify.v2.1.4.min.js文件放到引入jquery的JS文件的位置的后面即可。

您可能感兴趣的文章:

JQuery上传插件Uploadify使用详解及错误处理
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
Jquery Uploadify上传带进度条的简单实例
Jquery上传插件 uploadify v3.1使用说明
Jquery Uploadify多文件上传带进度条且传递自己的参数
php+jQuery.uploadify实现文件上传教程
详解jquery uploadify 上传文件
jQuery文件上传插件Uploadify使用指南
jquery uploadify和apache Fileupload实现异步上传文件示例
firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误
Jquery uploadify图片上传插件无法上传的解决方法
图片上传插件jquery.uploadify详解
解决jQuery uploadify在非IE核心浏览器下无法上传

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jQuery Uploadify

相关文章推荐

新的分享

章节导航