uploadify多图片上传实例

upload.php

  <html>

    <head>

      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

      <title>uploadify 多文件上传例子</title>

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

      <script type="text/javascript" src="http://www.phpernote.com/js/jquery.min.js"></script>

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

      <style type="text/css">

      body {

        font: 13px Arial, Helvetica, Sans-serif;

      }

      .haha{

        color:#FFFFFF;

      }

      #queue {

        background-color: #FFF;

        border-radius: 3px;

        box-shadow: 0 1px 3px rgba(0,0,0,0.25);

        height: 103px;

        margin-bottom: 10px;

        overflow: auto;

        padding: 5px 10px;

        width: 300px;

      }

      </style>

    </head>  

    <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">

      $(function() {

        $('#file_upload').uploadify({

                    'debug'         : false,

                    'auto'          : false,             //是否自动上传,

                    'buttonClass'   : 'haha',           //按钮辅助class

                    'buttonText'    : '上传图片',       //按钮文字

                    'height'        : 30,               //按钮高度

                    'width'         : 100,              //按钮宽度  

                    'fileObjName'   : 'filedata',           //默认 Filedata, $_FILES控件名称

                    'fileSizeLimit' : '1024KB',          //文件大小限制 0为无限制 默认KB

                    'fileTypeDesc'  : 'All Files',       //图片选择描述

                    'fileTypeExts'  : '*.gif; *.jpg; *.png',//文件后缀限制 默认：'*.*'

                    'formData'      : {'someKey' : 'someValue', 'someOtherKey' : 1},//传输数据JSON格式

                    //'overrideEvents': ['onUploadProgress'],  // The progress will not be updated

                    //'progressData' : 'speed',             //默认percentage 进度显示方式

                    'queueID'       : 'queue',              //默认队列ID

                    'queueSizeLimit': 20,                   //一个队列上传文件数限制

                    'removeCompleted' : true,               //完成时是否清除队列 默认true

                    'removeTimeout'   : 3,                  //完成时清除队列显示秒数,默认3秒

                    'requeueErrors'   : false,              //队列上传出错，是否继续回滚队列

                    'successTimeout'  : 5,                  //上传超时

                    'uploadLimit'     : 99,                 //允许上传的最多张数

                    'swf'  : 'uploadify/uploadify.swf', //swfUpload

                    'uploader': 'handle.php', //服务器端脚本  

                    //修改formData数据

                    'onUploadStart' : function(file) {

                        $("#file_upload").uploadify("settings", "someOtherKey", 2);

                      },

                    //删除时触发

                    'onCancel' : function(file) {

                        // alert('The file ' + file.name + '--' + file.size + ' was cancelled.');

                      },

                    //清除队列

                    'onClearQueue' : function(queueItemCount) {

                        // alert(queueItemCount + ' file(s) were removed from the queue');

                      },

                    //调用destroy是触发

                    'onDestroy' : function() {

                      alert('我被销毁了');

                    },

                    //每次初始化一个队列是触发

                    'onInit' : function(instance){

                        // alert('The queue ID is ' + instance.settings.queueID);

                      },

                    //上传成功

                    'onUploadSuccess' : function(file, data, response) {

                        alert(file.name + ' | ' + response + ':' + data);

                        $('#error').html(data)

                      },

                    //上传错误

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

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

                      },

                    //上传汇总

                    'onUploadProgress' : function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {

                      $('#progress').html(totalBytesUploaded + ' bytes uploaded of ' + totalBytesTotal + ' bytes.');

                    },

                    //上传完成

                    'onUploadComplete' : function(file) {

                        // alert('The file ' + file.name + ' finished processing.');

                      },  

                    });

  });  

            //变换按钮

            function changeBtnText() {

              $('#file_upload').uploadify('settings','buttonText','继续上传');

            }  

            //返回按钮

            function returnBtnText() {

              alert('The button says ' + $('#file_upload').uploadify('settings','buttonText'));

            }

            </script>

            <h4>操作:</h4>

            <a href="javascript:$('#file_upload').uploadify('upload', '*');">开始上传</a>  |

            <a href="javascript:$('#file_upload').uploadify('cancel', '*');">清除队列</a>  |

            <a href="javascript:$('#file_upload').uploadify('destroy');">销毁上传</a>  |

            <a href="javascript:$('#file_upload').uploadify('disable', true);">禁用上传</a>  |

            <a href="javascript:$('#file_upload').uploadify('disable', false);">激活上传</a>  |

            <a href="javascript:$('#file_upload').uploadify('stop');">停止上传</a>  |

            <a href="javascript:changeBtnText();">变换按钮</a>  |

            <h4>大小:</h4>

            <div id='progress'></div>

            <h4>错误提示:</h4>

            <div id='error'></div>

          </body>

 </html>

handle.php

<?php

if(@$_FILES["filedata"]){

    $path="upload/" . $_FILES["filedata"]["name"];

//把上传的文件移动到指定目录

    move_uploaded_file($_FILES["filedata"]["tmp_name"],$path);

}

?>

效果：

uploadify多图片上传实例的更多相关文章

PHP多图片上传实例demo
upload.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
Thinkphp整合阿里云OSS图片上传实例
Thinkphp3.2整合阿里云OSS图片上传实例,图片上传至OSS可减少服务器压力,节省宽带,安全又稳定,阿里云OSS对于做负载均衡非常方便,不用传到各个服务器了首先引入阿里云OSS类库 < ...
PHP结合zyupload多功能图片上传实例
PHP结合zyupload多功能图片上传实例,支持拖拽和裁剪.可以自定义高度和宽度,类型,远程上传地址等. zyupload上传基本配置 $("#zyupload").zyUplo ...
PHP 多图片上传实例demo
upload.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
layui加tp5图片上传实例
<div class="layui-fluid"> <div class="layui-row"> <form class=&qu ...
解决uploadify多图片上传部分图片丢失，且不提示任何错误的问题
这两天用到uploadify的flash版本进行批量图片上传并生成缩略图的功能,之前用uploadify用的好好的,这次突然出现了一个奇怪的问题. 问题描述如下:当我选择单个图片上传的时候,图片上传都 ...
webuploader项目中多图片上传实例
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
Thinkphp框架图片上传实例
https://www.cnblogs.com/wupeiky/p/5802191.html [原文转载自:https://www.cnblogs.com/guoyachao/p/628286 ...
asp.net图片上传实例
网站后台都需要有上传图片的功能,下面的例子就是实现有关图片上传. 缺点:图片上传到本服务器上,不适合大量图片上传. 第一.图片上传,代码如下: xxx.aspx 复制代码代码如下: <td cl ...

随机推荐

PostgreSQL中如何查看一个表所对应的文件
通过pg_relation_filepath可以直接表(索引)对象对应的物理文件在哪里? 上面截图是“德哥”做的ppt:上面有详细解释! 当然也可以通过系统表 pg_class 可以直接查出对应的物 ...
[算法][包围盒]球，AABB，OBB
参考地址请看图片水印:http://www.cnblogs.com/iamzhanglei/archive/2012/06/07/2539751.html http://blog.sina.com.c ...
C# 单例模式Lazy<T>实现版本
非Lazy版本的普通单例实现: public sealed class SingletonClass : ISingleton { private SingletonClass () { // the ...
使用存储过程来动态调用数据(SELECT)
USE [MyTestDb] GO /****** Object: StoredProcedure [dbo].[PROC_GetChannelList] Script Date: 04/09/201 ...
配置开发支持高并发TCP连接的Linux应用程序全攻略
http://blog.chinaunix.net/uid-20733992-id-3447120.html http://blog.chinaunix.net/space.php?uid=16480 ...
ThinkPHP eq neq if 标签
内置标签的使用方法在action文件输出一个变量 $title="hello"; $this->assign('title',$title); 如果title变量的值等于& ...
2016年11月20日星期日 --出埃及记 Exodus 20:11
2016年11月20日星期日 --出埃及记 Exodus 20:11 For in six days the LORD made the heavens and the earth, the sea ...
在 Server 端存取 Excel 檔案的利器：NPOI Library
转处 http://msdn.microsoft.com/zh-tw/ee818993.aspx Codeplex 軟體套件(Package)資訊套件名稱 NPOI 作者 tonyqus, huse ...
Jquery实现图片上下一张
注:调试的时候发现ff下有兼容性问题,把jquery换成4.4版本就没问题了,问题应该在e.offseX上ff不支持此属性,以图片中间宽度为界限,鼠标移动在左边点击跳转到一个链接,鼠标移动右边点击跳转 ...
第一课 android环境搭建
android环境搭建需要的工具: 1.JDK 2.eclipse 3.SDK 4.ADT

uploadify多图片上传实例

uploadify多图片上传实例的更多相关文章

随机推荐

热门专题