七牛js上传

首页->学习资料->编程语言->php教程->大型网站技术关键词: 发布时间:2016-11-02 10:48:51 浏览次数:2052

<?php
!defined('IN_KC') && exit('Access Denied');
?>
<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <title></title>
    <link href="../../static/app3/css/main.css" type="text/css" rel="stylesheet">
    <script language="javascript" src="../../static/app3/js/common/api_config.js"/></script>
    <script language="javascript" src="http://jssdk.demo.qiniu.io/bower_components/jquery/jquery.min.js"/></script>
    <script language="javascript" src="http://jssdk.demo.qiniu.io/bower_components/plupload/js/moxie.js"></script>
    <script language="javascript" src="http://jssdk.demo.qiniu.io/bower_components/plupload/js/plupload.dev.js"></script>
    <script language="javascript" src="http://jssdk.demo.qiniu.io/src/qiniu.js"></script>
    </script>
    <script language="javascript">
   //取文件扩展名
   var getFileExtension = function(filename) {
                var tempArr = filename.split(".");
                var ext;
                if (tempArr.length === 1 || (tempArr[0] === "" && tempArr.length === 2)) {
                    ext = "";
                } else {
                    ext = tempArr.pop().toLowerCase(); //get the extension and make it lower-case
                }
                return ext;
            };
   $(function(){
   //点击上传
   $("#activity_add").click(function(){
       $("#pickfiles").trigger("click");
   });
   //关闭上传
   $("#up_close").click(function(){
       $("#up_pic").hide();
       $(".new-item").css("display","block");
       $("#pic_url").val('');
   });
   //输入框文字处理
   $("#url").click(function(){
       if($(this).val()=='请输入活动链接'){
           $(this).val('');
       }
   });
   //返回
   $("#reset").click(function(){
       $("#up_pic").hide();
       $("#pic_url").val('');//图片-database
       $(".new-item").css("display","block");
       $("#url").val('');
   });
   //提交
   $("#submit").click(function(){
       var pic_url=$("#pic_url").val();//图片地址
       var url=$("#url").val();
       if(url=='请输入活动链接'){
           url='';
       }
       /*if(!pic_url){
           $("#tishi").css("display","block");
           $(".alert-content").html('请上传图片');
           return false;
       }
       if(!url){
           $("#tishi").css("display","block");
           $(".alert-content").html('请填写链接地址');
           return false;
       }*/
       $.ajax({
           type:"post",
           data:{pic:pic_url,url:url},
           url:domainUrl + "api.php?cmd=app3admin.activity",
           dataType:"json",
           success: function(r){
               if(r.ret==200){
                   $("#tishi").css("display","block");
                   $(".alert-content").html('修改成功');
                   setInterval(
                   function(){
                       window.location.reload();
                   }
                   ,2000);
               }else{
                   $("#tishi").css("display","block");
                   $(".alert-content").html('失败，请重试');
               }
           }
       });
   });
   //关闭提示
   $("#tishi_close").click(function(){
       $("#tishi").css("display","none");
   });
   //以下必须写在$(function(){里面，否则点击上传会没有反应
       var uploader = Qiniu.uploader({
           runtimes: 'html5,flash,html4',      // 上传模式，依次退化
           browse_button: 'pickfiles',         // 上传选择的点选按钮，必需
           // 在初始化时，uptoken，uptoken_url，uptoken_func三个参数中必须有一个被设置
           // 切如果提供了多个，其优先级为uptoken > uptoken_url > uptoken_func
           // 其中uptoken是直接提供上传凭证，uptoken_url是提供了获取上传凭证的地址，如果需要定制获取uptoken的过程则可以设置uptoken_func
           uptoken : '这里填自己的token', // uptoken是上传凭证，由其他程序生成
           //uptoken_url: domainUrl+'api.php?cmd=app3admin.getQiniuToken',         // Ajax请求uptoken的Url，强烈建议设置（服务端提供）
           // uptoken_func: function(file){    // 在需要获取uptoken时，该方法会被调用
           //    // do something
           //    return uptoken;
           // },
           get_new_uptoken: false,             // 设置上传文件的时候是否每次都重新获取新的uptoken
           // downtoken_url: '/downtoken',
           // Ajax请求downToken的Url，私有空间时使用，JS-SDK将向该地址POST文件的key和domain，服务端返回的JSON必须包含url字段，url值为该文件的下载地址
           // unique_names: true,              // 默认false，key为文件名。若开启该选项，JS-SDK会为每个文件自动生成key（文件名）
           // save_key: true,                  // 默认false。若在服务端生成uptoken的上传策略中指定了sava_key，则开启，SDK在前端将不对key进行任何处理
           domain: 'http://ipadimage.ismond.com/',     // bucket域名，下载资源时用到，必需
           container: 'up_box',             // 上传区域DOM ID，默认是browser_button的父元素
           max_file_size: '100mb',             // 最大文件体积限制
           flash_swf_url: 'path/of/plupload/Moxie.swf', //引入flash，相对路径
           max_retries: 0,                     // 上传失败最大重试次数
           dragdrop: true,                     // 开启可拖曳上传
           drop_element: 'up_box',          // 拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传
           chunk_size: '4mb',                  // 分块上传时，每块的体积
           auto_start: true,                   // 选择文件后自动上传，若关闭需要自己绑定事件触发上传
           //x_vars : {
           //    查看自定义变量
           //    'time' : function(up,file) {
           //        var time = (new Date()).getTime();
                      // do something with 'time'
           //        return time;
           //    },
           //    'size' : function(up,file) {
           //        var size = file.size;
                      // do something with 'size'
           //        return size;
           //    }
           //},
           init: {
               'FilesAdded': function(up, files) {
                   plupload.each(files, function(file) {
                       // 文件添加进队列后，处理相关的事情
                   });
               },
               'BeforeUpload': function(up, file) {
                       // 每个文件上传前，处理相关的事情
                       //alert(file.name);文件的名称
               },
               'UploadProgress': function(up, file) {
                       // 每个文件上传时，处理相关的事情
                       $(".layer-box").show();//显示loading中
               },
               'FileUploaded': function(up, file, info) {
                       // 每个文件上传成功后，处理相关的事情
                       // 其中info是文件上传成功后，服务端返回的json，形式如：
                       // {
                       //    "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
                       //    "key": "gogopher.jpg"
                       // }
                       // 查看简单反馈
                       var domain = up.getOption('domain');
                       var res = jQuery.parseJSON(info);//前面的jQuery不能少，否则报错
                       var sourceLink = domain + res.key; //获取上传成功后的文件的Url
                       $(".layer-box").hide();//隐藏loading中
                       $("#up_pic").show();//显示图片
                       $("#up_close").show();//显示关闭按钮
                       var img="<img src='"+sourceLink+"' width=240 height=200 border='0' />";
                       $("#up_pic_content").html(img);
                       $(".new-item").hide();//隐藏上传
                       $("#pic_url").val(sourceLink);//保存备用，存到数据库中
               },
               'Error': function(up, err, errTip) {
                       //上传出错时，处理相关的事情
                       alert(errTip);//弹出错误提示
               },
               'UploadComplete': function() {
                       //队列文件处理完毕后，处理相关的事情
               },
               'Key': function(up, file) {//对文件名重命名，不然如果文件存在七牛会提示失败信息:file exist
                   // 若想在前端对每个文件的key进行个性化处理，可以配置该函数
                   // 该配置必须要在unique_names: false，save_key: false时才生效
                   var ext= getFileExtension(file.name);
                   var key = new Date().getTime() + '.' + ext;
                   // do something with key here
                   return key
               }
           }
       });
});

    </script>
    </head>
    <body>
<div class="page-box page-profession">
<div class="page-header layout-full">
      <div class="user-panel">
    <div class="layout"> <span class="account-info">当前用户：<?php echo $_G['adm_name'];?></span> <a href="<?php echo 'http://'.$_SERVER['HTTP_HOST'].'/admin/logout';?>" class="quit">退出</a> </div>
</div>
      <div class="sys-info layout">
    <div class="actions fr">
          
        </div>
    <a class="logo fl" href="<?php echo 'http://'.$_SERVER['HTTP_HOST'].'/admin/app3';?>"></a>
    <div class="sys-name"></div>
</div>
    </div>
<div class="page-main-box layout clearfix">
      <div class="page-main help-page">
    <div class="crumbs"><a class="back-btn fl" id="back-btn" href="javascript:history.go(-1);">返回</a>活动推送</div>
    <div class="content-view">
          
          <div class="help-content" style="height:600px;overflow: auto;">
          
          <div id="up_pic" style="border:1px dashed #eee;width:240px;height:200px;margin:0 auto;position:relative;<?php if(!$data['pic']){echo 'display:none;';}else{echo 'display:block';}?>">
             <div style="position:absolute;right:0;top:0;background:url('/static/app3/images/close.png') no-repeat scroll center center;width:16px;height:16px;cursor:pointer;" id="up_close"></div>
            <div id="up_pic_content"><?php if($data['pic']){echo "<img src=".$data['pic']." border=0 width=240 height=200 />";}?></div>
          </div>
        <div class="new-item" style="<?php if($data['pic']){echo 'display:none;';}else{echo 'display:block';}?>">
              <div class="box"> <i class="icon icon-plus"></i>
            <button type="button" class="change-img" id="activity_add">选择图片添加</button>
          </div>
            </div>
        <div style="text-align:center;margin-top:20px;" id="up_box">
              <input name="url" type="text" id="url" style="border:1px solid #ccc;color:#999;padding:3px;border-radius:3px;" value="<?php if($data['url']){echo $data['url'];}else{echo '请输入活动链接';}?>" size="33" maxlength="255">
              <input type="file" name="pickfiles" id="pickfiles" style="display:none;">
              <br>
              <div style="margin-top:20px;">
              <input type="hidden" value="<?php if($data['pic']){echo $data['pic'];}?>" id="pic_url" name="pic_url"/>
            <input id="reset" style="background:#ccc;color:#fff;border-radius:5px;padding:6px 30px;margin-right:20px;" name="重置" type="reset" value="重置"/>
            <input id="submit" style="background:#f98674;color:#fff;border-radius:5px;padding:6px 30px;" type="submit" name="button" id="button" value="提交">
          </div>
            </div>
      </div>
        </div>
</div>
    </div>

<div class="layer-box" style="display: none;">
      <div class="layer-masker"></div>
      <div class="loading-box"><i class="loading-icon"></i><span class="text">上传中...</span></div>
</div>

<div class="alert-layer" style="z-index: 999999999;display:none;" id="tishi">
    <div class="alert-box">
        <div class="alert-title">提示</div>
        <div class="alert-content"></div>
        <div class="alert-actions">
            <button type="button" class="alert-button btn-primary" id="tishi_close">确认</button>
        </div>
    </div>
</div>

</body>
</html>

赞:(0)

踩:(0)