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

这两天用上传的控件，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>

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

赞 (0)

相关推荐

  • JQuery.uploadify 上传文件插件的使用详解 for ASP.NET

    JQuery.uploadify 上传文件插件的使用详解 for ASP.NET

    后来朋友推荐了一个这个叫uploadify的上传插件,似乎挺好,就到官方下了个示例运行,感觉挺好,自己再稍加美化一下就OK 了..! 接下来就讲讲使用过程吧: 1. 下载 官方网站:http://www.uploadify.com/ 直接下载:jquery.uploadify-v2.1.0.rar 我的Demo: MyUpload.rar                官方网站也有demo 下载解压后: 说明:它里面有demo  但是是PHP的,还有一个帮助文档:uploadify v2.1.0

  • jQuery.uploadify文件上传组件实例讲解

    jQuery.uploadify文件上传组件实例讲解

    1.jquery.uploadify简介 在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好,无刷新,带上传进度等等.在最近的短信平台开发中,使用Uploadify进行文件上传. Uploadify官网地址是:http://www.uploadify.com/ 可满足项目开发需求. 下载地址:http://www.uploadify.com/wp-content/uploads/files/

  • SpringMVC + jquery.uploadify实现上传文件功能

    SpringMVC + jquery.uploadify实现上传文件功能

    前言 以前用Asp.net MVC+uploadify上传文件,最近学习SpringMVC,所以就用SpringMVC+uploadify做个上传文件的demo. 刚开始用form表单的方式提交,在Controller Action中用@RequestParam MultipartFile file就能拿到上传文件信息.后我直接使用uploadify的方式上传,接口没有做任何调整,上传的过程中报http400, 客户端的请求不符合接口的要求,表单post提交时报文参数是以Form Data方式,

  • jQuery.Uploadify插件实现带进度条的批量上传功能

    本文实例讲述了jQuery.Uploadify插件实现带进度条的批量上传功能.分享给大家供大家参考,具体如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpLoad.aspx.cs" Inherits="UploadifyDemo_UpLoad" %> <html xmlns="http://www.w3.org/1999/xh

  • 图片上传插件jquery.uploadify详解

    1.js代码: 复制代码 代码如下: <script type="text/javascript"> $(document).ready(function() { $('#fileInput').uploadify({ //以下参数均是可选 'uploader' : '<%=basePath%>images/uploadify.swf', //指定上传控件的主体文件,默认'uploader.swf' 'script' : '<%=basePath%>

  • 使用jQuery.form.js/springmvc框架实现文件上传功能

    使用jQuery.form.js/springmvc框架实现文件上传功能

    使用的技术有jquery.form.js框架, 以及springmvc框架.主要实现异步文件上传的同时封装对象,以及一些注意事项. 功能本身是很简单的,但是涉及到一些传递参数类型的问题.例如:jquery的ajax方法与jquery.form.js中的ajaxSubmit方法的参数,具体细节将在下一篇博客中分享. 重点: html表格三要素: action="fileUpload/fileUpload" method="post" enctype="mul

  • jquery.form.js框架实现文件上传功能案例解析（springmvc）

    jquery.form.js框架实现文件上传功能案例解析（springmvc）

    上一篇 Bootstrap自定义文件上传下载样式(http://www.jb51.net/article/85156.htm)已经有一段时间了,一直在考虑怎么样给大家提交一篇完美的逻辑处理功能.现在我结合自己的实际工作给大家分享一下. 使用的技术有jquery.form.js框架, 以及springmvc框架.主要实现异步文件上传的同时封装对象,以及一些注意事项. 功能本身是很简单的,但是涉及到一些传递参数类型的问题.例如:jquery的ajax方法与jquery.form.js中的ajaxSu

  • firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误

    解决了uploadify插件在chrom频繁崩溃的问题,又遇到了新问题,ff浏览器下报HTTP 302错误, ff浏览器下 uploadify 利用flash进行post上传时没有包含原来的session信息,而是重新创建了一个session,新的session无法通过登录验证,因此被重定向到了登录页面. 解决的方法无非就是将原session一起post到服务器端,然后服务器端登录验证之前将需要验证的session改为post过来的那个...(语言组织能力太差-,-). jquery.uploa

  • SpringMVC文件上传 多文件上传实例

    必须明确告诉DispatcherServlet如何处理MultipartRequest.SpringMVC中提供了文件上传使用方式如下配置xxx-servlet.xml,添加如下代码: 复制代码 代码如下: <bean id="multipartResolver"  class="org.springframework.web.multipart.commons.CommonsMultipartResolver">          <!-- 设置

  • jquery.uploadify插件在chrome浏览器频繁崩溃解决方法

    jquery.uploadify插件在chrome浏览器频繁崩溃问题,一直困扰了好久,网上很多人说是由于chrome缓存的原因,插件初始化时,需要引用js,而chrome的缓存导致没有没有请求到jquery.uploadify-3.1_min.js,所以引起崩溃,可以在引用js时,加入随机数:<script type="text/javascript" src="/js/jquery.uploadify-3.1_min.js?ver=<?php echo rand

随机推荐