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:
在七牛里面注册账号以后,成为标准用户
免费存储空间10GB
免费每月下载流量10GB
免费每月PUT/DELETE 10万次请求
免费每月GET 100万次请求
貌似是一个不错的福利。
成功注册后就会 账号页面 有ak 和sk key 可以在代码中使用。
下载好uploadify 后 把 七牛 php -sdk 文件包里面的内容放在 uploadify 里面
打开uploadify.php 文件 代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <?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.' ; } } ?> |
修改代码如下: 介绍参考代码内部.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <?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 进行操作。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <!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 调用的话 可以把
1 | document.getElementById( 'txtimg' ).src=data; 可以把data 传输到父页面 的 #txtimg 中。 |
1 | parent.document.getElementById( 'txtimg' ).src=data; |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步