Inhaltsverzeichnis
uploadify实现七牛云存储 显示上传进度+页面显示,uploadify牛云
Heim php教程 php手册 uploadify实现七牛云存储 显示上传进度+页面显示,uploadify牛云

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

Jun 13, 2016 am 09:19 AM
云存储

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.';
	}
}
?>
Nach dem Login kopieren

  修改代码如下: 介绍参考代码内部.

<?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.';
    }
}
Nach dem Login kopieren

  前台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>
Nach dem Login kopieren

  对data 进行输入到页面 实现 当前页面显示。控制 #txtimg 的值为 输出的data值 即为 图片地址。

后期 如果需要 iframe 调用的话 可以把

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

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

 DEMO:

http://hxend.com/uploadif/

 

博文归石头和博客园所有,转载请注明出处,方便更新。
 http://www.cnblogs.com/webers/p/4162108.html
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So beheben Sie die hohe CPU-Auslastung von Explorer.exe unter Windows 11 So beheben Sie die hohe CPU-Auslastung von Explorer.exe unter Windows 11 May 02, 2023 am 09:40 AM

Im Gegensatz zum Problem mit der hohen CPU-Auslastung von Explorer.exe in Windows 11 kann es bei einem Computer zu einer hohen CPU-Auslastung kommen. Dies ist völlig normal, solange es selten vorkommt und die Leistung Ihres PCs nicht wesentlich beeinträchtigt. Dies kann jedoch zum Problem werden, wenn es wiederholt auftritt. Es kann Ihr System aufheizen, die Ladezeiten verzögern und möglicherweise einfrieren, während Sie an wichtigen Aufgaben arbeiten. Warum kommt es bei Explorer.exe zu einer hohen CPU-Auslastung meines Computers? Typischerweise kann es aus einem der folgenden Gründe zu einer hohen CPU-Auslastung eines Computers kommen: Das Ausführen von Programmen, die höhere CPU-Anforderungen erfordern: Videobearbeitungs- und Spielesoftware kann eine hohe CPU-Auslastung auslösen. Bei Veröffentlichung mit

Das Vorschau-Update für Windows 11 unterstützt eine tiefere OneDrive-Integration Das Vorschau-Update für Windows 11 unterstützt eine tiefere OneDrive-Integration May 01, 2023 pm 07:07 PM

Windows 11 Build 25145 steht Benutzern jetzt im Entwicklungskanal zur Verfügung und enthält einige kleinere neue Funktionen. Build25145 ermöglicht beispielsweise eine engere Integration zwischen OneDrive und Einstellungen. Ebenso wird die Unterstützung des Narrator-Braille-Treibers verbessert und eine neue Lösung für lokale Administratorkennwörter hinzugefügt. Diese Verbesserungen stehen nur Mitgliedern des Development Channel zur Verfügung. Den Versionshinweisen zufolge fügt Windows 11 Build 25145 eine Braille-Treiberlösung hinzu. Das Unternehmen gibt an, dass Braille-Geräte jetzt besser funktionieren, da sie reibungslos zwischen Narrator und Bildschirmleseprogrammen von Drittanbietern wechseln können, da Narrator den Braille-Treiber automatisch wechselt. beginnen

Microsoft entfernt die unbegrenzte Speicheroption aus dem OneDrive-Geschäftsplan Microsoft entfernt die unbegrenzte Speicheroption aus dem OneDrive-Geschäftsplan Aug 31, 2023 pm 08:17 PM

Nachrichten von dieser Website zeigen, dass Microsoft Neukunden die Option „unbegrenzter Speicher“ des OneDrive for Business-Plans nicht mehr anbieten wird, was Auswirkungen auf Cloud-Speicherangebote für Geschäftsbenutzer hat. TechRadar hat festgestellt, dass Microsoft die 10 US-Dollar pro Benutzer und Person gestrichen hat Monat OneDrive for Business (Plan 2). Derzeit ist Microsofts einziger Cloud-Speicherplan für Unternehmen OneDrive for Business (Plan 1). Dieser Website zufolge kostet OneDrive for Business (Plan 1) in China 36 Yuan pro Benutzer und Monat und bietet je nach Anbieter bis zu 1 TB Cloud-Speicherplatz Die Anzahl der Benutzer kann optional auf 5 TB erhöht werden. Darüber hinaus hat Microsoft auch Pläne für seine beiden Mi angekündigt

Ist es notwendig, iCloud zu aktivieren? Ist es notwendig, iCloud zu aktivieren? Feb 23, 2024 pm 12:51 PM

Ist es notwendig, icloud einzuschalten? Mit der Entwicklung des Internets und der Popularität von Smartphones haben sich die Lebens- und Arbeitsstile der Menschen stark verändert. Cloud-Speicherdienste sind nach und nach zu einem unverzichtbaren Bestandteil des täglichen Lebens der Menschen geworden. Unter ihnen ist Apples iCloud einer der beliebtesten Cloud-Speicherdienste. Einige Benutzer sind sich jedoch möglicherweise nicht sicher, ob iCloud wirklich erforderlich ist. In diesem Artikel wird die Notwendigkeit von iCloud unter verschiedenen Gesichtspunkten untersucht. Erstens bietet iCloud Benutzern eine Möglichkeit dazu

Die Integration von PHP und Amazon Web Services ermöglicht effizientes Cloud-Computing und -Speicherung Die Integration von PHP und Amazon Web Services ermöglicht effizientes Cloud-Computing und -Speicherung Jun 25, 2023 am 09:12 AM

Mit der kontinuierlichen Weiterentwicklung von Cloud Computing und Big Data sind Cloud-Dienste zu einem unverzichtbaren Werkzeug für Unternehmen und Entwickler geworden. Amazon Web Services (AWS) hat sich zu einem der beliebtesten Cloud-Service-Anbieter weltweit entwickelt. Als weit verbreitete serverseitige Skriptsprache ist PHP für viele Unternehmen und Entwickler nach und nach zur ersten Wahl geworden. In diesem Artikel wird erläutert, wie Sie durch die PHP- und AWS-Integration effizientes Cloud-Computing und -Speicherung erreichen können. 1. Vorteile von AWS Als einer der weltweit größten Cloud-Service-Anbieter ist AWS

PHP-Entwicklung: Verwenden Sie Flysystem, um mehrere Cloud-Speicherdienste zu implementieren PHP-Entwicklung: Verwenden Sie Flysystem, um mehrere Cloud-Speicherdienste zu implementieren Jun 15, 2023 pm 10:43 PM

Mit der Entwicklung von Cloud Computing und Cloud Storage beginnen immer mehr Entwickler, Cloud Storage zu nutzen, um die Probleme der Speicherung und Übertragung von Daten zu lösen. In der PHP-Entwicklung ist Flysystem ein sehr praktisches Tool, das eine einheitliche API bereitstellt, mit der viele verschiedene Cloud-Speicherdienste problemlos genutzt werden können. In diesem Artikel stellen wir vor, wie Sie mit Flysystem mehrere Cloud-Speicherdienste implementieren, und zeigen einige Beispielcodes für verschiedene Dienste. Was ist Flysystem? Fliegensystem

Wie kann man Trusted-Computing-Technologie nutzen, um ein vertrauenswürdiges Cloud-Speichersystem aufzubauen? Wie kann man Trusted-Computing-Technologie nutzen, um ein vertrauenswürdiges Cloud-Speichersystem aufzubauen? Jun 11, 2023 pm 02:16 PM

Mit der kontinuierlichen Weiterentwicklung des Internets und des Cloud Computing sind Fragen der Datensicherheit zu einem nicht zu vernachlässigenden Thema geworden. Um die Sicherheit und Zuverlässigkeit von Daten zu schützen, wird Trusted Computing häufig in Cloud-Speichersystemen eingesetzt. In diesem Artikel wird der Prozess zum Aufbau eines vertrauenswürdigen Cloud-Speichersystems mithilfe vertrauenswürdiger Computertechnologie ausführlich vorgestellt. Lassen Sie uns zunächst verstehen, was Trusted-Computing-Technologie ist. Bei der Trusted-Computing-Technologie handelt es sich um eine Technologie, die sicherstellt, dass der Rechenprozess und seine Ergebnisse auf der Rechenplattform geschützt sind. Dies bedeutet, dass auf einer vertrauenswürdigen Computerplattform weder der Berechnungsprozess noch die Ergebnisse durch Malware oder Angreifer gefährdet werden können

Verwenden von Java SDK zur Verbindung mit Qiniu Cloud: Wie implementiert man Cloud-Speicherdienste? Verwenden von Java SDK zur Verbindung mit Qiniu Cloud: Wie implementiert man Cloud-Speicherdienste? Jul 05, 2023 pm 02:49 PM

Mit JavaSDK eine Verbindung zur Qiniu Cloud herstellen: Wie implementiert man Cloud-Speicherdienste? Einleitung: Mit der rasanten Entwicklung des Cloud Computing speichern immer mehr Unternehmen und Entwickler Daten in der Cloud, um eine sichere Sicherung und hohe Datenverfügbarkeit zu erreichen. Qiniu Cloud ist einer der bekanntesten Cloud-Speicherdienstanbieter in China und bietet eine Fülle von Cloud-Speicherdiensten und leistungsstarken Entwicklungs-Toolkits. In diesem Artikel wird erläutert, wie Sie mit JavaSDK eine Verbindung zur Qiniu Cloud herstellen und Cloud-Speicherdienste implementieren. 1. Registrieren Sie ein Qiniu Cloud-Konto: Bevor Sie beginnen, müssen Sie ein Qiniu Cloud-Konto registrieren und erstellen

See all articles