基于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. Oracle数据库入门——物化视图日志结构

    物化视图的快速刷新要求基本必须建立物化视图日志,这篇文章简单描述一下物化视图日志中各个字段的含义和用途. 物化视图日志的名称为MLOG$_后面跟基表的名称,如果表名的长度超过20位,则只取前20位,当 ...

  2. java之源码路径及api

    jav源码地址:D:\Program Files\jdk1.7\src.zip class类地址:D:\Program Files\jdk1.7\jre\lib\rt.jar 在线api底地址:htt ...

  3. css hack 整理

    <ul> <li>"_" ------ IE6</li> <li>"-" ------ IE6</li&g ...

  4. Eclipse项目名出现红叉

    一.背景与原因 项目第一次加进来的时候,我用的是D:\Java\jdk1.7.0_17,后来由于配置将tomcat切换到jboss,说是JBOSS某个版本只支持jdk6,我就将“环境变量JAVA_HO ...

  5. 蓝凌OA二次开发手册

    1.蓝凌OA表单前端调用后台数据 一.后台存储过程: create procedure sp_test @ftext nvarchar(50) as begin select @ftext as '测 ...

  6. Apache 配置多端口网站

    跳过安装步骤. 1. apache安装目录/conf/httpd.conf,如果你是采用wamp集成环境,那么在 wamp/bin/apache下. 2. 在httpd.conf中,找到 #LoadM ...

  7. 理解 JS 回调函数中的 this

    任何变量或对象都有其赖以生存的上下文.如果简单地将对象理解为一段代码,那么对象处在不同的上下文,这段代码也会执行出不同的结果. 例如,我们定义一个函数 getUrl 和一个对象 pseudoWindo ...

  8. CSS 块状元素和内联元素

    在用CSS布局页面的时候,我们会将HTML标签分成两种,块状元素和内联元素(我们平常用到的div和p就是块状元素,链接标签a就是内联元素) 块状元素一般是其他元素的容器,可容纳内联元素和其他块状元素, ...

  9. Knockout 新版应用开发教程之Observable Arrays

    假如你想到侦测和相应一个对象的改变,假如你想要侦测和响应一一组合集的改变,就要用observableArray 在许多场景都是很有用的,比如你要在UI上需要显示/编辑的一个列表数据集合,然后对集合进行 ...

  10. Mysql学习笔记（八）索引

    PS:把昨天的学习内容补上...发一下昨天学的东西....五月三日...继续学习数据库... 学习内容: 索引.... 索引的优点: 1.通过创建唯一索引,可以保证数据库每行数据的唯一性... 2.使 ...