uploadify.js

时间：2022-09-25 23:47:26

基于uploadify.js实现多文件上传和上传进度条的显示

uploadify是JQuery的一个插件，主要实现文件的异步上传功能，可以自定义文件大小限制、文件类型、是否自动上传等属性，可以显示上传的进度条。官网地址是http://www.uploadify.com/，进入官网首页(不截图了，其实也没啥看的)，可以看到uploadify的标语"Upload files like magic"，意思是说使用uploadify上传文件如魔法一般。目前一共分为两个版本，Flash版和HTML5版，不过HTML5版是收费的，如图：

uploadify.js

这里我们下载Flash版~~

 一、简单文件上传的实现

下载完成后，解压到当前目录，可以看到如下目录：

uploadify.js

uploadify.js是基于JQuery的，所以我们也要引入JQuery，红色圈住的使我们要使用的文件，额！JQuery是我下载放进去的，大家自己下载一个吧。

新建一个Web项目，然后把上面的文件都放到项目根目录下(这样做不好，大家自己规划目录，我就不废话了)，然后新建页面，引入JQuery、uploadify.js和uploadify.css，接下来该干些什么呢？没有头绪啊，打开刚刚的下载目录看看，有个index.php,打开看到是一个官方的Demo,那么就从这个Demo说起吧，下来看看问什么包里面没有JQuery，看图：

uploadify.js

我们可以看到Demo中加载的是googleapis的JQuery，版本是1.7.1，然后看下面的代码：

uploadify.js

一个form表单，里面有个input，type是file,下面来看看JS代码：

uploadify.js

很简单，用JQuery调用了uploadify方法。其中swf和uploader指的是flash文件的地址和上传的处理程序。好，下面亲自动手来写一个试试。

既然是文件上传，我们要先有一个文件上传方法吧，新建FileUpload.ashx文件，写入以下代码：

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

        if (context.Request.Files.Count > 0)

        {

            HttpPostedFile file = context.Request.Files[0];

            string ext = System.IO.Path.GetExtension(file.FileName);

            string fileName = DateTime.Now.Ticks + ext;

            string p = "/upload/" + fileName;

            string path = context.Server.MapPath("~/upload/" + fileName);

            file.SaveAs(path);

            context.Response.Write("1");

        }
uploadify.js

一个简单的文件上传，有人会问文件上传成功问什么返回“1”呢？我们来看看Uploadify.php,如图：

uploadify.js

这下清楚了吧~还有要记得我们上传的目录是upload目录，记得在项目中添加则个目录。接下来我们开始写JS，实现文件的上传，模仿官方的Demo，代码如下：

uploadify.js
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Jsonp.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

   <title></title>

   <script src="jquery-1.11.1.min.js"></script>

    <script src="jquery.uploadify.js"></script>

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

</head>

<body>

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

</body>

</html>

<script type="text/javascript">

   $(function () {

      $("#file_upload").uploadify({

         height: 30,

         swf: 'uploadify.swf',

         uploader: 'UploadFile.ashx',

         width: 120

      });

   });

</script>
uploadify.js

我们就是修改了uploader为我们自己的上传处理程序，然后F5运行，看看效果：

uploadify.js

我们可以看到页面上面出现了一个按钮，点击可以打开对话框选中文件，选择一个文件，点击确定，看到文件上传成功了：

uploadify.js

真的上传成功了吗？我们进入upload目录看看，确实上传成功了。是不是感觉很神奇？当然，我们也可以同时选则多张图片，批量上传，上传成功后，那个进度条过一段时间会一个一个自动消失。是不是突然发现文件上传竟然可以这么简单~~

 二、自定义Uploadify

　　文件上传是实现了，但是按钮样式和文字都不是我们想要的？下面我们来看一下如何自定义Uploadify插件，我们打开jquery.uploadify.js来看一下他的源代码：

uploadify.js

开头的一段密密麻麻的代码是用来显示flash的，不用管她。向下走，我们看到如上图的代码，width、height、swf、uploader，没错这个就是他的自定义选项，下面是我总结的这些自定义选项的含义：

uploadify.js
    id       : $this.attr('id'), // The ID of the DOM object

    swf      : 'uploadify.swf',  // uploadify flash文件的路径

    uploader : 'UploadFile.ashx',  // 上传文件的提交地址

    // Options

    auto            : true,               // 是否自动上传文件

    buttonClass     : '',                 // 按钮的样式，这里可以自定css样式

    buttonCursor    : 'hand',             // 按钮鼠标样式

    buttonImage     : null,               // 按钮图片

    buttonText      : 'SELECT FILES',     // 按钮显示的文字

    checkExisting   : false,              // 上传前是否先检查文件是否存在

    debug           : false,              // 是否启动调试

    fileObjName     : 'Filedata',         // The name of the file object to use in your server-side script

    fileSizeLimit   : 0,                  // 文件大小限制，格式为1KB或1MB

    fileTypeDesc    : 'All Files',        // 文件类型描述

    fileTypeExts    : '*.*',              // 文件扩展名过滤

    height          : 30,                 // 按钮高度

    itemTemplate    : false,              // The template for the file item in the queue

    method          : 'post',             // 提交方式

    multi           : true,               // 是否允许多文件上传

    formData        : {},                 // An object with additional data to send to the server-side upload script with every file upload

    preventCaching  : true,               // Adds a random value to the Flash URL to prevent caching of it (conflicts with existing parameters)

    progressData    : 'percentage',       // 进度条显示，百分比

    queueID         : false,              // The ID of the DOM object to use as a file queue (without the #)

    queueSizeLimit  : 999,                // 文件上传队列的大小限制

    removeCompleted : true,               // 上传成功后移除进度条

    removeTimeout   : 3,                  // The delay in seconds before removing a queue item if removeCompleted is set to true

    requeueErrors   : false,              // Keep errored files in the queue and keep trying to upload them

    successTimeout  : 30,                 // The number of seconds to wait for Flash to detect the server's response after the file has finished uploading

    uploadLimit     : 0,                  // 可以上传文件的最大数量

    width           : 120,                // 按钮宽度

    // 这里是一些扩展的事件

    overrideEvents  : []             // (Array) A list of default event handlers to skip

    /*

    onCancel         // Triggered when a file is cancelled from the queue

    onClearQueue     // Triggered during the 'clear queue' method

    onDestroy        // Triggered when the uploadify object is destroyed

    onDialogClose    // Triggered when the browse dialog is closed

    onDialogOpen     // Triggered when the browse dialog is opened

    onDisable        // Triggered when the browse button gets disabled

    onEnable         // Triggered when the browse button gets enabled

    onFallback       // Triggered is Flash is not detected

    onInit           // Triggered when Uploadify is initialized

    onQueueComplete  // Triggered when all files in the queue have been uploaded

    onSelectError    // Triggered when an error occurs while selecting a file (file size, queue size limit, etc.)

    onSelect         // Triggered for each file that is selected

    onSWFReady       // Triggered when the SWF button is loaded

    onUploadComplete // Triggered when a file upload completes (success or error)

    onUploadError    // Triggered when a file upload returns an error

    onUploadSuccess  // Triggered when a file is uploaded successfully

    onUploadProgress // Triggered every time a file progress is updated

    onUploadStart    // Triggered immediately before a file upload starts
uploadify.js

下面我们来写一个总和示例：

uploadify.js
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Jsonp.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

   <title></title>

   <script src="jquery-1.11.1.min.js"></script>

    <script src="jquery.uploadify.min.js"></script>

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

</head>

<body>

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

   <input type="button" value="上传" onclick="javascript:$('#file_upload').uploadify('upload','*')" />

   <div id="imgBox" style=" overflow:hidden; width:200px; height:200px; "></div>

</body>

</html>

<script type="text/javascript">

   $(function () {

      $("#file_upload").uploadify({

         auto: false,

         fileTypeDesc: 'Image Files',

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

         height: 30,

         buttonText: '请选择图片...',

         swf: 'uploadify.swf',

         uploader: 'UploadFile.ashx',

         width: 120,

         fileSizeLimit: '4MB',

         onUploadSuccess: function (file, data, response) {

            $("#imgBox").html(data);

         },

         onUploadError: function (file, errorCode, errorMsg, errorString) {

            alert('The file ' + file.name + ' could not be uploaded: ' + errorString);

         }

      });

   });

</script>
uploadify.js

功能就是上传图片，上传成功后，显示上传的图片。注意这里自动上传为false，也就是说不自动上传图片，我们给按钮添加了click事件，来实现手动上传，代码如下：

$('#file_upload').uploadify('upload','*')

注意uploadify后面的参数,'*',这个参数代表上传所有文件，如果没有这个参数的话，只会上传第一张图片。

这个时候，上传文件的处理方法如下：

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

        if (context.Request.Files.Count > 0)

        {

            HttpPostedFile file = context.Request.Files[0];

            string ext = System.IO.Path.GetExtension(file.FileName);

            string fileName = DateTime.Now.Ticks + ext;

            string p = "/upload/" + fileName;

            string path = context.Server.MapPath("~/upload/" + fileName);

            file.SaveAs(path);

            context.Response.Write("<img width=\"100px\" height=\"100px\" src=\"" + p + "\" />");

        }

        else

        {

            context.Response.Write("上传错误！");

        }
uploadify.js

随笔分类 - Javascript

Javascript学习心得
摘要: uploadify是JQuery的一个插件，主要实现文件的异步上传功能，可以自定义文件大小限制、文件类型、是否自动上传等属性，可以显示上传的进度条。官网地址是http://www.uploadify.com/，进入官网首页(不截图了，其实也没啥看的)，可以看到uploadify的标语"Uploa...阅读全文
posted @ 2014-12-08 09:17 雲霏霏 阅读(1004) | 评论 (11) 编辑
 
摘要: 好久没有写博客了，过了一个十一长假都变懒了，今天总算是恢复状态了。好了，进入正题，今天来说一说javascript里面的闭包吧！本篇博客主要讲一些实用的东西，主要将闭包的写法、用法和用途。一、什么是闭包和闭包的几种写法和用法 1、什么是闭包闭包，官方对闭包的解释是：一个拥有许多变量和绑定了这些变...阅读全文
posted @ 2014-10-11 17:43 雲霏霏 阅读(3224) | 评论 (15) 编辑

作者：雲霏霏

QQ交流群：243633526

博客地址：http://www.cnblogs.com/yunfeifei/

声明：本博客原创文字只代表本人工作中在某一时间内总结的观点或结论，与本人所在单位没有直接利益关系。非商业，未授权，贴子请以现状保留，转载时必须保留此段声明，且在文章页面明显位置给出原文连接。

如果大家感觉我的博文对大家有帮助，请推荐支持一把，给我写作的动力。

 
分类: Javascript

uploadify.js的更多相关文章

  1. 基于uploadify&period;js实现多文件上传和上传进度条的显示

    uploadify是JQuery的一个插件,主要实现文件的异步上传功能,可以自定义文件大小限制.文件类型.是否自动上传等属性,可以显示上传的进度条.官网地址是http://www.uploadify. ...

  2. Uploadify&period;js引用导致浏览器宽度计算错误，布局混乱

    首先,本人新手,高手勿喷,请忽略.谢谢. 今天在写代码的时候遇到一个奇葩问题,我再在页面加载完成以后,动态计算DIV宽度,将整个层铺满浏览器.一切正常.单当我引入jquery.uploadify.js ...

  3. 文件上传-jquery&period;uploadify&period;js

    <script type="text/javascript" src="../jquery_uploadify/jquery.uploadify-3.1.min.j ...

  4. uploadify&period;js参数说明&lpar;转&rpar;

    一.属性 属性名称 默认值 说明 auto true 设置为true当选择文件后就直接上传了,为false需要点击上传按钮才上传 . buttonClass ” 按钮样式 buttonCursor ‘ ...

  5. &lbrack;js&rsqb;uploadify结合jqueryUI弹出框上传，js中的冒出的bug，又被ie坑了

    引言 最近在一个项目中,在用户列表中需要对给没有签名样本的个别用户上传签名的样本,就想到博客园中上传图片使用弹出框方式,博客园具体怎么实现的不知道,只是如果自己来弄,想到两个插件的结合使用,在弹出框中 ...

  6. jquery&period;uploadify文件上传组件

    1.jquery.uploadify简介 在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好, ...

  7. 带进度条的文件批量上传插件uploadify

    有时项目中需要一个文件批量上传功能时,个人认为uploadify是快速简便的解决方案. 先上效果图: 一. 下载uploadify 从官网下载uploadify的Flash版本(Flash版本免费,另 ...

  8. 谷歌浏览器对uploadify（swf）上传控件 崩溃问题

    页面加上 <script type="text/javascript" src=@Url.Content("~/Content/js/jquery.uploadif ...

  9. jquery&period;uploadify上传文件配置详解&lpar;asp&period;net mvc&rpar;

    页面源码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

随机推荐

  1. 前端打包构建工具gulp快速入门

    因为之前一直有人给我推荐gulp,说他这里好哪里好的.实际上对我来说够用就行.grunt熟悉以后实际上他的配置也不难,说到效率的话确实是个问题,尤其项目大了以后,目前位置遇到的项目都还可以忍受.不过不 ...

  2. 括号配对问题&lowbar;栈&lt&semi;stack&gt&semi;

    问题 A: 括号配对问题 时间限制: 3 Sec  内存限制: 128 MB提交: 3  解决: 2[提交][状态][讨论版] 题目描述 现在,有一行括号序列,请你检查这行括号是否配对. 输入 第一行 ...

  3. Unity3D使用过程中常见的20个问题

    1:天空盒有接缝怎么解决?答:在贴图导入设置里设置Wrap Mode为"Clamp". 2:DDS格式怎么不显示?答:Unity不支持DDS格式,Unity会将除DDS外的其他格式 ...

  4. JS：操作样式表2 &colon;用JS实现添加和删除一个类名的功能（addClass&lpar;&rpar;和removeClass&lpar;&rpar;）

    var box = document.getElementById("box"); box.id = "pox"; 将id = “box”,改为id = “po ...

  5. POI导出excel的简单demo

    目前使用过两种导出excel的方式,一种是如题所示的使用POI的方式进行数据的导出,这种方式一般只有在处理比较多的数据或者说需要导出的excel表格中有图片之类的需要特殊处理的文件的时候使用:还有一种 ...

  6. attilax&period;java 注解的本质and 使用最佳实践&lpar;3&rpar;O7

    attilax.java 注解的本质and 使用最佳实践(3)O7 1. 定义pojo 1 2. 建立注解By eclipse tps 1 3. 注解参数的可支持数据类型: 2 4. 注解处理器 2 ...

  7. 前端工程模块化——以一个php项目为例

    实现一个页面功能总是需要 JavaScript.CSS 和 Template 三种语言相互组织,所以我们真正需要的是一种可以将 JavaScript.CSS 和 Template 同时都考虑进去的模块 ...

  8. error&colon; Cannot find OpenSSL&&num;39&semi;s &lt&semi;evp&period;h&gt&semi; Mac

    问题 mac安装php需要openssl ./configure –with-openssl 报错 error: Cannot find OpenSSL’s 解决 brew install opens ...

  9. SVN常用命令说明

    本文转载至  http://www.blogjava.net/jasmine214--love/archive/2011/01/12/342839.html :1.5 及更新版本 名词说明: WC:W ...

  10. View 的滑动

    View 的滑动 学习自 <Android开发艺术探索> 滑动漫谈 因为Android手机屏幕大小的原因,所以为了显式更多的信息,我们必须采用滚动的方式来处理,因为滚动就涉及到了滑动,有的 ...

相关文章