准备：

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 文件  代码如下：

  1. <?php
  2. /*
  3. Uploadify
  4. Copyright (c) 2012 Reactive Apps, Ronnie Garcia
  5. Released under the MIT License <http://www.opensource.org/licenses/mit-license.php>
  6. */
  7.  
  8. // Define a destination
  9. $targetFolder = '/uploads'; // Relative to the root
  10.  
  11. $verifyToken = md5('unique_salt' . $_POST['timestamp']);
  12.  
  13. if (!empty($_FILES) && $_POST['token'] == $verifyToken) {
  14. 	$tempFile = $_FILES['Filedata']['tmp_name'];
  15. 	$targetPath = $_SERVER['DOCUMENT_ROOT'] . $targetFolder;
  16. 	$targetFile = rtrim($targetPath,'/') . '/' . $_FILES['Filedata']['name'];
  17.  
  18. 	// Validate the file type
  19. 	$fileTypes = array('jpg','jpeg','gif','png'); // File extensions
  20. 	$fileParts = pathinfo($_FILES['Filedata']['name']);
  21.  
  22. 	if (in_array($fileParts['extension'],$fileTypes)) {
  23. 		move_uploaded_file($tempFile,$targetFile);
  24. 		echo '1';
  25. 	} else {
  26. 		echo 'Invalid file type.';
  27. 	}
  28. }
  29. ?>

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

  1. <?php
  2.  
  3. $verifyToken = md5('unique_salt' . $_POST['timestamp']);
  4.  
  5. if (!empty($_FILES) && $_POST['token'] == $verifyToken) {
  6.     $tempFile = $_FILES['Filedata']['tmp_name'];
  7.     //生成新的文件名
  8.     $filename = time().mt_rand(10,99).'.'.end(explode('.', $_FILES['Filedata']['name'])); //在这里修改生出随机图片名
  9.     $fileTypes = array('jpg','jpeg','gif','png');  //限制上传的文件为图片
  10.     $fileParts = pathinfo($_FILES['Filedata']['name']);
  11.  
  12.     if (in_array($fileParts['extension'],$fileTypes)) {
  13.         //上传图片到云端 start
  14.         require_once("qiniu/io.php");
  15.         require_once("qiniu/rs.php");
  16.  
  17.         $bucket = "hdimg";//空间名
  18.         //截取原始文件后缀名
  19.         $key1 = "Uploads/".$filename;
  20.         $accessKey = ' '; //这里填写ak
  21.         $secretKey = ' '; // 这里填写SK
  22.  
  23.         Qiniu_SetKeys($accessKey, $secretKey);
  24.         $putPolicy = new Qiniu_RS_PutPolicy($bucket);
  25.         $upToken = $putPolicy->Token(null);
  26.         $putExtra = new Qiniu_PutExtra();
  27.         $putExtra->Crc32 = 1;
  28.         //$tempFile uploadify上传的临时文件路径
  29.         list($ret, $err) = Qiniu_PutFile($upToken, $key1, $tempFile, $putExtra);
  30.         //上传图片到云端 end
  31.  
  32.         //返回文件名给前台
  33.         echo "http://hdimg.qiniudn.com/".$key1; //前台使用回调函数的data参数接收
  34.     } else {
  35.         echo 'Invalid file type.';
  36.     }
  37. }

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

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>UploadiFive Test</title>
  6. <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
  7. <script src="jquery.uploadify.min.js" type="text/javascript"></script>
  8. <link rel="stylesheet" type="text/css" href="uploadify.css">
  9. <style type="text/css">
  10. body {
  11. 	font: 13px Arial, Helvetica, Sans-serif;
  12. }
  13. </style>
  14. </head>
  15.  
  16. <body>
  17. 	<form>
  18. 		<div id="queue"></div>
  19. 		<input id="file_upload" name="file_upload" type="file" multiple="true">
  20. 	</form>
  21. 			<img width="100" height="100" id="txtimg" src=""/>
  22. 	<script type="text/javascript">
  23. 		<?php $timestamp = time();?>
  24. 		$(function() {
  25. 			$('#file_upload').uploadify({
  26. 				'formData'     : {
  27. 					'timestamp' : '<?php echo $timestamp;?>',
  28. 					'token'     : '<?php echo md5('unique_salt' . $timestamp);?>'
  29. 				},
  30. 				'swf'      : 'uploadify.swf',
  31. 				'uploader' : 'uploadify.php',
  32. 				 'onUploadSuccess' : function(file,data,response) {  //执行成功后就执行该段js
  33. 						document.getElementById('txtimg').src=data;
  34.                                 }
  35. 			});
  36.  
  37. 		});
  38. 	</script>
  39. </body>
  40. </html>

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

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

  1. document.getElementById('txtimg').src=data;  可以把data 传输到父页面 的 #txtimg 中。
  1. 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. HDU 1847 Good Luck in CET-4 Everybody! （博弈论sg）

    Good Luck in CET-4 Everybody! Problem Description 大学英语四级考试就要来临了,你是不是在紧张的复习?或许紧张得连短学期的ACM都没工夫练习了.反正我知 ...

  2. 征服 Redis + Jedis + Spring （一）—— 配置&常规操作（GET SET DEL）

    有日子没写博客了,真的是忙得要疯掉. 完成项目基础架构搭建工作,解决了核心技术问题,接着需要快速的调研下基于Spring框架下的Redis操作. 相关链接: 征服 Redis 征服 Redis + J ...

  3. Eclipse reports that Android SDK Content Loader has encountered a problem. parseSdkContent failed.

    1) Download the SDK platform for API 20 (4.4W) 2) Navigate to your sdk folder (should be like D:\Ecl ...

  4. requestFocusFromTouch , requestFocus

    /*if(userNameEditText.isInTouchMode()){ userNameEditText.requestFocusFromTouch(); }else{ userNameEdi ...

  5. UDF 编写自定函数

    在Mysql的官方文档中有说明如何给Mysql添加新的函数. 添加的函数可分为3种: .自行编写函数的源码,将源码编译成动态库,然后使用Mysql的CREATE FUNCTION语句来将函数添加进My ...

  6. MVC1笔记

    /// ///直接返回 字符串的 Action方法,适用于 不需要返回大量 html代码的业务(类似于一般处理程序) /// public string Index() { return " ...

  7. StringBuffer与StringBuilder之间的区别

    public class Test { public static void main(String[] args) { StringBuffer strBuffer = new StringBuff ...

  8. selendroid项目实战教程1

    selendroid是国内使用非常少的框架.资料也少.刚好公司项目用到,给大家分享下,技术不太行,有错误还望指正. 使用selendroid契机,是公司开发的APP,需要大量捕捉Toast信息.公司的 ...

  9. 用 C# 如何判断数据库中是否存在一个值

    选定一个列,比如用户编号列 //欲插入的用户编号string ll_userID="xxxxxxxx"; //查询此编号是否存在SqlCommand mycmd = new Sql ...

  10. 关于利用动态代理手写数据库连接池的异常 java.lang.ClassCastException: com.sun.proxy.$Proxy0 cannot be cast to java.sql.Connection

    代码如下: final Connection conn=pool.remove(0); //利用动态代理改造close方法 Connection proxy= (Connection) Proxy.n ...