Home > Article > Backend Development > uploadify实现7牛云存储 显示上传进度+页面显示
uploadify实现7牛云存储 显示上传进度+页面显示
- WBOYOriginal
- 2016-06-13 12:11:301225browse
uploadify实现七牛云存储 显示上传进度+页面显示
准备：
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:
http://hxend.com/uploadif/
在七牛里面注册账号以后，成为标准用户
免费存储空间10GB
免费每月下载流量10GB
免费每月PUT/DELETE 10万次请求
免费每月GET 100万次请求
貌似是一个不错的福利。
成功注册后就会 账号页面 有ak 和sk key 可以在代码中使用。
下载好uploadify 后 把 七牛 php -sdk 文件包里面的内容放在 uploadify 里面
打开uploadify.php 文件 代码如下：
<?php/*UploadifyCopyright (c) 2012 Reactive Apps, Ronnie GarciaReleased 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 style="max-width:90%" style="max-width:90%" id="txtimg" src=""/ alt="uploadify实现7牛云存储 显示上传进度+页面显示" > <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;
DEMO:
http://hxend.com/uploadif/
| 博文归石头和博客园所有，转载请注明出处，方便更新。 |
| http://www.cnblogs.com/webers/p/4162108.html |
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：推荐几个好用的PHP集成开发环境 (二Next article：thinkphp 开启主从的事务有关问题