JQuery文件上传插件Uploadify介绍以及用法

属性介绍:

uploader : uploadify.swf 文件的相对路径,该swf文件是一个带有文字BROWSE的按钮,点击后淡出打开文件对话框,默认值:uploadify.swf。 

script :   后台处理程序的相对路径 。默认值:uploadify.php 

checkScript :用来判断上传选择的文件在服务器是否存在的后台处理程序的相对路径 

fileDataName :设置一个名字,在服务器处理程序中根据该名字来取上传文件的数据。默认为Filedata 

method : 提交方式Post Get 默认为Post 

scriptAccess flash脚本文件的访问模式,如果在本地测试设置为always,默认值:sameDomain  

folder :  上传文件存放的目录 。 

queueID : 文件队列的ID,该ID与存放文件队列的divID一致。 

queueSizeLimit : 当允许多文件生成时,设置选择文件的个数,默认值:999 。 

multi : 设置为true时可以上传多个文件。 

auto : 设置为true当选择文件后就直接上传了,为false需要点击上传按钮才上传 。 

fileDesc : 这个属性值必须设置fileExt属性后才有效,用来设置选择文件对话框中的提示文本,如设置fileDesc为“请选择rar doc pdf文件”

fileExt : 设置可以选择的文件的类型,格式如:'*.doc;*.pdf;*.rar' 。 

sizeLimit : 上传文件的大小限制 。 

simUploadLimit : 允许同时上传的个数 默认值:。 

buttonText : 浏览按钮的文本,默认值:BROWSE 。 

buttonImg : 浏览按钮的图片的路径 。 

hideButton : 设置为true则隐藏浏览按钮的图片 。 

rollover : 值为truefalse,设置为true时当鼠标移到浏览按钮上时有反转效果。 

width : 设置浏览按钮的宽度 ,默认值:110。 

height : 设置浏览按钮的高度 ,默认值:30。 

wmode : 设置该项为transparent 可以使浏览按钮的flash背景文件透明,并且flash文件会被置为页面的最高层。 默认值:opaque 。 

cancelImg :选择文件到文件队列中后的每一个文件上的关闭按钮图标

上面介绍的key值的value都为字符串或是布尔类型,比较简单,接下来要介绍的key值的value为一个函数,可以在选择文件、出错或其他一些操作的时候返回一些信息给用户。

onInit : 做一些初始化的工作。

onSelect :选择文件时触发,该函数有三个参数

event:事件对象。 

queueID:文件的唯一标识,由6为随机字符组成。 

fileObj:选择的文件对象,有namesizecreationDatemodificationDatetype 5个属性。


代码:



前台:


<div style="position: relative;">

        <div class="imgLoad2" style="display: none">

            <div id="fileQueue">

            </div>

            <input type="file" name="uploadify" id="uploadify" />

            <p>

                <a href="JavaScript:$('#uploadify').uploadifyUpload()" class="btn1">上传</a><span class="null1">

                </span><a href="#" onclick="colseWindow()" class="btn2">取消</a>

            </p>

        </div>

    </div>


js代码:

    //图标上传

$("#uploadify").uploadify({

                'uploader''../JS/jquery.uploadify-v2.1.0/uploadify.swf',

                'script''../UploadHandler.ashx',

                'cancelImg''../JS/jquery.uploadify-v2.1.0/cancel.png',

                'folder''../UploadFile',

                'queueID''fileQueue',

                'fileDesc'"请选择png或者jpg格式图片",

                'fileExt'"*.jpg;*.png",

                //        'buttonImg': "../images/upload2.png",

                'auto': false,

                'buttonText'"浏 览",

                'multi': false,

                'onComplete': function (event, queueID, fileObj, response, data) {

                    //把上传图标的地址存到session

                    $.ajax({

                        type: "POST",

                        //dataType:"Text",  

                        url: "ashxs/setSession.ashx",

                        contentType: "application/x-www-form-urlencoded; charset=utf-8",

                        data: { key: "uploadIconUrl", value: "http://220.249.104.50:8083/UploadFile/" + fileObj.name },

                        success: function (msg) {

                            if (msg != "N") {

                                //上次图标后把勾上的系统图标隐藏

                                $(".checks").hide();

                                $("#imgUpload").attr("src", msg);

                                //                        alert("图片:" + fileObj.name + ",上传成功");

                            }

                        }

                    });

                    $("#full_dark").hide();

                    $(".imgLoad2").hide();

                },

                'onError': function (event, queueID, fileObj, errorObj) {

                    if (fileObj.size > "5271521") {

                        alert("请上传5M以下的图片");

                    }

                }

            });




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值