jQuery上传插件Uploadify 3.2使用

Uploadify下载地址:http://www.uploadify.com/download/ 这里下载最新版的3.2的。
下载下来解压后估计里面很多文件,其实有用的也就一个jquery.uploadify.js和uploadify.swf这两个文件。当然啦,jQuery库那是必须的。
在你使用的项目中,把jquery.uploadify.js引入以后,用法和大多数JQ插件一样。同时也要记得引入swfobject.js这个插件,版本2.2以上的。使用方法例如:

$(function() {

    $("#file_upload_1").uploadify({
        height        : 30,
        swf           : ‘/uploadify/uploadify.swf‘,
        uploader      : ‘/uploadify/uploadify.php‘,
        width         : 120
    });
});

file_upload_1其实也就是一个容器ID,比如上面的只是简单的事例,下面我就把我在项目中做的发出来,每个都有解释:

$(document).ready(function() {
    $("#file_upload").uploadify({
        //开启调试
        ‘debug‘ : false,
        //是否自动上传
        ‘auto‘:false,
        //超时时间
        ‘successTimeout‘:99999,
        //附带值
        ‘formData‘:{
            ‘userid‘:‘用户id‘,
            ‘username‘:‘用户名‘,
            ‘rnd‘:‘加密密文‘
        },
        //flash
        ‘swf‘: "uploadify.swf",
        //不执行默认的onSelect事件
        ‘overrideEvents‘ : [‘onDialogClose‘],
        //文件选择后的容器ID
        ‘queueID‘:‘uploadfileQueue‘,
        //服务器端脚本使用的文件对象的名称 $_FILES个[‘upload‘]
        ‘fileObjName‘:‘upload‘,
        //上传处理程序
        ‘uploader‘:‘imageUpload.php‘,
        //浏览按钮的背景图片路径
        ‘buttonImage‘:‘upbutton.gif‘,
        //浏览按钮的宽度
        ‘width‘:‘100‘,
        //浏览按钮的高度
        ‘height‘:‘32‘,
        //expressInstall.swf文件的路径。
        ‘expressInstall‘:‘expressInstall.swf‘,
        //在浏览窗口底部的文件类型下拉菜单中显示的文本
        ‘fileTypeDesc‘:‘支持的格式:‘,
        //允许上传的文件后缀
        ‘fileTypeExts‘:‘*.jpg;*.jpge;*.gif;*.png‘,
        //上传文件的大小限制
        ‘fileSizeLimit‘:‘3MB‘,
        //上传数量
        ‘queueSizeLimit‘ : 25,
        //每次更新上载的文件的进展
        ‘onUploadProgress‘ : function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {
             //有时候上传进度什么想自己个性化控制,可以利用这个方法
             //使用方法见官方说明
        },
        //选择上传文件后调用
        ‘onSelect‘ : function(file) {

        },
        //返回一个错误,选择文件的时候触发
        ‘onSelectError‘:function(file, errorCode, errorMsg){
            switch(errorCode) {
                case -100:注意修改提示信息应该是用this.queueData.errorMsg =,如果用alert就会有两个弹框
                    //alert("上传的文件数量已经超出系统限制的"+$(‘#file_upload‘).uploadify(‘settings‘,‘queueSizeLimit‘)+"个文件!");
                    break;
                case -110:
                    alert("文件 ["+file.name+"] 大小超出系统限制的"+$(‘#file_upload‘).uploadify(‘settings‘,‘fileSizeLimit‘)+"大小!");
                    break;
                case -120:
                    alert("文件 ["+file.name+"] 大小异常!");
                    break;
                case -130:
                    alert("文件 ["+file.name+"] 类型不正确!");
                    break;
}

switch(errorCode) {
                    case -100:
                        this.queueData.errorMsg = "上传的文件数量已经超出系统限制的" + $(‘#photofile‘).uploadify(‘settings‘, ‘queueSizeLimit‘) + "个文件!";
                        break;
                    case -110:
                        this.queueData.errorMsg = "文件 [" + file.name + "] 大小超出系统限制的" + $(‘#photofile‘).uploadify(‘settings‘, ‘fileSizeLimit‘) + "大小!";
                        break;
                    case -120:
                        this.queueData.errorMsg = "文件 [" + file.name + "] 大小异常!";
                        break;
                    case -130:
                        this.queueData.errorMsg = "文件 [" + file.name + "] 类型不正确!";
                        break;
 }
如果上面的提示还是有英文的话可以使用下面的方法
switch (errorCode) {
                    case -100:
                        this.queueData.errorMsg = "上传的文件数量已经超出系统限制的" + $(‘#photofile‘).uploadify(‘settings‘, ‘queueSizeLimit‘) + "个文件!";
                        break;
                    case -110:
                        this.queueData.errorMsg = "文件 [" + file.name + "] 大小超出系统限制的" + $(‘#photofile‘).uploadify(‘settings‘, ‘fileSizeLimit‘) + "大小!";
                        break;
                    case -120:
                        this.queueData.errorMsg = "文件 [" + file.name + "] 大小异常!";
                        break;
                    case -130:
                        this.queueData.errorMsg = "文件 [" + file.name + "] 类型不正确!";
                        break;
                }

        },
        //检测FLASH失败调用
        ‘onFallback‘:function(){
            alert("您未安装FLASH控件,无法上传图片!请安装FLASH控件后再试。");
        },
        //上传到服务器,服务器返回相应信息到data里
        ‘onUploadSuccess‘:function(file, data, response){
            alert(data);
        }
    });
});

js代码及解释

时间: 2024-10-09 22:13:35

jQuery上传插件Uploadify 3.2使用的相关文章

jQuery上传插件Uploadify使用详解(转发原作者冯威)

jQuery上传插件Uploadify使用详解 本文Uploadify版本为2.1.0,已经过时,截止(2016-09-25)最新版本3.2.1的详细介绍请移步<jQuery上传插件Uploadify使用详解(3.2.1)> Uploadify是jQuery的一个上传插件,实现的效果非常不错,带进度显示.不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中的使用,您也可以点击下面的链接进行演示或下载. 官方下载 官方文档 官方演示 首先按下面的步骤来实现一个简单的

jquery上传插件uploadify 报错http error 302 解决方法之一

前段时间用到jquery上传插件uploadify时,始终出现系统报出 http error 302 的错误. 网上大量搜集信息,基本上都是说session值丢失的问题,根据网友提供的解决方案进行修改,问题并没有解决. 因此,不排除这是解决302错误的解决方法之一,但是我接下来提出另一解决方案,考虑到异步传输的问题,供大家参考(反正我是成功了). 首先是uploadify初始化: $(function() {           $('#projectfile').uploadify({    

JQuery上传插件Uploadify使用详解及错误处理

转自:http://www.jb51.net/article/43498.htm 关于JQuery上传插件Uploadify使用详解网上一大把,基本上内容都一样.我根据网上的步骤配置完成后,会报一些错误,而我根据这些错误去网上找解决方案,却没有相关资料,所以为了不让更多的朋友走弯路,我把我遇到的一些问题进行汇总,也方便我自己以后查阅. 什么是Uploadify Uploadify是JQuery的一个上传插件,支持多文件上传,实现的效果非常不错,带进度显示. 官网提供的是PHP的DEMO,在这里我

jQuery上传插件Uploadify使用详解(3.2.1)(转载)

jQuery上传插件Uploadify使用详解(3.2.1) Sep 25, 2016 | JQuery | 10733 Hits 六年前,因为工作中使用到 jQuery 的上传组件 Uploadify ,写了一篇<JQuery上传插件Uploadify使用详解>的博客来介绍 Uploadify ,其实只是将官方文档简单翻译了下.几年下来居然有50多万的访问量,而且每天通过各种搜索引擎有大几百的朋友会访问到这篇文章.六年时间 Uploadify 从当时的2.1.0到了现在的3.2.1,变化还是

jQuery上传插件Uploadify出现Http Error 302错误解决

前段时间介绍过jquery uploadify上传插件的使用方法,我在使用中遇到过Http Error 302错误问题,应该会有很多人在使用中遇到过,在此记录下来: 首 先http 302是请求被重定向的意思,这就很容易理解了,如果你的uploadify处理上传脚本有session验证,就会出现此错误,因为flash在执行 post请求的时候没有包含cookie信息,而服务器的session会根据客户端的cookie来得到SESSIONID.没有提交cookie自然 就不能获取到session,

jquery 上传插件 uploadify

官网:http://www.uploadify.com/社区:http://www.uploadify.com/forum/ 基于jQuery的文件上传插件,有flash(Uploadify)和html5(UploadFive)两个版本 特点说明:-----------------1.支持多文件上传2.支持拖放上传(html5版本)3.上传进度显示4.可自定义上传限制,包括文件大小.文件数量.文件类型5.高度可定制性 关于下载-------------------Uploadify™:基于fla

JQuery上传插件Uploadify使用详解

目录[-] Options选项设置 Events事件 Methods方法 Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中的使用,您也可以点击下面的链接进行演示或下载. 官方下载 官方文档 官方演示 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 <html xmlns="http://www.w3.org/1999/xhtml"> <he

JQuery上传插件Uploadify使用详解(转)

Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中的使用,您也可以点击下面的链接进行演示或下载. 官方下载 官方文档 官方演示 首先按下面的步骤来实现一个简单的上传功能. 1 创建Web项目,命名为JQueryUploadDemo,从官网上下载最新的版本解压后添加到项目中. 2 在项目中添加UploadHandler.ashx文件用来处理文件的上传. 3 在项目中添加UploadFil

jQuery上传插件Uploadify使用帮助

Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.它的功能特色总结如下: 支持单文件或多文件上传,可控制并发上传的文件数 在服务器端支持各种语言与之配合使用,诸如PHP,.NET,Java…… 通过参数可配置上传文件类型及大小限制 通过参数可配置是否选择文件后自动上传 易于扩展,可控制每一步骤的回调函数(onSelect, onCancel……) 通过接口参数和CSS控制外观 使用帮助: 官网地址:http://www.uploadify.com/ 官方参数配置文档

文件上传利器JQuery上传插件Uploadify

在做日常项目中,经常在后台需要上传图片等资源文件,之前使用过几次这个组件,感觉非常好用 ,但是每次使用的时候都是需要经过一番查阅,所以还不如记住在这里,以后使用的时候就翻翻. 他的官方网站如下:http://www.uploadify.com/ 插件下载地址:http://www.uploadify.com/download 说明文档:http://www.uploadify.com/documentation 在此之前,先说明下插件使用流程,该插件是基于jQuery的,所以我们在使用之前需要引