uploadify是来自国外的一款优秀的jQuery上传插件,主要功能是批量上传文件,带进度显示。
包括两个版本,一个是Flash的 一个是HTML5的。下面介绍Flash版本如何使用
1、下载 Uploadify Zip
2、解压缩包并上传下列文件到您的网站上的一个文件夹:
jquery.uploadify.min.js
uploadify.css
uploadify-cancel.png
uploadify.swf
3、在您使用uploadify页面也不要忘了引入jQuery库
4、在页面引入如下文件
<script type="text/javascript" src="uploadify/jquery-1.8.0.min.js"></script> <script type="text/javascript" src="uploadify/jquery.uploadify.min.js"></script> <link rel="stylesheet" type="text/css" href="uploadify/uploadify.css">
5、页面添加file input
<input type="file" name="file_upload" id="file_upload" />
6、初始化uploadify
$(function() { $('#file_upload').uploadify({ 'swf' : 'uploadify.swf', 'uploader' : 'fileUploadAction.action' // Put your options here }); });
7、最终页面应该像如下这样
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>uploadify</title> <script type="text/javascript" src="uploadify/jquery-1.8.0.min.js"></script> <script type="text/javascript" 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" /> </body> <script type="text/javascript"> $(function() { $('#file_upload').uploadify( { 'swf' : 'uploadify/uploadify.swf', 'uploader' : 'fileUploadAction.action', //处理上传文件Action路径 'fileObjName' : 'file', //文件对象 'buttonText' : '选择文件', //按钮显示文字 }); }); </script> </html>
更多uploadify属性请参考http://www.uploadify.com/documentation/
处理上传文件Action省略,需要的可以下载源码:download
效果如图:
转载请注明出处:blog.ytso.com/article/details/44062283
原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/14373.html