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

JQuery Uploadify 多文件上传(一)

2013-03-29 21:33 465 查看

作为一个码农，不管是用.NET,PHP,JSP还是其它技术做WEB开发，文件上传功能都必不可少，之前一直使用根据apache Fileupload开源组件来写的自定义上传组件，但是界面总归不是那么的友好漂亮。自从使用uploadify, 发现其功能强大，界面也比较友好，操作简单。有这么一个好东东，的确省时省力，但最近有后来的码农问我uploadify组件如何使用，其在网上找了好多资料，拿下来却使用不了，也不知道怎么回事；听之，直接告诉其上官方网站找资料，后来问题解决了，而我却好奇为什么网上的一些文章拿下来使用问题那么多。
百度一下‘jquery uploadify多文件上传’ ，结果总是出奇的多，有很多文章都写了如何使用uploadify插件，有些都标注详解。但打开一看，怎么对得起详解二字，我们不能要求太高了，但至少插件的版本总得有吧！！结果很多文章直接贴代码，导致有些初级码农看了这些文章之后浪费不少时间，却得不到正确运行结果。

下面的内容会结合struts2来说明多文件上传插件uploadify的使用方法

第一步，你需要去官网去看看，http://www.uploadify.com/ 进入官网首页，有一个下载图标，Flash Version, 点击弹出下载uploadify-v3.1.zip，说明这个版本为3.1 ；

第二步，在uploadify 的导航菜单中，可以点击demos(示例)、 docs(开发文档)、download(下载) 链接，以查看相关案例以及API文档；（注意，有可能以后这个官网内容会有所改变，所以一定要亲自去访问，以便了解这个插件的主要功能。）

第三步，单击about 主页菜单链接，阅读以下文字：

Uploadify™ is a jQuery plugin that allows you to easily add multiple file upload functionality to your website. Two distinct versions (HTML5 and Flash) allow

you the flexiblity to choose the right implementation for your site and fallback methods make it degrade gracefully.

Some features include:

Multiple File Uploads

The main benefit of Uploadify is its ability to allow multiple file uploads without the hassle of clicking multiple browse buttons or submitting multiple forms.

...... 省略

看懂这里的说明，对使用此插件有帮助

第四步，下载uploadify-v3.1.zip 并解压，然后去官网上学习demo

第五步，你可能还要去下载一个swfobject.js文件，并将其导入到web工程中,下载地址：http://code.google.com/p/swfobject/

如果不想去官网下载，可直接到我的资源中去下载所有的文件

以下部分将使用JQuery1.8, Struts2框架，并使用myeclipse10作为工具

1，创建web工程demo，并导入struts2

2，解压uploadify-v3.1.zip

将以下文件复制到工程demo/WebRoot/js目录下：

jquery.uploadify.js, jquery.uploadify.min.js, uploadify.css, uploadify.swf, uploadify-cancel.png, 图片以及js文件、css文件先放在同一目录下。

3，将jquery-1.8.0.min.js, swfobject.js 和上面的文件放到同一目录

4，编写创建upload.html页面，关键内容如下

<link rel="stylesheet" type="text/css" href="js/uploadify.css">
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery.uploadify.js"></script>
<script type="text/javascript" src="js/jquery.uploadify.min.js"></script>

<script type="text/javascript">
$(function() {
$('#file_upload').uploadify({  //此处file_upload 是一个type 为file的HTML对象
'swf'      : 'js/uploadify.swf',   //使用uploadify.swf选择文件
'uploader' : 'uploadfile.action',  //上传的url路径，此处可自定义
'auto' : false   //选择文件后是否自动上传 默认为true, 此处为false
});
});
</script>
</head>
<body>
<input type="file" name="file_upload" id="file_upload" />
</body>

5，发布此页面，添加三张上传图片，结果如下图所示 (注意：如果网页样式不是下面的形式，有可能的情况是未成功加载uploadify.css文件)

6，如果想把SELECT FILES变成中文，可以采用以下两种方式：

a, 打开jquery.uploadify.min.js 找到SELECT FILES字符串文本，并用选择文件四个字替换之

b, 更改代码，增加属性buttonText

$(function() {
$('#file_upload').uploadify({
'swf'      : 'js/uploadify.swf',
'uploader' : 'uploadfile.action',
'auto' : false,
'buttonText':'选择上传文件'
});
});

未完待续，有时间再完成，要去当奶爸了

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

标签：

相关文章推荐

新的分享

章节导航