Article Detail

简洁七牛图床图片上传外链源码

上传文件 uploadToken($bucket); $policy = array( 'returnUrl' => 'http://test.net/file...

PHP 阅读 88.6万 3 分钟阅读 2016-06-07 17:10

上传文件

<?php
require_once  'vendor/autoload.php';
header('Access-Control-Allow-Origin:*');
use Qiniu\Auth;
$bucket = '';
$accessKey = '';
$secretKey = '';
$auth = new Auth($accessKey, $secretKey);
//$upToken = $auth->uploadToken($bucket);
$policy = array(
    'returnUrl' => 'http://test.net/fileinfo.php',
    'returnBody' => '{"fname": $(key)}',
);
$upToken = $auth->uploadToken($bucket, null, 3600, $policy);
?><meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/ecmascript" src="md5.js"></script>
<script type="text/javascript">
	function check(){
		var s=$('#f').val();
		//alert(s);
		if(!s) return false;
		var hash = hex_md5(s);
		$('#key').val(hash);
	}
  
   
</script>  



<form onsubmit="return check();" method="post" action="http://up.qiniu.com" enctype="multipart/form-data">
<input name="key" id="key" type="hidden" value="">
  <input name="token" type="hidden" value="<?php echo $upToken;?>">
  <input name="file" id="f" type="file" />
  <input type="submit" value="Submit" />
</form>

预览图片外链文件

<meta http-equiv="content-type" content="text/html; charset=UTF-8" /><script>
function selectInputContent(n){  obj =document.getElementById(n);  obj.focus();  obj.select();}
</script>
<br />
                <?php 
                    $ret = base64_decode($_GET['upload_ret']);
                    $cbody = json_decode($ret, true);
                    $dn = 'http://out.img.pan.lizhenqiu.com/';  
                    error_log(print_r($cbody, true));
                    $url = $dn . $cbody['fname'];
                    error_log($url);
                    $stat_ = file_get_contents($url . '?stat');
                    $stat = json_decode($stat_, true);
                    $mtype = $stat['mimeType']; 
                    $isImage = substr($mtype, 0, 6) == 'image/'
                ?>
                <p><input value="<?php echo $url;?>" id="select_keywords" onmouseover="selectInputContent(this.id)" /></p> 
                <?php 
					if($isImage){?>
                    <img src=<?php echo $url;?>  height="600px" alt=""></img>
					<?php }?>
                <p><a href="/out.php">返回</a></p>

项目 https://github.com/rwifeng/qiniudocs/tree/master/demo/simpleuploader
http://developer.qiniu.com/code/v7/sdk/php.html#upload-flow

Comments 评论区

广西南宁市 2016-11-03 17:51

在七牛回调的中，是否有返回文件大小属性。属性是什么
上传策略的callbackBody字段设置fsize这个魔法变量即可：
http://developer.qiniu.com/docs/v6/api/overview/up/response/vars.html#magicvar

php的话就是生成token的地方

 $bucket = Config::BUCKET_NAME;
 $accessKey = Config::ACCESS_KEY;
 $secretKey = Config::SECRET_KEY;
 $auth = new Auth($accessKey, $secretKey);

 $policy = array(
 'callbackUrl' => 'http://172.30.251.210/callback.php',
 'callbackBody' => '{"fname":"$(fname)","fsize":"$(fsize)","fkey":"$(key)","desc":"$(x:desc)","uid":' . $uid . '}'
);

 $upToken = $auth->uploadToken($bucket, null, 3600, $policy);

header('Access-Control-Allow-Origin:*');
 echo $upToken;

#⁰

北京市 2016-11-04 00:36

公盘网盘上传代码

<?php
require_once  'vendor/autoload.php';
header('Access-Control-Allow-Origin:*');
use Qiniu\Auth;
$bucket = 'wailian';
$accessKey = '';
$secretKey = '';
$auth = new Auth($accessKey, $secretKey);
//$upToken = $auth->uploadToken($bucket);
$policy = array(
    'returnUrl' => 'http://pan.lizhenqiu.com/fileinfo.php',
    'returnBody' => '{"fname": $(key)}',
);
$upToken = $auth->uploadToken($bucket, null, 3600, $policy);
?><!DOCTYPE html>
<html>
<head>
<title>公盘 -lizhenqiu.com</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/ecmascript" src="md5.js"></script>

<style>@supports (display:none) {
      dot {
        display: inline-block; 
        width: 3ch;
        text-indent: -1ch;
        vertical-align: bottom; 
        overflow: hidden;
        animation: dot 3s infinite step-start both;
        /* 等宽字体很重要 */
        font-family: Consolas, Monaco, monospace;
    }
}

@keyframes dot {
    33% { text-indent: 0; }
    66% { text-indent: -2ch; }
}</style></head>

<body>
<p>请填写标题、简介、选择要上传的RAR文件包</p>
<div id="ddimgupoloing" style="display:none;color: red;">正在上传文件<dot>...</dot></div>


<form id="myform" autocomplete="off" name="myform" onsubmit="return check();" method="post" action="http://up.qiniu.com" enctype="multipart/form-data">
<input name="key" id="key" type="hidden" value="">
  <input name="token" type="hidden" value="<?php echo $upToken;?>">
  <p><input name="title" type="text" autocomplete="off" id="intitle" placeholder="请填写标题" /></p>
  <p><input name="jianjie" type="text" autocomplete="off" id="injianjie" placeholder="请填写简介" /></p>
  <p><input name="file" autocomplete="off" id="f" type="file" style="
    background: #eee;
    border: 1px solid #eee;
    border-right: 1px solid #000;
" /></p>
  <input type="submit" value="Submit" style="display:none;" />
</form><script type="text/javascript">

function asq(title,jianjie,durl,types){
	$.ajax( {
		url: '/up.php?title='+title+'&jianjie='+jianjie+'&durl='+durl+'&types='+types, //这里是静态页的地址
		type: "GET", //静态页用get方法，否则服务器会抛出405错误
		//dataType: "json",
		//cache: false,
		//async: false,
		beforeSend: function(){
		 // Handle the beforeSend event
		},
		success: function(data){
			//var result = $(data).find("另一个html页面的指定的一部分").html();
			return true;
		}
	});
	return false;
}


	function check(){
		var s=$('#f').val();
		var injianjie=$('#injianjie').val();
		var intitle=$('#intitle').val();
		if(!intitle){
			//alert('请填写标题');
			//location.href = '/out.php';
			var strFileName=s.replace(/^.+?\\([^\\]+?)(\.[^\.\\]*?)?$/gi,"$1");
			$('#intitle').val(strFileName);
			timedMsg();
			return false;
		}
		if(!injianjie){
			//alert('请填写简介');
			var strFileName=s.replace(/^.+?\\([^\\]+?)(\.[^\.\\]*?)?$/gi,"$1");
			$('#injianjie').val(strFileName);
			timedMsg();
			//location.href = '/out.php';
			return false;
		}
		
		var types=selectFile(document.getElementById("f"));
		
		//alert(s);
		var h=$('#key').val();
		if(!s || h) return false;
		var timestamp = Date.parse(new Date());
		var hash = hex_md5(s)+timestamp;
		
		$('#key').val(hash);
		asq(intitle,injianjie,hash,types);
	}
function selectFile(input) {
 
    var fileName = input.value;
    if(fileName.length > 1 && fileName ) {       
        var ldot = fileName.lastIndexOf(".");
        var type = fileName.substring(ldot + 1);
        return type;
        if(type != "rar") {
            alert('请上传rar压缩包文件');
			location.href = '/out.php';
            //清除当前所选文件
            input.outerHTML=input.outerHTML.replace(/(value=\").+\"/i,"$1\"");
			return false;
        }
    }
	return false;
	//return true;
}
function timedMsg()
　　{
	var s=$('#f').val();
	if(s){
		check();
		var h=$('#key').val();
		if(h){
			$('#myform').css('display','none');
			$('#ddimgupoloing').css('display','');
			document.getElementById("myform").submit();
		}
		return false;
	}
　　setTimeout("timedMsg()",1000);
　　}
setTimeout("timedMsg()",3000);
</script>  

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- blog -->
<ins class="adsbygoogle"
     style="display:inline-block;width:320px;height:100px"
     data-ad-client="ca-pub-7446801070784593"
     data-ad-slot="7895142255"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>


</body>

</html>

#⁰

北京市 2016-11-04 00:37

七牛自定义资源下载名

http://qiniuphotos.qiniudn.com/gogopher.jpg?download/test.jpg

#⁰

北京市 2016-11-04 00:39

JavaScript 获取当前时间戳：
第一种方法：

var timestamp = Date.parse(new Date());
结果：1280977330000

第二种方法：

var timestamp = (new Date()).valueOf();
结果：1280977330748

第三种方法：

var timestamp=new Date().getTime()；
结果：1280977330748

第一种：获取的时间戳是把毫秒改成000显示，
第二种和第三种是获取了当前毫秒的时间戳。

#⁰

北京市 2016-11-04 00:40

Js/Jquery获取input file的文件名

html代码:
    <input type="file" name="file" id="file" class="input_text80"></input>
js:
方法一：字符串截取
var file = $("#file").val();
var fileName = getFileName(file);
 
function getFileName(o){
    var pos=o.lastIndexOf("\\");
    return o.substring(pos+1);  
}
 
方法二：正则表达式
var file = $("#file").val();
var strFileName=file.replace(/^.+?\\([^\\]+?)(\.[^\.\\]*?)?$/gi,"$1");  //正则表达式获取文件名，不带后缀
var FileExt=file.replace(/.+\./,"");   //正则表达式获取后缀

#⁰

Comment Form 留下评论

正在回复 #0

粘贴图片、拖拽文件，或点上面的按钮上传 图片会自动插入 [img] 标签，其他附件会自动插入 [attach] 标签。

正在上传...

提交前会先拉起旧项目同款第三方人机验证。

不再要求填写昵称；reply 会生成一条带楼层回链的新评论，quote 会附带完整引用块，并保持评论锚点跳转。