您的位置：首页 > Web前端 > JQuery

php+jQuery.uploadify实现文件上传教程

2014-12-26 00:00 1171 查看

这两天用上传的控件，PHP+Jquery今天先介绍这个uploadify，嗯，我今天下载因为我英文不是很好所以我就在网上找的使用教程，我发现好多用不了，我那个去，你看官方文档才知道很多API已经不是以前的API了。今天总结一下给大家，给大家一个提醒最多还是要看官方的http://www.uploadify.com/documentation/！

简单举例一下使用然后我都加上注释给大家，方便大家阅读和使用下载官方的之后直接使用就OK了，当然你需要什么在直接修改就可以了！

<!DOCTYPE HTML>

<html>

<head>

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

<title>UploadiFy讲解</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

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

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

<style type="text/css">

body {

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

}

</style>

</head>

<body>

 <h1>Uploadify讲解由widuu提供</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({

    

    //上传文件时post的的数据

    'formData'     : {

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

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

     'id'  : 1

    },

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

    'uploader' : 'http://localhost/uploadify/uploadify.php',

    'onInit'   : function(index){

     alert('队列ID:'+index.settings.queueID);

    },

    'method'   : 'post', //设置上传的方法get 和 post

    //'auto'    : false, //是否自动上传 false关闭自动上传 true 选中文件后自动上传

    //'buttonClass' : 'myclass', //自定义按钮的样式

    //'buttonImage' : '按钮图片',

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

    //'fileObjName' : 'mytest'  //后台接收的时候就是$_FILES['mytest'] 

    'checkExisting' : '/uploadify/check-exists.php', //检查文件是否已经存在 返回0或者1

    'fileSizeLimit' : '100KB', //上传文件大小的限制

    'fileTypeDesc'  : '你需要一些文件',//可选择的文件的描述

    'fileTypeExts'  : '*.gif; *.jpg; *.png', //文件的允许上传的类型

    

    //上传的时候发生的事件

    'onUploadStart' : function(file){

      alert('开始上传了');       },

    'uploadLimit'   : 5, //设置最大上传文件的数量

    /*

    'onUploadComplete' : function(result){

        for (var i in result.post){

         alert(i+':::'+result[i]);

        }

       },

    */

    //文件上传成功的时候

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

     alert(data);

     },

     //

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

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

     },

     'itemTemplate' : '追加到每个上传节点的html',

     'height'  : 30, //设置高度 button

     'width'  : 30, //设置宽度

     'onDisable' : function(){

      alert('您禁止上传');

     },

     'onEnable'  : function(){

      alert('您可以继续上传了');

     },

     //当文件选中的时候

     'onSelect'  : function(file){

      alert(file.name+"已经添加到队列");

     }

   });

  });

  

 //一些常用的事件

 //$('#file_upload').uploadify('upload','*');    //用javascript 上传的方法

 //$('#file_upload').uploadify('stop','*');      //用javascript 停止上传的方法

 //$('#file_upload').uploadify('disable','*');   //用javascript 禁止上传的方法

 //$('#file_upload').uploadify('settings','buttonText',"设置上传按钮");   //设置一些属性

 //更多的请到官方网站www.uploadify.com/documentation/看讲解谢谢

 </script>

<?php

/*

 *检查文件是否存在的check-exists.php

 */

/*

$targetFolder = '/uploads'; 

if (file_exists($_SERVER['DOCUMENT_ROOT'] . $targetFolder . '/' . $_POST['filename'])) {

 echo 1;

} else {

 echo 0;

}

*/

?>

</body>

</html>

代码注释里都做了详细解释了，我这里就不多废话了，如果还是有疑问，那就联系我吧。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航