jQuery文件上传控件 Uploadify 详解

2020-05-27 18:13:28易采站长站整理

基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同时上传,上传进行进度显示,删除已上传文件。

要求使用jquery1.4或以上版本,flash player 9.0.24以上。

有两个版本,一个用flash,一个是html5。html5的需要付费~所以这里只说flash版本的用法。

官网:http://www.uploadify.com/

控件截图:

https://www.easck.com/d/file/200527/202005271754061725.jpg

用法:

首先引用下面的文件


<link rel="stylesheet" type="text/css" href="uploadify.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.uploadify-3.1.min.js"></script>

创建一个file input,或者其它任何带ID的元素,并对其初始化Uploadify(注意目录下要有uploadify.swf这个文件,和uploadify.php后台文件,路径按项目中的目录结构)


<input type="file" name="file_upload" id="file_upload" />
<script>
 $(function(){
   $('#file_upload').uploadify({
   'swf' :'uploadify.swf',
    'uploader':'uploadify.php'
   // Put your options here
   });
   });
</script>

这样子就完成了一个最基础的上传组建。基本原理是改变你创建的file input生成一个DOM结构,创建一个DIV按钮,按钮样式修改在uploadify.css文件中的.uploadify-button,将swf文件定位在按钮上面,这样当你点击按钮时实际上点击的是swf

选项:


$('#file_upload').uploadify({
auto:false,
//接受true or false两个值,当为true时选择文件后会自动上传;为false时只会把选择的文件增加进队列但不会上传,这时只能使用upload的方法触发上传。不设置auto时默认为true
buttonClass: "some-class",
//设置上传按钮的class
buttonCursor: 'hand',
//设置鼠标移到按钮上的开状,接受两个值'hand'和'arrow'(手形和箭头)
buttonImage: 'img/browse-btn.png',
//设置图片按钮的路径(当你的按钮是一张图片时)。如果使用默认的样式,你还可以创建一个鼠标悬停状态,但要把两种状态的图片放在一起,并且默认的放上面,悬停状态的放在下面(原文好难表达啊:you can create a hover state for the button by stacking the off state above the hover state in the image)。这只是一个比较便利的选项,最好的方法还是把图片写在CSS里面。
buttonText: '<div>选择文件</div>',
//设置按钮文字。值会被当作html渲染,所以也可以包含html标签
checkExisting: '/uploadify/check-exists.php',