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 |

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas



Tidak seperti isu penggunaan CPU tinggi Explorer.exe dalam Windows 11, komputer mungkin mengalami penggunaan CPU yang tinggi. Ini adalah perkara biasa, selagi ia jarang berlaku dan tidak menjejaskan prestasi PC anda dengan ketara. Walau bagaimanapun, ini boleh menjadi masalah apabila ia berlaku berulang kali. Ia boleh memanaskan sistem anda, melambatkan masa pemuatan dan berkemungkinan membeku semasa anda menjalankan tugas penting. Mengapakah komputer saya mengalami penggunaan CPU yang tinggi dengan Explorer.exe? Biasanya, komputer mungkin mengalami penggunaan CPU yang tinggi disebabkan salah satu daripada sebab berikut: Menjalankan program yang memerlukan keperluan CPU yang lebih tinggi: Penyuntingan video dan perisian permainan boleh mencetuskan penggunaan CPU yang tinggi. Jika diterbitkan dengan

Windows 11 Build 25145 kini tersedia untuk pengguna dalam saluran pembangunan dan termasuk beberapa ciri baharu kecil. Sebagai contoh, Build25145 membolehkan penyepaduan yang lebih ketat antara OneDrive dan Tetapan. Begitu juga, ia juga meningkatkan sokongan pemandu braille Narrator dan menambah penyelesaian kata laluan pentadbir tempatan baharu. Penambahbaikan ini hanya tersedia untuk ahli Saluran Pembangunan. Menurut nota keluaran, Windows 11 Build 25145 menambah penyelesaian pemacu braille. Syarikat itu berkata peranti braille kini akan berfungsi dengan lebih baik kerana ia boleh bertukar dengan lancar antara Narrator dan pembaca skrin pihak ketiga kerana Narrator menukar pemacu braille secara automatik. untuk memulakan

Berita dari tapak ini menunjukkan bahawa Microsoft tidak lagi akan menawarkan pilihan "storan tanpa had" pelan OneDrive for Business kepada pelanggan baharu, yang memberi kesan kepada tawaran storan awan untuk pengguna perniagaan TechRadar mendapati bahawa Microsoft telah mengalih keluar $10 setiap pengguna bulan OneDrive for Business (Pelan 2). Pada masa ini, satu-satunya pelan storan awan perniagaan Microsoft ialah OneDrive for Business (Pelan 1 Tapak ini mendapati bahawa OneDrive for Business China (Pelan 1) berharga 36 yuan bagi setiap pengguna sebulan, menyediakan sehingga 1TB ruang storan awan, bergantung pada). bilangan pengguna meningkat kepada 5TB. Selain itu, Microsoft juga telah mengumumkan rancangan untuk dua Mi

Dengan pembangunan berterusan pengkomputeran awan dan data besar, perkhidmatan awan telah menjadi salah satu alat yang sangat diperlukan untuk perusahaan dan pembangun. Perkhidmatan Web Amazon (AWS) telah menjadi salah satu penyedia perkhidmatan awan paling popular di dunia. Sebagai bahasa skrip bahagian pelayan yang digunakan secara meluas, PHP secara beransur-ansur menjadi pilihan pertama untuk banyak perusahaan dan pembangun. Artikel ini akan membincangkan cara untuk mencapai pengkomputeran dan penyimpanan awan yang cekap melalui penyepaduan PHP dan AWS. 1. Kelebihan AWS Sebagai salah satu penyedia perkhidmatan awan terbesar di dunia, AWS

Adakah perlu menghidupkan icloud pada masa kini, dengan perkembangan Internet dan populariti telefon pintar, kehidupan dan gaya kerja orang telah banyak berubah. Perkhidmatan storan awan secara beransur-ansur menjadi bahagian yang sangat diperlukan dalam kehidupan seharian orang ramai. Antaranya, iCloud Apple adalah salah satu perkhidmatan storan awan yang paling popular. Walau bagaimanapun, bagi sesetengah pengguna, mereka mungkin tidak pasti sama ada iCloud benar-benar diperlukan. Artikel ini akan meneroka keperluan iCloud dari beberapa aspek. Pertama, iCloud menyediakan pengguna dengan cara untuk

Dengan pembangunan pengkomputeran awan dan storan awan, semakin ramai pembangun mula menggunakan storan awan untuk menyelesaikan masalah menyimpan dan menghantar data. Dalam pembangunan PHP, Flysystem ialah alat yang sangat praktikal yang menyediakan API bersatu yang boleh menggunakan banyak perkhidmatan storan awan yang berbeza dengan mudah. Dalam artikel ini, kami akan memperkenalkan cara menggunakan Flysystem untuk melaksanakan berbilang perkhidmatan storan awan dan menunjukkan beberapa kod sampel untuk perkhidmatan yang berbeza. Apa itu Flysystem? Sistem terbang

Dengan pembangunan berterusan Internet dan pengkomputeran awan, isu keselamatan data telah menjadi isu yang tidak boleh diabaikan. Untuk melindungi keselamatan dan kebolehpercayaan data, pengkomputeran yang dipercayai digunakan secara meluas dalam sistem storan awan. Artikel ini akan memperkenalkan secara terperinci proses membina sistem storan awan yang dipercayai menggunakan teknologi pengkomputeran yang dipercayai. Mula-mula, mari kita fahami apa itu teknologi pengkomputeran yang dipercayai. Teknologi pengkomputeran yang dipercayai ialah teknologi yang memastikan proses pengkomputeran dan keputusannya dilindungi pada platform pengkomputeran. Ini bermakna bahawa pada platform pengkomputeran yang dipercayai, proses pengiraan mahupun keputusan tidak boleh dikompromi oleh perisian hasad atau penyerang

Menggunakan JavaSDK untuk menyambung ke Qiniu Cloud: Bagaimana untuk melaksanakan perkhidmatan storan awan? Pengenalan: Dengan perkembangan pesat pengkomputeran awan, semakin banyak perusahaan dan pembangun menyimpan data pada awan untuk mencapai sandaran selamat dan ketersediaan data yang tinggi. Qiniu Cloud ialah salah satu penyedia perkhidmatan storan awan yang terkenal di China, menyediakan pelbagai perkhidmatan storan awan dan kit alat pembangunan yang berkuasa. Artikel ini akan memperkenalkan cara menggunakan JavaSDK untuk menyambung ke Qiniu Cloud untuk melaksanakan perkhidmatan storan awan. 1. Daftar akaun Qiniu Cloud: Sebelum bermula, anda perlu mendaftar akaun Qiniu Cloud dan buat
