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 |

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen



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

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

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

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

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

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

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
