基于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. QImage 图像格式小结

    原地址:http://tracey2076.blog.51cto.com/1623739/539690 嗯,这个QImage的问题研究好久了,有段时间没用,忘了,已经被两次问到了,突然有点解释不清楚, ...

  2. fdisk命令使用说明

    CentOS我新建了几个分区,比如/dev/sda4,sda5我想挂在一个目录下,用mount  /dev/sda5  /disk ,总提示mount:you must specify the fil ...

  3. QCopChannel的用法

    QT提供了很多的进程间通讯的方法,例如共享内存,QProcess等等.但有一种方法是嵌入式端所独有的,那就是Qt Communications Protocol(QCOP)QT通讯协议,这种方法只能用 ...

  4. Python 之 lambda 函数

    Python 支持一种单行匿名函数,这种函数称为 lambda,它最初借鉴自 Lisp. >>> add = lambda x, y: x +y >>> add(3 ...

  5. 编写高质量JS代码的68个有效方法（九）

    No.41.将原型视为实现细节 Tips: 对象是接口,原型是实现 避免检查你无法控制的对象的原型结构 避免检查实现在你无法控制的对象内部的属性 我们可以获取对象的属性值和调用其方法,这些操作都不是特 ...

  6. Web Fram 2 for IIS7.X（Microsoft Web Farm Framework）

    Microsoft Web Farm Framework (WFF) 2.0 是微软开发的.基于IIS 7.x的小插件,能够帮助我们轻松实现Web网站的高性能.高可用性,用来在Web服务器群上提供和管 ...

  7. forever守护nodejs进程

    客户端启动Node.js应用: node app.js # 方法一 npm start # 方法二 Express框架 这样可以正常启动应用,但是如果断开客户端连接,应用也就随之停止了.也就是说这样的 ...

  8. DDD：小议 BoundexContext 设计

    背景 看了这篇文章:Coding for Domain-Driven Design: Tips for Data-Focused Devs,对 BoundedContext 的设计有了一点新的体会,记 ...

  9. Genymotion模拟器环境搭建中的各种坑，终极解决办法

    最近刚进入了一家公司,因为要做自动化测试,web端的业务需要移动端来进行配合,想了想还是利用genymotion模拟器吧:很久前装过,那也是一路坎坷啊,结果这次还是遇到坑了,搞了老半天:我希望我踩过的 ...

  10. AEAI ESB V3.5.4开源发布，应用集成平台

    AEAI ESB 应用集成平台为数通畅联的核心产品,本着分享传递的理念,数通畅联将ESB管理控制台项目开源,目的在于满足客户与伙伴的OEM需求,以及为广大IT爱好者的集成工具提供多一种选择,多一种便利 ...