借鉴别人总结的uploadify：基于jquery的文件上传插件，支持ajax无刷新上传，多个文件同时上传，上传进行进度显示，控制文件上传大小，删除已上传文件。

uploadify有两个版本，一个用flash,一个是html5。html5的需要付费~所以这里只说flash版本的用法。

uploadify官网地址：http://www.uploadify.com/

上传文件截图：

uploadify文档:http://www.uploadify.com/documentation/,在这儿可以查看uploadify的Options,Events,Methods，点击下面的各个内容可以看到demo代码。

如果英文不好，可以查找别人已经翻译过，解释过的文章（也许更详细，我找到的一个：http://blog.csdn.net/superdog007/article/details/17242947）

下载地址：http://www.uploadify.com/download/（demo使用的是php语言）

下载的文件index.php，自己修改以后的代码：

<body>

    <h1>Uploadify Demo</h1>

    <form>

        <div id="queue"></div>

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

    </form>

    <script type="text/javascript">

        <?php $timestamp = time();?>

        $(function() {

            $('#file_upload').uploadify({

                'formData'     : {

                    'timestamp' : '<?php echo $timestamp;?>',

                    'token'     : '<?php echo md5('unique_salt' . $timestamp);?>'

                },

                'swf'      : 'uploadify.swf',

                'uploader' : 'uploadify.php',

                'buttonText'  : '选择文件', //按钮显示的字迹

                //'folder'   : 'uploads',//服务端的上传目录

                'fileObjName':'Filedata',//设置在后台脚本使用的文件名。举个例子，在php中，如果这个选项设置为'the_files',你可以使用$_FILES['the_files']存取这个已经上传的文件。

                 'fileSizeLimit':'100KB',

                //设置上传文件的容量最大值。这个值可以是一个数字或者字符串。如果是字符串，接受一个单位（B,KB,MB,GB）。如果是数字则默认单位为KB。设置为0时表示不限制

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

                //设置允许上传的文件扩展名（也就是文件类型）。但手动键入文件名可以绕过这种级别的安全检查，所以你应该始终在服务端中检查文件类型。输入多个扩展名时用分号隔开('*.jpg;*.png;*.gif')

                    'multi': false,

                //设置是否允许一次选择多个文件，true为允许，false不允许

                'onUploadSuccess':function(file, data, response) { //文件上传成功的时候

                    $("#filename").attr("value",file.name);

                    //$("#filename").val()=file.name;

                   alert(data);

                 },

                'onUploadError' : function(file, errorCode, errorMsg, errorString) {//文件上传失败的时候

                 alert(file.name + '上传失败原因:' + errorString);

                 }

           });

        });

    </script>

    <input type="text" name="filename" id="filename"/>

</body>

uploadify.php文件修改（记得创建文件夹uploads,我是创建到了解压的文件uploadify中）代码：

<?php

/*

Uploadify

Copyright (c) 2012 Reactive Apps, Ronnie Garcia

Released under the MIT License <http://www.opensource.org/licenses/mit-license.php>

*/

// Define a destination

$targetFolder = 'uploadify/uploads'; // Relative to the root

$verifyToken = md5('unique_salt' . $_POST['timestamp']);

if (!empty($_FILES) && $_POST['token'] == $verifyToken) {

    $tempFile = $_FILES['Filedata']['tmp_name'];

    $targetPath = $_SERVER['DOCUMENT_ROOT'] . $targetFolder;

    $targetFile = rtrim($targetPath,'/') . '/' . $_FILES['Filedata']['name'];

    // Validate the file type

    $fileTypes = array('jpg','jpeg','gif','png'); // File extensions

    $fileParts = pathinfo($_FILES['Filedata']['name']);

    if (in_array($fileParts['extension'],$fileTypes)) {

        move_uploaded_file($tempFile,$targetFile);

        echo '1';

    } else {

        echo '无效的文件类型。';

    }

}

?>

jQuery.uploadify-----文件上传带进度条，支持多文件上传的插件的更多相关文章

  1. atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7

    atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7 1. 实现原理 1 2. 大的文件上传原理::使用applet 1 3. 新的bp 2 1. 性能提升---分割小文件上传 ...

  2. atitit. 文件上传带进度条 atiUP 设计 java c# php

    atitit. 文件上传带进度条 atiUP 设计 java c# php 1. 设计要求 1 2. 原理and 架构 1 3. ui 2 4. spring mvc 2 5. springMVC.x ...

  3. struts2：上传多个文件时实现带进度条、进度详细信息的示范

    上一篇文章讲了上传单个文件与上传多个文件(属性驱动)的例子.本例是上传多个文件(属性驱动),并且显示进度条.进度详细信息的示范. 在文件上传选择界面,允许用户增加.删除选择的文件,且只能上传指定类型的 ...

  4. Struts2文件上传带进度条，虽然不是很完美

    好久没有写东西,最近在做个项目,要用到文件h 传的,以前虽然也做上传,但是总觉得不好用 ,现在和队友合作做了一个带进度条的上传,觉得还行~~和大家分享一下. 首先说一下大概是这样实现的,在我们平时的上 ...

  5. HTML5多图片拖拽上传带进度条

    前言 昨天利用css2的clip属性实现了网页进度条觉得还不错,但是很多情况下,我们在那些时候用进度条呢,一般网页加载的时候如果有需要可以用,那么问题就来了,怎么才算整个加载完毕呢,是页面主要模块加载 ...

  6. MVC 图片上传 带进度条（转）

    MVC 图片上传小试笔记 form.js 这个插件已经是很有名的,结合MVC的html辅助方法异步上传就很简单了.jQuery Form Plugin :http://www.malsup.com/j ...

  7. HTML5 + AJAX ( jQuery版本 ) 文件上传带进度条

    页面技术:HTML5 + AJAX ( jQuery) 后台技术:Servlet 3.0 服务器:Tomcat 7.0 jQuery版本:1.9.1 Servlet 3.0 代码 package or ...

  8. html5 文件上传 带进度条

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  9. Springboot 文件上传(带进度条)

    1. 相关依赖 pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http ...

随机推荐

  1. 按要求编写一个Java应用程序： （1）编写一个矩形类Rect，包含： 两个属性：矩形的宽width；矩形的高height。 两个构造方法： 1．一个带有两个参数的构造方法，用于将width和height属性初化； 2．一个不带参数的构造方法，将矩形初始化为宽和高都为10。 两个方法： 求矩形面积的方法area() 求矩形周长的方法perimeter() （2）通过继承Rect类编写一个具有确定位

    package com.hanqi.test; public class Rect { ; ; public double getWidth() { return width; } public vo ...

  2. asp.net mvc jQuery 城市二级联动

    页面效果图: 数据库表结构: 首先在数据库中创建省级.城市的表,我的表如下:我用了一张表放下了省级.城市的数据,用level划分省份和城市,parentId表示该城市所在省份的id 主要文件有:ind ...

  3. 单表60亿记录等大数据场景的MySQL优化和运维之道

    此文是根据杨尚刚在[QCON高可用架构群]中,针对MySQL在单表海量记录等场景下,业界广泛关注的MySQL问题的经验分享整理而成,转发请注明出处. 杨尚刚,美图公司数据库高级DBA,负责美图后端数据 ...

  4. Linux服务器文件删除空间未释放的问题

    一.问题起源 在Linux系统中,通过rm删除文件将会从文件系统的目录结构上解除链接(unlink),如果文件是被打开的(有一个进程正在使用),那么进程将仍然可以读取该文件磁盘空间也一直被占用 这样就 ...

  5. 使用 python 发送邮件

    1.使用python 写发邮箱代码: def sendmail (): import smtplib from email.mime.text import MIMEText from email.u ...

  6. js中的遍历foreach，$.each()，$().each()

    <!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <title></title ...

  7. RCP常见问题

    1.NoClassDefFoundError 解决办法: 查下依赖和插件启动情况 (manifest的requires和Import.osgi console插件启动情况) manifest的runt ...

  8. For循环案例---九九乘法表

    概述:先创建一个Print99类,类中创建5个方法,分别为Test9901.Test9902.Test9903.Test9904.Test9905,分别打印出不同形状的九九乘法表,该类创建完成后再创建 ...

  9. 洛谷P1120小木棍[DFS]

    题目描述 乔治有一些同样长的小木棍,他把这些木棍随意砍成几段,直到每段的长都不超过50. 现在,他想把小木棍拼接成原来的样子,但是却忘记了自己开始时有多少根木棍和它们的长度. 给出每段小木棍的长度,编 ...

  10. 浅谈Android Fragment嵌套使用存在的一些BUG以及解决方法

    时间 2014-03-18 18:00:55 eoe博客 原文  http://my.eoe.cn/916054/archive/24053.html 主题 安卓开发 自从Android3.0引入了F ...