uploadify实现七牛云存储显示上传进度+页面显示，uploadify牛云-php手册-php.cn

Home

php教程

php手册

uploadify实现七牛云存储显示上传进度+页面显示，uploadify牛云

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 13, 2016 am 09:19 AM

cloud storage

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/imghwm/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;

uploadify实现七牛云存储显示上传进度+页面显示，uploadify牛云

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

如何修复 Explorer.exe 高 CPU 使用率 Windows 11May 02, 2023 am 09:40 AM

与Windows11中Explorer.exe高CPU使用率的问题不同，一台计算机可能会遇到高CPU使用率。这是完全正常的，只要它很少发生并且不会显着影响PC的性能。然而，当它反复出现时，这会成为一个问题。它可能会使系统升温，延迟加载时间，并可能在您处理重要任务时冻结。为什么我的电脑会遇到Explorer.exe高CPU使用率？通常，由于以下原因之一，计算机可能会遇到高CPU使用率：运行需要更高CPU要求的程序：视频编辑和游戏软件会触发高CPU使用率。如果在与发布

Windows 11 预览版更新支持更深入的 OneDrive 集成May 01, 2023 pm 07:07 PM

Windows11Build25145现在可供开发频道中的用户使用，其中包含一些小的新功能。例如，Build25145可以在OneDrive和设置之间实现更紧密的集成。同样，它还改进了讲述人盲文驱动程序支持并添加了新的本地管理员密码解决方案。这些改进仅适用于开发频道的成员。根据发行说明，Windows11Build25145添加了盲文驱动程序解决方案。该公司表示，盲文设备现在可以更好地工作，因为它们可以在讲述人和第三方屏幕阅读器之间顺畅切换，因为讲述人会自动更改盲文驱动程序。要开始

微软取消了OneDrive商业计划中的无限存储选项Aug 31, 2023 pm 08:17 PM

本站消息显示，微软将不再为新客户提供OneDriveforBusiness计划的“无限存储”选项，这对企业用户的云存储优惠产生了影响TechRadar发现，微软已经下架了每个用户每月10美元的OneDriveforBusiness（计划2）。目前，微软的商业云存储计划只剩下OneDriveforBusiness（计划1）本站注意到，中国的OneDriveforBusiness（计划1）每个用户的价格为每月36元，提供最多1TB的云存储空间，根据用户数量可选择增加到5TB。此外，微软还为其两个Mi

PHP和Amazon Web Services集成实现高效的云计算和存储Jun 25, 2023 am 09:12 AM

随着云计算和大数据的不断发展，云服务已经成为企业和开发者不可或缺的工具之一。而AmazonWebServices（AWS）则成为了全球最受欢迎的云服务提供商之一。PHP作为一种广泛使用的服务器端脚本语言，也逐渐成为了许多企业和开发者的首选。本文将讨论如何通过PHP和AWS集成，实现高效的云计算和存储。一、AWS的优势AWS作为全球最大的云服务提供商之一，

icloud有必要开吗Feb 23, 2024 pm 12:51 PM

icloud有必要开吗如今，随着互联网的发展和智能手机的普及，人们的生活和工作方式都有了很大的改变。云存储服务也逐渐成为人们日常生活中不可或缺的一部分。其中，苹果公司的iCloud就是备受欢迎的云存储服务之一。然而，对于一些用户来说，他们可能还不太清楚iCloud是否真的有必要开通。本文将从几个方面来探讨iCloud的必要性。首先，iCloud为用户提供了方

使用Java SDK对接七牛云：如何实现云存储服务？Jul 05, 2023 pm 02:49 PM

使用JavaSDK对接七牛云：如何实现云存储服务？引言：随着云计算的快速发展，越来越多的企业和开发者将数据存储在云上，以实现数据的安全备份和高可用性。七牛云是国内知名的云存储服务提供商之一，提供了丰富的云存储服务和强大的开发工具包。本文将介绍如何使用JavaSDK对接七牛云，实现云存储服务。一、注册七牛云账号：在开始前，您需要先注册一个七牛云账号，并创建

PHP开发：使用 Flysystem 实现多种云存储服务Jun 15, 2023 pm 10:43 PM

随着云计算和云存储的发展，越来越多的开发者开始使用云存储来解决存储和传输数据的问题。在PHP开发中，Flysystem是一个非常实用的工具，它提供了一个统一的API，可以轻松地使用多种不同的云存储服务。在本文中，我们将介绍如何使用Flysystem实现多种云存储服务，并展示一些用于不同服务的示例代码。什么是Flysystem？Flysystem

如何使用云存储Oct 24, 2023 pm 03:21 PM

使用云存储需要选择云存储提供商、注册账户和创建存储桶、上传和下载文件、管理权限和访问控制、数据备份和恢复、数据安全和加密、费用管理。详细介绍：1、选择云存储提供商，需要选择一个合适的云存储提供商，目前市场上有很多知名的云存储提供商，如亚马逊S3、微软Azure Blob存储、谷歌云存储等，可以根据自己的需求和预算选择合适的提供商；2、注册账户和创建存储桶，一旦选择了云存储等等。

See all articles