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 |
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1377
52
How to Fix Explorer.exe High CPU Usage Windows 11
May 02, 2023 am 09:40 AM
Unlike the Explorer.exe high CPU usage issue in Windows 11, a computer may experience high CPU usage. This is completely normal, as long as it happens rarely and doesn't significantly affect your PC's performance. However, this can become a problem when it occurs repeatedly. It can heat up your system, delay loading times, and potentially freeze while you're working on important tasks. Why is my computer experiencing high CPU usage with Explorer.exe? Typically, a computer may experience high CPU usage due to one of the following reasons: Running programs that require higher CPU requirements: Video editing and gaming software can trigger high CPU usage. If published with
Windows 11 preview update supports deeper OneDrive integration
May 01, 2023 pm 07:07 PM
Windows 11 Build 25145 is now available to users in the development channel and includes some minor new features. For example, Build25145 enables tighter integration between OneDrive and Settings. Likewise, it also improves Narrator braille driver support and adds a new local administrator password solution. These improvements are only available to members of the Development Channel. According to the release notes, Windows 11 Build 25145 adds a braille driver solution. The company says braille devices will now work better as they can switch smoothly between Narrator and third-party screen readers because Narrator automatically changes the braille driver. to start
Microsoft removes unlimited storage option from OneDrive business plan
Aug 31, 2023 pm 08:17 PM
News from this site shows that Microsoft will no longer offer the "unlimited storage" option of the OneDrive for Business plan to new customers, which has an impact on cloud storage offers for business users. TechRadar found that Microsoft has removed the $10 per user per month OneDrive for Business (Plan 2). Currently, Microsoft’s only business cloud storage plan is OneDrive for Business (Plan 1). This site noticed that China’s OneDrive for Business (Plan 1) is priced at 36 yuan per user per month, providing up to 1TB of cloud storage space, depending on the number of users. Optional increase to 5TB. In addition, Microsoft has also announced plans for its two Mi
Is it necessary to turn on icloud?
Feb 23, 2024 pm 12:51 PM
Is it necessary to turn on icloud? Nowadays, with the development of the Internet and the popularity of smartphones, people's life and work styles have changed a lot. Cloud storage services have gradually become an indispensable part of people's daily lives. Among them, Apple's iCloud is one of the most popular cloud storage services. However, for some users, they may not be sure whether iCloud is really necessary. This article will explore the necessity of iCloud from several aspects. First, iCloud provides users with a way to
PHP and Amazon Web Services integration enable efficient cloud computing and storage
Jun 25, 2023 am 09:12 AM
With the continuous development of cloud computing and big data, cloud services have become one of the indispensable tools for enterprises and developers. Amazon Web Services (AWS) has become one of the most popular cloud service providers in the world. As a widely used server-side scripting language, PHP has gradually become the first choice for many enterprises and developers. This article will discuss how to achieve efficient cloud computing and storage through PHP and AWS integration. 1. Advantages of AWS As one of the world’s largest cloud service providers, AWS
PHP development: Use Flysystem to implement multiple cloud storage services
Jun 15, 2023 pm 10:43 PM
With the development of cloud computing and cloud storage, more and more developers are beginning to use cloud storage to solve the problems of storing and transmitting data. In PHP development, Flysystem is a very practical tool that provides a unified API that can easily use many different cloud storage services. In this article, we will introduce how to use Flysystem to implement multiple cloud storage services and show some sample code for different services. What is Flysystem? Flysystem
How to use trusted computing technology to build a trusted cloud storage system?
Jun 11, 2023 pm 02:16 PM
With the continuous development of the Internet and cloud computing, data security issues have become an issue that cannot be ignored. In order to protect the security and reliability of data, trusted computing is widely used in cloud storage systems. This article will introduce in detail the process of building a trusted cloud storage system using trusted computing technology. First, let’s understand what trusted computing technology is. Trusted computing technology is a technology that ensures that the computing process and its results are protected on the computing platform. This means that on a trusted computing platform, neither the calculation process nor the results can be compromised by malware or attackers
Using Java SDK to connect to Qiniu Cloud: How to implement cloud storage services?
Jul 05, 2023 pm 02:49 PM
Using JavaSDK to connect to Qiniu Cloud: How to implement cloud storage services? Introduction: With the rapid development of cloud computing, more and more enterprises and developers are storing data on the cloud to achieve secure backup and high availability of data. Qiniu Cloud is one of the well-known cloud storage service providers in China, providing a wealth of cloud storage services and powerful development toolkits. This article will introduce how to use JavaSDK to connect to Qiniu Cloud to implement cloud storage services. 1. Register a Qiniu Cloud account: Before starting, you need to register a Qiniu Cloud account and create
