• 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 文件  代码如下:

    <?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;
  • 相关阅读:
    关于 CommonJS AMD CMD UMD 规范
    如何成为一名卓越的前端工程师
    javascript 中 void 0的含义及undefine于void 0区别
    原生js获取样式表:currentStyle与defaultView的区别 真实例子
    attachEvent与addEventListener的区别 真实例子
    将图片转换成黑白(灰色、置灰)
    前端图片缓存问题
    html里的<wbr>标签什么意思
    关于SQL SERVER中的FLOAT转换为VARCHAR
    记一次工作需求: RSA密钥之C#格式与Java格式转换
  • 原文地址:https://www.cnblogs.com/webers/p/4162108.html
Copyright © 2020-2023  润新知