• Mvc3 + Uploadify(Uploadify详细介绍和应用)


    首先申明下哈,俺新手一个,也是第一次写博。如有错误望指正但勿喷,谢谢!如果对您有用,请留下您的脚印!:)

    1. 下载Uploadify开发包,下载地址:http://www.uploadify.com/download/

                           

        2.下载下来解压uploadify出来后会得到几个文件,但是我们只需要几个开发的js包,一个取消的图片,一个swf文件,一个css样式文件,如下图:

     

    3.得到这几个文件以后,新建一个mvc的项目,将这几个文件放到相应的目录下面,我们就可以开始开发了。

      

     4.当项目都布置好以后,我们先来了解一下Uploadify的所有属性,只有清楚每一个属性是做什么的,才能知道怎么去配置属性,怎么使用其强大的功能:

    名称类型默认值例子作用
    auto Boolean true auto: true 如果为true,就自动上传,当你select了文件以后不需要用户使用upload方法就自动上传
    buttonClass string - buttonClass: "selectbtnClass" 选择按钮的样式
    swf string uploadify.swf swf: "/Content/Uploadify/swf/uploadify.swf" swf文件的地址
    buttonCursor string hand buttonCursor: "arrow" 鼠标悬浮在选择按钮上的样式,只能有两个值hand arrow 手样式或者箭头
    buttonText string SELECT FILES buttonText: "选择.." 按钮显示的文字
    checkExisting string false checkExisting: "@Url.Content("~/Home/Test")" 一个后台地址,来验证正在上传的文件在默认文件夹中是否存在,如果存在返回1 如果0则不存在
    debug Boolean false debug: true 如果为true则页面会显示一个调试对话框
    fileObjName string Filedata fileObjName: "file" 用来设置后台接受这个file文件的参数名字,如果这里设置为fileData 那么后台 request.files["fileData"]
    fileSizeLimit string|number SELECT FILES fileSizeLimit: "50kB",fileSizeLimit: 50 限制上传文件的大小,默认单位是KB,可以是数字也可以是string类型,可以的单位(B,KB,MB,GB)如:500,'500B'都可以。不设置则没有任何限制
    fileTypeDesc string All Files fileTypeDesc: "Excel文件" 文件类型的描述
    fileTypeExts string *.* fileTypeExts: "*.xls;*.xlsx;*.docx;*.*" 设置选择文件类型,如果要设置多个要用封号隔开,如果不设置则为*.*任意类型
    queueID string false queueID:"queuediv"  可以任意选择一个div或者其他标签作为你的文件列表,这里填写标签的ID
    formData json - formData: { 'type': _type, 'age': _age } 限制上传文件的大小,默认单位是KB,可以是数字也可以是string类型,可以的单位(B,KB,MB,GB)如:500,'500B'都可以。不设置则没有任何限制
    itemTemplate string false   设置显示列表的html代码, 有几个字段 fileSize:文件的大小,fileName:文件名字,instanceID:uploadify这个控件的id,fileID:文件在queue上的id
    multi Boolean true multi: true 设置是否可以批量选择。这个地方只能控制是否可以一次选择多个文件,不是用来控制是否是单个上传还是批量上传的,因为用户还是可以一个一个的选择多个文件
    method string post method: "get" 上传类型 post或者get
    overrideEvents string - overrideEvents: ["onSelectError","onDialogClose"] 忽略jq自身的事件,只响应用户重写的事件
    uploader string uploadify.php uploader: "@Url.Content("~/Home/Upload")" 必须的一个属性,请求的后台地址
    preventCaching Boolean false preventCaching: true 在url后面添加一个任意值一起传递到后台,防止缓存
    progressData string percentage progressData: "speed" 只能有两个值percentage or speed 上传的进度条上显示的是百分比或者多少kb/s
    queueSizeLimit number 999 queueSizeLimit: 10 设置上传文件列表数目如果设置为只允许单个上传只需要设置为1即可,如果超过则响应onSelectError方法
    removeComplete Boolean true removeComplete: true 将已经上传完的文件移除列表,Boolean值,默认值为true
    removeTimeout number 3s removeTimeout: 10 将一个完成的文件延迟多少秒从列表中移除
    requeueErrors Boolean false requeueErrors: true 如果设置为true,上传发生错误时,文件将重复上传多次以后才返回错误
    successTimeOut number 30 successTimeOut: 5 文件上传成功以后等待服务器响应时间,如果超过这个时间服务器还没有响应那么将子自动显示其上传成功设置response为true. onUploadSuccess
    uploadLimit number 999 uploadLimit:10 这个貌似和queueSizeLimit重复了,测试显示只有同时满足这两个才能上传。然后超过以后触发的方法不同 这个是onUploadError
    width number 120 100 设置按钮的宽度,只需要写一个数字就好了,不能"60px"这样写
    height number 30 height: 60 设置按钮的高度

    5.Uploadify封装的一些列事件的作用和参数介绍:

    名称参数描述
    onCancel file对象,包含name,size,type(.*)等属性 当有文件被取消的时候触发这个事件
    onClearQueue queueItemCount(number)列表文件数量 使用Cancel方法清空列表的时候触发,当触发的时候这个事件比onCancel先执行,queueItemCount(number)列表文件数量
    onDestroy - /当destroy方法使用的时候触发,没有参数
    onDialogClose queueData对象 当选择框关闭的时候触发事件,queueData包含fileSelected选择文件数量,fileReplaced被替换文件数量,fileCanceled被取消的数量,fileErrored出现错误文件数量,fileQueued添加到列表上的数量
    onDialogOpen - 当选择对话框被打开以后,当你点击打开文件的时候触发,没有参数,触发在close之前
    onDisable - 当用disable,true禁用控件方法使用的时候触发,没有参数
    onEnable - 当使用disable false启用控件的时候触发,没有参数
    onFallback - 在初始化控件的时候当浏览器的flash版本和控件的不兼容或者没有安装flash都会触发这个事件,没有参数
    onInit instance对象 在控件第一次被加载的时候,在初始化的最后触发这个事件,instance是uploadify这个控件对象,可以得到这个控件的一切初始化后的信息,比如instance.settings.buttonText,instance.settings.buttonClass;
    onQueueComplete queueData对象 当列表中的所有文件都上传完成complete的时候触发,queueData包含属性uploadsSuccessful上传成功的数量,uploadsErrored上传出错的数量
    onSelect file对象,包含name,size,type(.*)等属性 当文件被选择 而且添加到列表上以后才触发,如果选择而没有添加到列表上是不会触发的,比如选择以后提示已经存在列表上是否覆盖,然后点击了取消是不会触发的
    onSelectError file, errorcode, errormsg errorcode(数字): QUEUE_LIMIT_EXCEEDED:-100(文件数量超过列表限制),FILE_EXCEEDS_SIZE_LIMIT:-110(文件大小超过限制),ZERO_BYTE_FILE:-120(文件为空),INVALID_FILETYPE:-130(文件类型错误).如果不设置将jquery中的onSelectError事件给忽略掉,他会执行你的错误信息之后还会执行他默认的方法一次,弹出所有的错误。所以我们要设置overrideEvents: ["onSelectError","onDialogClose"],这个属性,那么就重写了这个事件,jquery就会默认不执行他自己的这个事件,而只执行你重写的这个事件。当然如果只重写这个事件,他最后还是会弹出一个英文提示,大致意思是这个文件不能被添加到列表中,而触发这个事件的是onDialogClose,因为dialogClose的时候 他也会验证一次文件是否有error,如果有就弹出来,所以这里要忽略掉onDialogClose,当然你自己如果重写了这个事件,他会执行玩selecterror以后再执行你重写的ondialogclose事件
    onSWFReady - 没有参数,当swf被加载好了,而且准备好了的时候就触发这个事件
    onUploadComplete file对象,包含name,size,type(.*)等属性 为每一个上传完成的文件触发事件,与onQueueComplete不同,queueComplete是所有文件上传完以后
    onUploadError file, errorCode, errorMsg, errorString(详情看onSelectError参数的介绍) 当文件上传但是返回了一个错误的时候触发,errorString很详细的错误细节,当然如果你重写这个事件 也是需要忽略掉他自身的事件的,设置overrideEvents属性
    onUploadProgress file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal 在每个文件上传的过程中的每时每刻都触发,bytesUploaded当前正在上传的文件总共上传的字节,bytesTotal当前正在上传的文件的总字节,totalBytesUploaded总共上传的字节,包含已经上传完了的和现在正在上传的,totalbytestotal 列表中所有文件的字节数(包含已经上传完成)
    onUploadStart file对象,包含name,size,type(.*)等属性 文件上传之前触发
    onUploadSuccess file, data, response 为每个文件上传success以后触发,data为上传成功以后后台返回的数据,response为当后台服务器响应以后返回true。如果服务器没有响应,则返回false;如果返回的是false,当successtimeout这个属性设置的事件过后,控件自动显示其为true.这样得到的data当然为空

    6.Uploadify封装的一些方法的介绍:

        upload:将列表中的文件上传到服务器。
        cancel:清除列表中的文件。
        destroy:销毁这个控件。
        Disable:禁用控件。
        Enable:启用控件。
        settings:修改控件配置的属性。

       

     注意:$("#file_upload").uploadify("settings","buttonText","改变")唯一不能改变的属性就是swf地址
     

    7.了解玩所有的属性,事件,方法以后就可以正式开始Uploadify的上传之旅了。

      前端View代码:

    @{
        ViewBag.Title = "主页";
    }
    
    <script src="@Url.Content("~/Scripts/jquery-1.7.1.js")"></script>
    <script src="@Url.Content("~/Scripts/Uploadify/jquery.uploadify.js")"></script>
    <link href="@Url.Content("~/Content/Uploadify/uploadify.css")" rel="stylesheet" />
    <style>
    
        #queueDiv
    {
    background-color:#aaa;
    overflow-y:scroll;
    color:white;
    font-size:12px;
    } .selectbtnClass { background
    -color:red; text-align:center; border-radius:25px; } </style> <script type="text/javascript"> $(function () { var _type = "男"; var _age = 20; $("#file_upload").uploadify({ auto: true, buttonClass: "selectbtnClass", swf: "/Content/Uploadify/swf/uploadify.swf", buttonCursor: "arrow", buttonText: "选择..", checkExisting: "@Url.Content("~/Home/Test")", debug: true, fileObjName: "fileData", fileSizeLimit: "50kB", fileTypeDesc: "Excel文件", fileTypeExts: "*.xls;*.xlsx;*.docx;*.*", formData: { 'type': _type, 'age': _age },        queueID:"queueDiv",
    itemTemplate:
    '<div style="background-color:#aaa;color:red;350px;" id="${fileID}" class="uploadify-queue-item">\ <div class="cancel">\ <a href="javascript:$(\'#${instanceID}\').uploadify(\'cancel\', \'${fileID}\')">X</a>\ </div>\ <span class="fileName">${fileName} (${fileSize})</span><span class="data"></span>\ </div>', multi: true, method: "post", overrideEvents: ["onSelectError","onDialogClose"], uploader: "@Url.Content("~/Home/Upload")", preventCaching: true, progressData: "speed", queueSizeLimit: 10, removeComplete: true, removeTimeout: 10, requeueErrors: true, successTimeOut: 5, uploadLimit:10, 100, height: 60, onCancel: function (file) { alert(file.name); }, onClearQueue: function (queueItemCount) { alert("清除的文件数目" + queueItemCount+"(onClearQueue事件被触发)"); }, onDestroy: function () { alert("uploadify is Destroyed(onDestroy事件被触发)"); }, onDialogClose: function (queueData) { var file = queueData.files; alert("选择文件"+queueData.filesSelected+"|被取消的文件数"+queueData.filesReplaced+"(onDialogClose事件被触发)"); }, onDialogOpen: function () { alert("选择框被打开了;(onDialogOpen事件触发)"); }, onDisable: function () { alert("控件被禁用了;(onDisable事件触发)"); }, onEnable: function () { alert("控件可以使用了(onEnable事件被触发)"); }, onFallback: function () { alert("没有发现Flash(onFallback事件被触发)"); }, onInit: function (instance) { alert("buttonText:" + instance.settings.buttonText+"(onInit事件被触发)"); }, onQueueComplete: function (queueData) { alert(queueData.uploadsSuccessful); }, onSelect: function (file) { alert("文件" + file.name + "被选择了(onSelect事件触发)"); }, onSelectError: function (file, errorcode, errormsg) { if (errorcode == -100) { alert("文件" + file.name + "引发了错误,错误原因:文件数量超过列表限制(onSelectError事件触发)"); return; } else if (errorcode == -110) { alert("文件" + file.name + "引发了错误,错误原因:文件太大了(onSelectError事件触发)"); return; } else if (errorcode == -120) { alert("文件" + file.name + "引发了错误,错误原因:文件为空(onSelectError事件触发)"); return; } else if (errorcode == -130) { alert("文件" + file.name + "引发了错误,错误原因:文件类型错误(onSelectError事件触发)"); return; } }, onSWFReady: function () { alert("Flash已经初始化完毕(onSWFReady事件被触发)"); }, onUploadComplete: function (file) { alert("文件" + file.name + "上传完成!(onUploadComplete事件被触发)"); }, onUploadError: function (file, errorCode, errorMsg, errorString) { alert("文件"+file.name+"错误代码:"+errorCode+"原因"+errorMsg+"详细"+errorString+"(onUploadError事件被触发)") }, onUploadProgress: function (file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) { alert("文件" + file.name + "总共:" + totalBytesTotal + "总共上传:" + totalBytesUploaded + "(OnUploadProgress事件被触发)(希望不要被坑,一般将这个信息用html显示出来滴!这里简单的弹出来)"); }, onUploadStart: function (file) { alert("文件" + file.name+"(onUploadStart事件触发)"); }, onUploadSuccess: function (file, data, response) { alert("文件" + file.name + "返回数据" + data + "返回response" + response + "(onUploadSuccess事件被触发)"); } }); }) </script> <input type="file" id="file_upload" name="file_upload" /> <div id="queueDiv"></div>
    <a href="#" onclick="javascript:$('#file_upload').uploadify('upload','*')">Upload</a>|| <a href="#" onclick="javascript:$('#file_upload').uploadify('cancel','*')">Clear Queue</a> || <a href="#" onclick="javascript:$('#file_upload').uploadify('destroy')">Destroy</a> || <a href="#" onclick="javascript:$('#file_upload').uploadify('disable',true)">Disable</a>|| <a href="#" onclick="javascript:$('#file_upload').uploadify('disable',false)">Enable</a>|| <a href="#" onclick="javascript:$('#file_upload').uploadify('stop')">Stop</a>|| <a href="#" onclick='$("#file_upload").uploadify("settings","buttonText","改变")'>改变</a> <div style="color:red">$("#file_upload").uploadify("settings","buttonText","改变")唯一不能改变的属性就是swf地址<br /></div>

     后台代码比较简单,Controller代码如下:

    1     public void Upload()
    2         {
    3             HttpPostedFileBase file = Request.Files["fileData"];
    4             string path = Server.MapPath("~/Upload/");
    5             file.SaveAs(path+file.FileName);
    6 
    7         }
  • 相关阅读:
    Java 中的JOption函数
    01背包与完全背包(对比)
    AC注定不平坦(大神回忆录)
    背包精讲之——01背包
    动规问题概述(待整理)
    背包九讲
    Tautology(递推)||(栈(stack))(待整理)
    深度优先和广度优先区别
    Linux下JDK、Tomcat的安装及配置
    同IP不同端口Session冲突问题
  • 原文地址:https://www.cnblogs.com/ylchen/p/2770843.html
Copyright © 2020-2023  润新知