Uploadify は、アップロードの進行状況ページを表示するために 7niu クラウドストレージを実装します-PHPチュートリアル-php.cn

Uploadify は Qiniu Cloud Storage を実装して、アップロードの進行状況ページを表示します

準備:

uploadify ダウンロードアドレス:

http://www.uploadify.com/download/

Qiniu php-sdk 開発ガイド:

http://developer. .com/docs/v6/sdk/php-sdk.html

php-sdk アドレス:

https://github.com /qiniu/php-sdk

開始:

デモ:

http://hxend.com/uploadif/

Qiniu にアカウントを登録すると、標準ユーザーになります

無料ストレージ容量 10 GB
毎月の無料ダウンロードトラフィック 10 GB
毎月の無料 PUT/DELETE リクエスト 100,000 件
毎月 100 万件の GET リクエストが無料

良い特典のようですね。

登録が成功すると、アカウントページにコードで使用できる ak キーと sk キーが表示されます。

uploadify をダウンロードした後、Qiniu 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で出力された値データを呼び出して動作します。

<!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>

ログイン後にコピー

ページにデータを入力して、現在のページを表示します。コントロール #txtimg の値は出力データ値、つまり画像アドレスです。

後で iframe を呼び出す必要がある場合は、

document.getElementById('txtimg').src=data;  可以把data 传输到父页面 的 #txtimg 中。

ログイン後にコピー

parent.document.getElementById('txtimg').src=data;

ログイン後にコピー

デモ:

http://hxend.com/uploadif/

博文归石头和博客园所有，转载请注明出处，方便更新。

http://www.cnblogs.com/webers/p/4162108.html

Uploadify は、アップロードの進行状況ページを表示するために 7niu クラウド ストレージを実装します

Uploadify は、アップロードの進行状況ページを表示するために 7niu クラウドストレージを実装します