码迷,mamicode.com
首页 > Web开发 > 详细

uploadify实现七牛云存储 显示上传进度+页面显示

时间:2014-12-14 11:49:21      阅读:259      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   http   io   ar   color   os   使用   

准备:

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

开始:

bubuko.com,布布扣bubuko.com,布布扣

bubuko.com,布布扣

 DEMO:

http://hxend.com/uploadif/

 

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

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

貌似是一个不错的福利。

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

bubuko.com,布布扣

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

bubuko.com,布布扣

打开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;

 <img width="100" height="100" id="txtimg" src="http://hdimg.qiniudn.com/Uploads/141848571735.jpg">

 DEMO:

http://hxend.com/uploadif/

 

博文归石头和博客园所有,转载请注明出处,方便更新。
 http://www.cnblogs.com/webers/p/4162108.html

uploadify实现七牛云存储 显示上传进度+页面显示

标签:des   style   blog   http   io   ar   color   os   使用   

原文地址:http://www.cnblogs.com/webers/p/4162108.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!