先簡單的侃兩句：貌似已經有兩個月的時間沒有寫過文章了，不過仍會像以前那样每天至少有一至兩個小時是泡在园子裏看各位大神的文章。前些天在研究“ajax無刷新上傳”方面的一些插件，用SWFUpload實現了無刷新上傳的功能，不過個人覺得不是很完美。

昨天在網上找到了一個叫做uploadify的jquery上傳插件，看到园子裏有幾篇文章也是介紹這個插件的，心想何不用這個試試。

不過园子裏的這幾篇文章用到的uploadify還是以前的舊版本uploadify-v2.1.0，我在官網上下載的是uploadify-v3.1版，其中的一些参數以及調用方法也不同了，還好官網有幫助文檔。

（唯一感覺不爽的一點就是這個開發包是針對php的，官網並沒有.NET版本，但至少原理都是一样的，簡單的修改一下就可以了。還是那句話“不僅要知其然，還要知其所以然”，知其所以然了，一切都是浮雲啊）

好了，廢話不多說。先上個效果圖，有圖有真相：

一：從官網下載開發包添加到項目中，我對這個開發包做了一個精簡，刪去了那些php方面的文件：

項目基本結構：

二：添加對css和js文件的引用：

注意jquery.js文件和uploadify.js文件的調用順序。

三：Default.aspx頁面的代碼如下：

<head runat="server">

    <title></title>

    <link href="js/uploadify/uploadify.css" rel="stylesheet" type="text/css" />

    <script src="js/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>

    <script src="js/uploadify/jquery.uploadify-3.1.js" type="text/javascript"></script>

 <script type="text/javascript">

        $(function () {

            $("#uploadify").uploadify({

                //指定swf文件

                'swf': 'js/uploadify/uploadify.swf',

                //後台處理的頁面

                'uploader': 'UploadHandler.ashx',

                //按鈕顯示的文字

                'buttonText': '上傳圖片',

                //顯示的高度和寬度，默認 height 30；width 120

                //'height': 15,

                //'width': 80,

                //上傳文件的類型  默認为所有文件    'All Files'  ;  '*.*'

                //在瀏覽窗口底部的文件類型下拉菜單中顯示的文本

                'fileTypeDesc': 'Image Files',

                //允許上傳的文件後綴

                'fileTypeExts': '*.gif; *.jpg; *.png',

                //發送给後台的其他参數通過formData指定

                //'formData': { 'someKey': 'someValue', 'someOtherKey': 1 },

                //上傳文件頁面中，你想要用來作为文件隊列的元素的id, 默認为false  自動生成,  不帶#

                //'queueID': 'fileQueue',

                //選擇文件後自動上傳

                'auto': true,

                //設置为true將允許多文件上傳

                'multi': true

            });

        });

    

    </script>

</head>

<body>

    <div>

        <%--用來作为文件隊列區域--%>

        <div id="fileQueue">

        </div>

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

        <p>

            <a href="javascript:$('#uploadify').uploadify('upload')">上傳</a>| 

            <a href="javascript:$('#uploadify').uploadify('cancel')">取消上傳</a>

        </p>

    </div>

</body>

</html>

四：一般處理程序UploadHandler.ashx簡單代碼如下：

public void ProcessRequest(HttpContext context)

        {

            context.Response.ContentType = "text/plain";

            //http://go.rritw.com/www.cnblogs.com/babycool/

            //接收上傳後的文件

            HttpPostedFile file = context.Request.Files["Filedata"];

            //其他参數

            //string somekey = context.Request["someKey"];

            //string other = context.Request["someOtherKey"];

            //獲取文件的保存路徑

            string uploadPath =

                HttpContext.Current.Server.MapPath("UploadImages" + "\\");

            //判斷上傳的文件是否为空

            if (file != null)

            {

                if (!Directory.Exists(uploadPath))

                {

                    Directory.CreateDirectory(uploadPath);

                }

                //保存文件

                file.SaveAs(uploadPath + file.FileName);

               context.Response.Write("1");

            }

            else

            {

                context.Response.Write("0");

            }  

        }

        public bool IsReusable

        {

            get

            {

                return false;

            }

        }

五：用到的参數介紹：

通過查看jquery.uploadify-3.1.js中的默認設置並参考官方文檔可得知：

参數不重新指定則保持默認：

swf：uploadify.swf 文件的相對路徑

uploader：後台處理程序的相對路徑

buttonText：按鈕顯示的文字

上傳文件的類型默認为所有文件  'All Files'    '*.*'

可以通過以下兩参數指定，指定方法見步驟三中的代碼：

fileTypeDesc；fileTypeExts；

auto：为true表示選擇文件後自動上傳；如果不想自動上傳，需設定为false，並通過

1 <a href="javascript:$('#uploadify').uploadify('upload')">上傳</a>| 

2 <a href="javascript:$('#uploadify').uploadify('cancel')">取消上傳</a>

來指定是上傳還是取消上傳；

multi：設置为true將允許多文件上傳；

method： 提交方式Post 或Get 默認为Post；

queueSizeLimit：當允許多文件上傳時，設置選擇文件的個數，默認值为999 ；

另外，取消上傳圖片的路徑是設置在css文件中的；

其他更多設置可以参考官網的幫助文檔。

還有一個需要注意的一點是：一般在設定了選擇上傳文件路徑時比如只允許上傳*.jpg;*.png;*.gif格式的圖片文件，則除了指定fileTypeDesc；fileTypeExts；兩個参數外，還要在服務器端即一般處理程序中再次對上傳文件的文件擴展名進行判斷，以防一些用戶跳過客戶端驗證上傳惡意文件。

下面附上我在博客园找到的那兩篇介紹uploadify的文章鏈接，供大家参考：

JQuery上傳插件Uploadify使用詳解

利用插件uploadify完成ajax效果的圖片上傳

並附上uploadify的官方網站

我整理的開發包：整理uploadify-v3.1.NET開發包

當然，這僅僅是一個簡單的試用，具體用到項目中還要考慮很多方面的問題。

歡迎各位大神多多指教，如果該文章對你有幫助大家可以一起討論討論。

轉載請注明出處。

jQuery無刷新上傳之uploadify簡單試用的更多相关文章

  1. jQuery无刷新上传之uploadify简单试用

    先简单的侃两句:貌似已经有两个月的时间没有写过文章了,不过仍会像以前那样每天至少有一至两个小时是泡在园子里看各位大神的文章.前些天在研究“ajax无刷新上传”方面的一些插件,用SWFUpload实现了 ...

  2. jQuery无刷新上传之uploadify

    引自 文章 http://www.cnblogs.com/babycool/archive/2012/08/04/2623137.html 将文章里的代码整合在了一个解决方案里,直接可以下载测试,上代 ...

  3. ASP.NET MVC使用jQuery无刷新上传

    昨晚网友有下载了一个jQuery无刷新上传的小功能,他尝试搬至ASP.NET MVC应用程序中去,在上传死活无效果.Insus.NET使用Teamviewer远程桌面,操作一下,果真是有问题.网友是说 ...

  4. jQuery无刷新上传学习心得

    记得刚离开大学,进入目前这家公司不到一个月时,有一位前辈给我们当时的新人讲了下JS无刷新上传的相关知识. 在此之前,一直都是在使用C#提供的服务器上传控件FileUpload,但是每次使用时,都会刷新 ...

  5. jquery 无刷新上传的小function

    function zll_up(click_id,up_url,text_id,show_id){ this.create = function(){} //当点击指定元素时,创建iframe for ...

  6. ThinkPHP3.2.2 无刷新上传插件uploadify 使用

    一. 在控制器中写一个方法,用于上传 public function upload(){ if (!empty($_FILES)) { //图片上传设置 $config = array( 'maxSi ...

  7. Jquery无刷新上传单个文件

    function ajax_photo(photo_type){        $(document).on('change','#sitephoto',function(){             ...

  8. C#_Jquery无刷新上传

    昨晚网友有下载了一个jQuery无刷新上传的小功能,他尝试搬至ASP.NET MVC应用程序中去,在上传死活无效果.Insus.NET使用Teamviewer远程桌面,操作一下,果真是有问题.网友是说 ...

  9. 將UNITY作品上傳到Facebook App！

    前言 大家好,今天要來介紹如何用UNITY 將製作好的遊戲上傳到Facebook,也就是Facebook App.近期Facebook與Unity合作而推出了新的插件,利用插件可上傳分數.邀請好友.P ...

随机推荐

  1. scrapy增加爬取效率

    增加并发: 默认scrapy开启的并发线程为32个,可以适当进行增加.在settings配置文件中修改CONCURRENT_REQUESTS = 100值为100,并发设置成了为100. 降低日志级别 ...

  2. 2019年，Linux运维行业的趋势，跟不上学习就被淘汰

    运维行业经历了多年的发展,已经有了很大的变化,最开始的机房.网线.人肉,到现在一步步的自动化.智能化.容器化,运维人员的职业技能要求越来越高,稍不注意就可能被淘汰. 今天马小哥就来盘点一下2019年运 ...

  3. 第2节 hive基本操作：11、hive当中的分桶表以及修改表删除表数据加载数据导出等

    分桶表 将数据按照指定的字段进行分成多个桶中去,说白了就是将数据按照字段进行划分,可以将数据按照字段划分到多个文件当中去 开启hive的桶表功能 set hive.enforce.bucketing= ...

  4. vue 自定义指令使用

    <template> <div> <!-- 让input元素在打开页面的时候就获得焦点 --> <input type="text" v- ...

  5. jquery中ajax原生代码的分析模仿

    function ajax(obj){     var defaults = {         url: "#",         data: {},         type: ...

  6. Python学习笔记（1）——Python的概述（Python的环境、变量、数据类型、基本运算）

    Table of Contents 1. Python概述 1.1. Python基础知识 1.2. 运行环境 1.3. Python的格式 1.4. Python的变量. 2. Python的数据类 ...

  7. [Python3网络爬虫开发实战] 1.8.3-Scrapy-Splash的安装

    Scrapy-Splash是一个Scrapy中支持JavaScript渲染的工具,本节来介绍它的安装方式. Scrapy-Splash的安装分为两部分.一个是Splash服务的安装,具体是通过Dock ...

  8. python链家网高并发异步爬虫and异步存入数据

    python链家网二手房异步IO爬虫,使用asyncio.aiohttp和aiomysql 很多小伙伴初学python时都会学习到爬虫,刚入门时会使用requests.urllib这些同步的库进行单线 ...

  9. Python中的数据类型之字符串

    字符串的定义,可是使用类似下面的方式 name = "hello python" Python 中字符串自带了一些常用的方法,比如: title() #用来将每个单词首字母大写up ...

  10. UVa 514 铁轨

    题意: #include <bits/stdc++.h> using namespace std; int main() { int n; ]; ; ) { ]) && n ...