uploadify实现七牛云存储 显示上传进度+页面显示,uploadify牛云
uploadify实现七牛云存储 显示上传进度+页面显示,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 /* 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 src="/static/imghw/default1.png" data-src="http://www.bkjia.com/uploads/allimg/141214/16013Ia3-1.jpg" class="lazy" style="max-width:90%" style="max-width:90%" id="txtimg"/ alt="uploadify实现七牛云存储 显示上传进度+页面显示,uploadify牛云" > <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 |

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

熱門話題

與Windows11中Explorer.exe高CPU使用率的問題不同,一台電腦可能會遇到高CPU使用率。這是完全正常的,只要它很少發生並且不會顯著影響PC的性能。然而,當它反覆出現時,這會成為一個問題。它可能會使系統升溫,延遲載入時間,並可能在您處理重要任務時凍結。為什麼我的電腦會遇到Explorer.exe高CPU使用率?通常,由於以下原因之一,電腦可能會遇到高CPU使用率:運行需要更高CPU要求的程式:影片編輯和遊戲軟體會觸發高CPU使用率。如果在與發布

Windows11Build25145現在可供開發頻道中的使用者使用,其中包含一些小的新功能。例如,Build25145可以在OneDrive和設定之間實現更緊密的整合。同樣,它還改進了講述人盲文驅動程式支援並添加了新的本機管理員密碼解決方案。這些改進僅適用於開發頻道的成員。根據發行說明,Windows11Build25145新增了點字驅動程式解決方案。該公司表示,點字設備現在可以更好地工作,因為它們可以在講述人和第三方螢幕閱讀器之間順暢切換,因為講述人會自動更改點字驅動程式。要開始

本站訊息顯示,微軟將不再為新客戶提供OneDriveforBusiness計畫的「無限儲存」選項,這對企業用戶的雲端儲存優惠產生了影響TechRadar發現,微軟已經下架了每個用戶每月10美元的OneDriveforBusiness (計劃2)。目前,微軟的商業雲端儲存計畫只剩下OneDriveforBusiness(計畫1)本站注意到,中國的OneDriveforBusiness(計畫1)每個用戶的價格為每月36元,提供最多1TB的雲端儲存空間,根據用戶數量可選擇增加到5TB。此外,微軟也為其兩個Mi

icloud有必要開嗎如今,隨著網路的發展和智慧型手機的普及,人們的生活和工作方式都有了很大的改變。雲端儲存服務也逐漸成為人們日常生活中不可或缺的一部分。其中,蘋果公司的iCloud就是備受歡迎的雲端儲存服務之一。然而,對於某些用戶來說,他們可能還不太清楚iCloud是否真的有必要開通。本文將從幾個面向來探討iCloud的必要性。首先,iCloud為用戶提供了方

隨著雲端運算和大數據的不斷發展,雲端服務已成為企業和開發者不可或缺的工具之一。而AmazonWebServices(AWS)則成為了全球最受歡迎的雲端服務供應商之一。 PHP作為一種廣泛使用的伺服器端腳本語言,也逐漸成為了許多企業和開發者的首選。本文將討論如何透過PHP和AWS集成,實現高效的雲端運算和儲存。一、AWS的優勢AWS作為全球最大的雲端服務供應商之一,

隨著雲端運算和雲端儲存的發展,越來越多的開發者開始使用雲端儲存來解決儲存和傳輸資料的問題。在PHP開發中,Flysystem是一個非常實用的工具,它提供了一個統一的API,可以輕鬆使用多種不同的雲端儲存服務。在本文中,我們將介紹如何使用Flysystem實作多種雲端儲存服務,並展示一些用於不同服務的範例程式碼。什麼是Flysystem? Flysystem

隨著網路和雲端運算的不斷發展,資料安全問題已經成為了一個不容忽視的問題。為了保護資料的安全性和可靠性,可信任運算被廣泛應用於雲端儲存系統之中。本文將詳細介紹可信任運算技術建構可信任雲端儲存系統的過程。首先,讓我們來了解一下什麼是可信計算技術。可信任運算技術是一種保證計算過程及其結果在計算平台上得到保護的技術。這意味著在可信任運算平台上,運算過程和結果都不會被惡意軟體或攻擊者

使用JavaSDK對接七牛雲端:如何實現雲端儲存服務?引言:隨著雲端運算的快速發展,越來越多的企業和開發者將資料儲存在雲端上,以實現資料的安全備份和高可用性。七牛雲是國內知名的雲端儲存服務供應商之一,提供了豐富的雲端儲存服務和強大的開發工具包。本文將介紹如何使用JavaSDK對接七牛雲,實現雲端儲存服務。一、註冊七牛雲端帳號:在開始前,您需要先註冊一個七牛雲端帳號,並建立
