优秀的jQuery无刷新上传插件Uploadify

所属分类:输入-上传

 60640  107  查看评论 (17)
优秀的jQuery无刷新上传插件Uploadify ie兼容6

上传功能在我们的程序中是经常会用到的,而传统的http上传在安全性和文件大小上都会有一定的限制,而且不能看到上传进度。所以就出现了采用Flash和其他一些方式来实现人性化的上传效果。
那么今天我要给大家介绍额就是一款jQuery的无刷新上传插件 -Uploadify,他有免费版和收费版两种,免费版的是用Flash实现的,而收费版的是用html5实现的,主要有以下的特点:
1、高度地定义化,参数、方法和事件丰富
2、支持Flash和html两种版本
3、强大的社区支持
4、支持多文件上传和进度显示

接下来我就来介绍一下免费版的 Uploadify。


环境要求jQuery 的版本为 1.4.x 或者以上版本

Flash Player 的版本为 9.0.24 或者更高版本
一门服务端语言 PHP, ASP.Net, Cold Fusion, 或者类似的服务端语言
使用步骤
1、下载 Uploadify压缩包
2、解压文件,将以下的文件复制到自己的网站中
jquery.uploadify-3.1.min.js
uploadify.swf
uploadify.css
uploadify-cancel.png
在这里需要注意的是还有一个文件,是处理后台接收的,官方给的是PHP的Demo,所以如果你的程序是PHP的话,就将 uploadify.php 一同复制到自己的网站中,如果是其他语言的话则复制对应的后台处理文件,下面我会给出NET版本的源码。
3、引入以下js和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>


4、在页面中添加一个file文本框

<input type="file" name="file_upload" id="file_upload">


5、加入以下代码初始化插件

 $(function() {
    $('#file_upload').uploadify({
        'swf'      : 'uploadify.swf',
        'uploader' : 'uploadify.php'
        // Put your options here
    });
});


其中 swf 为 uploadify.swf 文件的路径
uploader 为 后台处理程序的路径
其它的参数大家可以参考 文档 在此我就不做讲述了
整个html文件类似下面的代码

<title>
    My Uploadify Implementation
</title>
<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>
<script type="text/javascript">
    $(function() {
        $('#file_upload').uploadify({
            'swf'      : 'uploadify.swf',
            'uploader' : 'uploadify.php'
            // Your options here
        });
    });
    </script>
<input type="file" name="file_upload" id="file_upload">


NET版本后台处理程序
这个是从网上找的,亲测可以使用,当然我们可以根据自己的需要做一些改变,比如文件保存的路径,文件名根据日期来命名等等。

using System; 
using System.Data; 
using System.Configuration; 
using System.Collections; 
using System.Web; 
using System.Web.Security; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
using System.Web.UI.WebControls.WebParts; 
using System.Web.UI.HtmlControls; 
using System.IO; 
namespace WebApplication2 
{ 
	public partial class Upload : System.Web.UI.Page 
	{ 
	protected void Page_Load(object sender, EventArgs e) 
    { 
        HttpPostedFile file = Request.Files["FileData"]; 
        string uploadpath = Server.MapPath(Request["folder"] + "\"); 
        if (file != null) 
        { 
            if (!Directory.Exists(uploadpath)) 
                { 
                    Directory.CreateDirectory(uploadpath); 
                } 
                file.SaveAs(uploadpath + file.FileName); 
                Response.Write("1"); 
            } 
            else 
            { 
                Response.Write("0"); 
            } 
        } 
    } 
}

相关插件-上传

图片上传插件zyupload java版实例代码

本插件经本人多次修改完善,功能齐全,支持多图片上传、拖拽上传、剪辑、编辑,上传预览,编辑获取默认值等功能,并且每一个功能对应一个demo,简单易懂,方便学习修改
  上传
 47221  320

基于H5的图片拖拽和预览插件dropify

基于HTML5,能支持将本地图片拖入网页并预览图片的插件。
  上传
 13964  60

基于amazeui头像上传

基于amazeui框架,设计的头像上传插件
  上传
 6835  66

可拖拽和带预览图的jQuery文件上传插件ssi-uploader

ssi-uploader是一款带预览图并且可以拖拽文件的jQuery ajax文件上传插件。该文件上传插件支持AJAX,支持多文件上传,可控制上的文件格式和文件大小,提供各种回调函数,使用非常方便。
  上传
 30543  94

讨论这个项目(17)回答他人问题或分享插件使用方法奖励jQ币

    幻影追风 0
    2017/2/21 15:23:57

    我用MVC创建项目后,使用这个插件,选择按钮都不见了

    回复
    0
    2016/12/6 9:12:04
    迷路的风 0
    2016/11/19 23:11:13
    'uploader' : 'uploadify.php'这个 php路径在net里面怎么写路径
        Memory emiT...0
        2017/3/13 11:00:06

        这个要写绝对路径

    回复
    迷路的风 0
    2016/11/19 22:11:31
    提示上下文不存在Directory怎么解决 回复
    小主要吃肉。 0
    2016/10/26 17:10:03
    突然不兼容火狐了  object会覆盖button一片白了。。。
        徽悦1to10
        2016/11/3 15:11:40
        对啊,你怎么解决的?
        小主要吃肉。0
        2016/11/15 14:11:34
        网上一些解决办法都试过了  没用啊  准备换了  你解决了吗
        Memory emiT...0
        2017/3/13 11:00:41

        有控制按钮的属性,用Jquery 改改就可以了

    回复
    天长地久 0
    2016/10/21 16:10:40
    上传后找不到文件 回复
    小钻风 0
    2016/8/22 18:08:28
    我这不能选择文件
        孤城万仞0
        2016/11/3 16:11:28
        我也打不开
    回复
    来自何方 0
    2016/8/16 14:08:28
    $('#file_upload').uploadify({
        'swf': 'uploadify.swf',
        'uploader': 'uploadify.php',
        /感觉这个php里的代码没起到作用   
    });
        Memory emiT...0
        2017/3/13 11:01:21

        swf―相对路径    uploader―绝对路径

    回复
    来自何方 0
    2016/8/16 14:08:55
    为什么不能进入这个页面啦? 回复
    可以问里 0
    2016/1/5 11:01:13

    然而

    Firefox并不兼容

    360版本7极速模式并不兼容

    360版本8普通模式并不兼容

    IE11并不兼容

    IE10并不兼容

    =====

    想知道我配置还是本身就。。。。。。

        Scorpio0
        2017/4/18 15:56:10

        火狐不兼容,反正网上搜遍了,没找到解决办法

    回复
取消回复