准备：

uploadify下载地址：

http://www.uploadify.com/download/

七牛 php-sdk开发指南：

http://developer.qiniu.com/docs/v6/sdk/php-sdk.html

php-sdk地址：

https://github.com/qiniu/php-sdk

开始：

DEMO:

在七牛里面注册账号以后，成为标准用户

免费存储空间10GB
免费每月下载流量10GB
免费每月PUT/DELETE 10万次请求
免费每月GET 100万次请求

貌似是一个不错的福利。

成功注册后就会 账号页面 有ak 和sk key 可以在代码中使用。

下载好uploadify 后 把 七牛 php -sdk 文件包里面的内容放在 uploadify 里面

打开uploadify.php 文件  代码如下：

<?php

/*

Uploadify

Copyright (c) 2012 Reactive Apps, Ronnie Garcia

Released under the MIT License <http://www.opensource.org/licenses/mit-license.php>

*/

// Define a destination

$targetFolder = '/uploads'; // Relative to the root

$verifyToken = md5('unique_salt' . $_POST['timestamp']);

if (!empty($_FILES) && $_POST['token'] == $verifyToken) {

	$tempFile = $_FILES['Filedata']['tmp_name'];

	$targetPath = $_SERVER['DOCUMENT_ROOT'] . $targetFolder;

	$targetFile = rtrim($targetPath,'/') . '/' . $_FILES['Filedata']['name'];

	// Validate the file type

	$fileTypes = array('jpg','jpeg','gif','png'); // File extensions

	$fileParts = pathinfo($_FILES['Filedata']['name']);

	if (in_array($fileParts['extension'],$fileTypes)) {

		move_uploaded_file($tempFile,$targetFile);

		echo '1';

	} else {

		echo 'Invalid file type.';

	}

}

?>

修改代码如下： 介绍参考代码内部.

<?php

$verifyToken = md5('unique_salt' . $_POST['timestamp']);

if (!empty($_FILES) && $_POST['token'] == $verifyToken) {

    $tempFile = $_FILES['Filedata']['tmp_name'];

    //生成新的文件名

    $filename = time().mt_rand(10,99).'.'.end(explode('.', $_FILES['Filedata']['name'])); //在这里修改生出随机图片名

    $fileTypes = array('jpg','jpeg','gif','png');  //限制上传的文件为图片

    $fileParts = pathinfo($_FILES['Filedata']['name']);

    if (in_array($fileParts['extension'],$fileTypes)) {

        //上传图片到云端 start

        require_once("qiniu/io.php");

        require_once("qiniu/rs.php");

        $bucket = "hdimg";//空间名

        //截取原始文件后缀名

        $key1 = "Uploads/".$filename;

        $accessKey = ' '; //这里填写ak

        $secretKey = ' '; // 这里填写SK

        Qiniu_SetKeys($accessKey, $secretKey);

        $putPolicy = new Qiniu_RS_PutPolicy($bucket);

        $upToken = $putPolicy->Token(null);

        $putExtra = new Qiniu_PutExtra();

        $putExtra->Crc32 = 1;

        //$tempFile uploadify上传的临时文件路径

        list($ret, $err) = Qiniu_PutFile($upToken, $key1, $tempFile, $putExtra);

        //上传图片到云端 end

        //返回文件名给前台

        echo "http://hdimg.qiniudn.com/".$key1; //前台使用回调函数的data参数接收

    } else {

        echo 'Invalid file type.';

    }

}

前台index.php修改为:前台调用 echo 输出的值data 进行操作。

<!DOCTYPE HTML>

<html>

<head>

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

<title>UploadiFive Test</title>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.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>

	<form>

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

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

	</form>

			<img width="100" height="100" id="txtimg" src=""/>

	<script type="text/javascript">

		<?php $timestamp = time();?>

		$(function() {

			$('#file_upload').uploadify({

				'formData'     : {

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

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

				},

				'swf'      : 'uploadify.swf',

				'uploader' : 'uploadify.php',

				 'onUploadSuccess' : function(file,data,response) {  //执行成功后就执行该段js

						document.getElementById('txtimg').src=data;

                                }

			});

		});

	</script>

</body>

</html>

对data 进行输入到页面 实现 当前页面显示。控制  #txtimg 的值为 输出的data值 即为 图片地址。

后期 如果需要 iframe 调用的话 可以把

document.getElementById('txtimg').src=data;  可以把data 传输到父页面 的 #txtimg 中。
parent.document.getElementById('txtimg').src=data;

uploadify实现七牛云存储 显示上传进度+页面显示的更多相关文章

  1. [Swift通天遁地]四、网络和线程-(9)上传图片并实时显示上传进度

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  2. 基于element ui 实现七牛云自定义key上传文件，并监听更新上传进度

    借助上传Upload 上传组件的 http-request 覆盖默认的上传行为,可以自定义上传的实现 <el-upload multiple ref="sliderUpload&quo ...

  3. 七牛云实现js上传

    七牛云的官方API写的一塌糊涂.最主要的,还是版本兼容的问题. 一.引入文件 引入了两个文件: 1.jquery-1.10.2.min.js 2.plupload.full.min.js 3.qini ...

  4. django + ckeditor + 七牛云，图片上传到七牛云

    传送门 本人使用的是 Django 的自带的管理后台,安装 ckeditor 富文本编辑器后,上传图片的时候直接传到七牛云的.

  5. Web前端文件上传进度的显示

    跟后台关系不大,主要是前端js实现,具体使用了XMLHttpRequest的ProgressEvent事件,可以参考MDN中的Using XMLHttpRequest https://develope ...

  6. Linux下七牛云存储qrsync命令行上传同步工具

    原址:https://m.aliyun.com/yunqi/ziliao/54370 VPS数据备份是一个重要的工作,之前在文章:使用七牛云存储自动备份VPS数据分享过使用七牛云存储提供的工具QRSB ...

  7. Android开发中使用七牛云存储进行图片上传下载

    Android开发中的图片存储本来就是比较耗时耗地的事情,而使用第三方的七牛云,便可以很好的解决这些后顾之忧,最近我也是在学习七牛的SDK,将使用过程在这记录下来,方便以后使用. 先说一下七牛云的存储 ...

  8. 七牛云存储的 Javascript Web 前端文件上传

    因为我的个人网站 restran.net 已经启用,博客园的内容已经不再更新.请访问我的个人网站获取这篇文章的最新内容,七牛云存储的 Web 前端文件上传 七牛是不错的云存储产品,特别是有免费的配额可 ...

  9. Java 七牛云存储与下载

    七牛云的文件上传和下载(私有空间) 1.本篇博客参考网址 https://blog.csdn.net/peaceful000/article/details/53171578 https://blog ...

随机推荐

  1. ubuntu彻底卸载搜狗拼音输入法

    ubuntu彻底卸载搜狗拼音输入法,ubuntu安装搜狗输入法后如果觉得搜狗不是很适合自己,那应该怎么样彻底的卸载搜狗输入法呢?下面我们就来一步步彻底卸载掉搜狗输入法... 方法/步骤 1 找到安装的 ...

  2. IOS tableView 自定义cell 多行时 文字重复现象

    今天写了一个demo,有一个问题,有很多cell,但是超过一页后往下翻,发现文字有重叠现象, cell用的是重用机制,按说不会这样,最终解决的方案: 勾选这个,clears graphics cont ...

  3. Override ListView getAdapter造成的后果

    近期工作中,发现了一个bug,是和ListView Adapter有关的.产生了FC,描写叙述信息大约是 "The content of the adapter has changed bu ...

  4. phpmailer,smtp发送邮件实例(转)

    一,用phpmailer发送邮件 查看复制打印? <?php   include "class.phpmailer.php";    //包函邮件发送类      //邮件发 ...

  5. web工程中spring+ibatis的单元测试--转载

    为了保证代码的正确,软件的质量,单元测试几乎是每个程序员都要面临的工作了;而开发中大部分的工作都涉及数据库的操作,也就是平时经常可以看到的DAO了;由于是对数据库的操作,就必然有事务的问题了;如果是启 ...

  6. 微信小程序的一些限制

    小程序的一些限制: 不支持HTML.没有 Dom.网页用的 JS.CSS 基本要全部重写,WXML 的语法和 HTML 差异还挺大,基本是一个个照着手册的属性去改.CSS 选择器不支持级联. 小程序源 ...

  7. felx基础知识

    felx4将功能组件划分为3个命名空间分别是 fx:核心功能 mx:标准flex3组件组 s:新flex4 spark组件组

  8. c结构体初始化问题

    结构体中的数组的初始化问题 我的代码 C/C++ code #include <stdio.h> #include <stdlib.h> struct a { int leng ...

  9. Tcl在Vivado中的使用

    http://blog.chinaaet.com/detail/36014 Vivado是Xilinx最新的FPGA设计工具,支持7系列以后的FPGA及Zynq 7000的开发.与之前的ISE设计套件 ...

  10. Android 设计随便说说之简单实践(消息流动)

    在上面两篇分别说明了设计中较为简单也是很关键的实践点. 第一模块划分,它是根据每个模块所承载的业务,进行划分,是应用程序一个静态的描述. 第二合理组合,它是是将每个模块调动起来,共同实现业务,是一个准 ...