基于h5的图片无刷新上传(uploadifive)

  1. uploadifive简介

    了解uploadify之前，首先了解来一下什么是uploadify，uploadfy官网，uploadify和uploadifive是一家的，他们都是基于jquery的插件，都支持多文件异步上传，支持显示上传进度，不同的是uploadify基于swfUpload这一开源无刷新上传插件开发，基于flash，而uploadifive则是基于html5，不依赖于flash.

    基于他们的不同点，我们可以根据自己的需求来进行选择，如果只是需要PC端使用，比如说网站的后台管理模块，那么选择uploadify就可以了；如果需要用户来上传则可以考虑使用uploadifive，uploadifive是基于h5开发的，也是支持PC的，而且支持拖拽上传【目前是收费的（5$）】。

  2. uploadifive DemoTime
    1. 项目背景
 

      1. 如果熟悉uploadify的话，uploadifive使用起来也会上手很快，之所以选择uploadifive就是因为做一个项目的时候，需要用户在手机上进行上传个人的头像，之前做过基于uploadify的PC文件上传所以很快想到uploadify的html5版本uploadifive，因为是出自同一家，所以上手应该会很快，赶项目，所以就选择了uploadifive，如果之后再遇到会尝试着用其他的。到时候会及时更新博客与大家分享。

        建议不清楚uploadify使用的朋友可以先看下这里了解下uploadify的使用

    2. 实例讲解

      Uploadifive官网文档示例：http://www.uploadify.com/documentation/uploadifive/implementing-uploadifive/

      所用到的uploadifive的文件结构如下：（注：如果要修改图片的路径需要修改样式表uploadifive.css文件中图片路径）

　　　　　　　　

　　　　　　按官网示例的步骤来：

      • 首先引用js和css

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

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

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

      • uploadifive初始化

        首先需要在页面中有一个元素以供uploadifive来初始化，其次是需要利用js在页面加载的时候实现uploadifive的初始化。

        <script type="text/javascript">

        $(function() {

        $('#file_upload').uploadifive({

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

        //显示文件上传进度的元素id

        'queueID' : 'queue',

        //服务器端处理文件上传的文件访问路径

        'uploadScript' : 'uploadifive.php',

        //上传完成之后的回调函数

        'onUploadComplete' : function(file, data) {

        console.log(data);

        if(data){

        alert('上传成功~~')

        }else{

        alert('上传失败！！'+rspdesc);

        }

        }

        });

        });

        </script>

      • 服务器端上传文件处理

        服务器端的上传主要是文件的保存，以及其他的业务处理，及其最后返回给客户端的值，客户端的js回调需要根据服务器端返回的值做出判断做不同的处理。这里不做赘述

      • 设置回调函数

        根据服务器端返回的值进行判断，进行不同的处理

　　　　总结

　　　　　　Uploadifive的使用和uploadify的使用大差不差，基本差不多，很容易上手，建议不熟悉uploadify的朋友还是先熟悉一下uploadify。

　　3.Demo示例代码

 <!DOCTYPE html>

 <html>

 <head>

     <title>uploadify Test</title>

     <meta name="viewport" content="width=device-width, initial-scale=1">

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

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

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

 </head>

 <body>

     <h1>Uploadify Demo</h1>

     <form>

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

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

     </form>

     <script type="text/javascript">

         $(function() {

             $('#file_upload').uploadifive({

                 'auto'             : true,

                 'queueID'          : 'queue',

                 'uploadScript'     : 'upload.php',

                 'onUploadComplete' : function(file, data) {

                     console.log(data);

                     if(data){

                         alert('上传成功~~')

                     }else{

                         alert('上传失败！！'+rspdesc);

                     }

                  }

             });

         });

     </script>

 </body>

 </html>

　　　　4.版权原因，需要uploadifive的朋友可私信我或从CSDN上下载

基于h5的图片无刷新上传(uploadifive)的更多相关文章

  1. javascript压缩图片无刷新上传

    首先要说明,该方式我没有实现成功,主要问题点是压缩后能拿到压缩后图片地址,确不知道怎么上传上去,如果有哪位大牛可以指点一二,万分感谢. 图片压缩代码: compress: function(sourc ...

  2. h5完美实现无刷新上传并附带上传效果

    附带上传源码如下: <!DOCTYPE html> <html> <head> <title>测试上传功能</title> <meta ...

  3. Layman PHP+JavaScript 实现图片无刷新上传

    html文件代码 <!-- ajax文件上传开始 --> <script type="text/javascript" src="/imageuploa ...

  4. 移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传

    现在科技太发达,移动设备像素越来越高,随便一张照片2M+,但是要做移动端图片上传和pc上略有不同,移动端你不能去限制图片大小,让用户先处理图片再上传,这样不现实.所以理解的解决方案就是在上传先进行图片 ...

  5. ASP.NET工作笔记之一：图片上传预览及无刷新上传

    转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...

  6. jQuery AJAX 网页无刷新上传示例

    新年礼,提供简单.易套用的 jQuery AJAX 上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 ...

  7. ajax 无刷新上传

    最近要做微信的图文上传,因为一个图文了表中可以有多个图文,所有按钮需要随时添加,所以做了一种无刷新上传的方法. 首先我们要在html页面中写上这样的几段代码 javascript: $(functio ...

  8. 文件无刷新上传(swfUpload与uploadify)

    文件无刷新上传并获取保存到服务器端的路径 遇到上传文件的问题,结合之前用到过的swfUpload,又找了一个无刷新上传文件的jquery插件uploadify,写篇博客记录一下分别介绍这两个插件的实现 ...

  9. jQuery无刷新上传之uploadify简单试用

    先简单的侃两句:貌似已经有两个月的时间没有写过文章了,不过仍会像以前那样每天至少有一至两个小时是泡在园子里看各位大神的文章.前些天在研究“ajax无刷新上传”方面的一些插件,用SWFUpload实现了 ...

随机推荐

  1. 为应用程序池 'DefaultAppPool' 提供服务的进程无法响应Ping

    打开Windows 2008 的事件查看器,应用警告提示: 为应用程序池 'DefaultAppPool' 提供服务的进程无法响应 Ping.进程 ID 是 '2144'. 注意: 需要重新注册一vb ...

  2. PHP 常见语法 集合

    1.die()与exit()的真正区别 die 为 exit 的别名, 执行过程 将释放内存,停止代码执行 echo "begin exec <br/>"; show( ...

  3. 网络安装archlinux（2012.8.20）笔记

    周末闲极无聊,把烂笔记本翻出来想装个Archlinux,发现USB不能启动,光驱也挂了,只好网络安装. 我先后试了两种安装方式,一种纯互联网启动,安装,一种局域网启动,再互联网安装.分别说说. 不管哪 ...

  4. devexpress表格控件gridcontrol设置隔行变色、焦点行颜色、设置（改变）显示值、固定列不移动(附源码)

    介绍一些常用的gridcontrol设置. 1.设置隔行变色.首先设置显示隔行变色,步骤:OptionsView-->EnableAppearanceEvenRow-->true和Opti ...

  5. MyBatis知多少（15）数据模型

    瘦数据模型是一种最为臭名昭著并且问题多多的对关系数据库系统的滥用.不幸的是,有时又的确需要瘦数据模型.所谓瘦数据模型,就是简单地将每张表都设计为一种通用数据结构,用于存储名值对的集合.这非常像Java ...

  6. Linux下grep显示前后几行信息

    Linux下grep显示前后几行信息 标准unix/linux下的grep通过下面參数控制上下文 grep -C 5 foo file 显示file文件里匹配foo字串那行以及上下5行grep -B ...

  7. JS思维之路菜鸟也能有大能量(1)--模拟push

    因为本系列文章属于思维类,所以不做基础方法的讲解. 任务:首先我定义了一个变量var arr = [0,1,2,3,4,5];我现在想模拟push方法在这个数组的5后面加东西,我们应该怎么做?给你5分 ...

  8. Java -- 根据当前日期获取当前一周的所有日期

    Learn From:http://my.oschina.net/hermer/blog/151274 /** * 测试 * @param args */ public static void mai ...

  9. 红黑树(五)之 Java的实现

    概要 前面分别介绍红黑树的理论知识.红黑树的C语言和C++的实现.本章介绍红黑树的Java实现,若读者对红黑树的理论知识不熟悉,建立先学习红黑树的理论知识,再来学习本章.还是那句老话,红黑树的C/C+ ...

  10. 【转载】Ubuntu下SVN安装和配置

    一.SVN安装 1.安装包 1.$ sudo apt-get install subversion 2.创建项目目录 $ sudo mkdir /home/xiaozhe/svn $ cd /home ...