HTML 七牛上传图片

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/supingemail/article/details/48469013

好记忆不如按烂笔头 ... ...

简介

七牛图片云存储,云操作做的还是很牛叉的,http://www.qiniu.com/ 没有为人打广告的意思. 给你一个上传图片的token ,就能往上面放置你的图片了.

准备工作

首先需要得在 http://www.qiniu.com/ 注册一个账号,得有个token ,否则是不能上传图片的,

实现

其次就是上传图片的代码,看主要代码


手动上传

<!doctype html>
<html>
<head>
   <meta charset="utf-8">
   <title>七牛图片上传 Demo </title>
</head>
<body>
      <!-- 详细代码 -->
    <div id="container">
        <input type="file" id="fileToUpload">
    </div>
    <div id="message"></div>
    <div id="msg"></div>

     https://github.com/qiniu/js-sdk 可以找到以下需要的文件
    <script type="text/jscript" src="js/jquery-1.9.1.min.js"></script>
    <script type="text/jscript" src="js/qiniu.js"></script>
    <script type="text/jscript" src="js/moxie.js"></script>
    <script type="text/jscript" src="js/plupload.dev.js"></script>

 
  <script type="text/javascript">
    var uid = decodeURI(request("uid"));
    var token = '';
    if (uid==null || uid=='') {
      uid = 7;
    }
    //预加载.获取已经注册的服务器上的token(如果是已经注册好的用户,token是一个给定的值,直接在    var uploader = Qiniu.uploader({}) 中把

   uptoken:写死就好)
   $(document).ready(function(){
        //获得token.我的需要上传图片的服务器上去获取.
        $.ajax({
            url:"http://demo.com/api/v1/third/upload/token",
            type: "POST",
            dataType:"json",
            data:{"uid":uid},
            async: false,
            headers: {
              "Authorization":"Token a9baf4e0fc59d29a203fd7cb8ced23a3cbb5d78a",
              "Content-Type":"application/x-www-form-urlencoded"
            },
            success:function(object){
              console.log(object);
              data = JSON.stringify(object);
              json = jQuery.parseJSON(data);
              if (json.success==true) {
                token = json.data.token;
                console.log(token);
              }else{
                alert(json.msg);
              }           
            },
            error: function() {
              alert(" bad request!");              
            }
        });

    var inputFile = $('#fileToUpload');
    var msg = $('#msg');
    var uploader = Qiniu.uploader({
        runtimes: 'html5,flash,html4',    //上传模式,依次退化
        browse_button: 'fileToUpload',       //上传选择的点选按钮,**必需**
        //若未指定uptoken_url,则必须指定 uptoken ,uptoken由其他程序生成
        //uptoken : 'xxxxxxxxxxxxxx',
        uptoken:token,

        save_key: true,        // 默认 false。若在服务端生成uptoken的上传策略中指定了 `sava_key`,则开启,SDK在前端将不对key进行任何处理
        domain: 'http://upload.qiniu.com/',
        container: 'container',//上传区域DOM ID,默认是browser_button的父元素,
        max_file_size: '1000mb',           //最大文件体积限制
        flash_swf_url: 'js/Moxie.swf',  //引入flash,相对路径
        max_retries: 0,                   //上传失败最大重试次数
        dragdrop: true,                   //开启可拖曳上传
        drop_element: 'container',        //拖曳上传区域元素的ID,拖曳文件或文件夹后可触发上传
        chunk_size: '4mb',                //分块上传时,每片的体积
        auto_start: true,                 //选择文件后自动上传,若关闭需要自己绑定事件触发上传
        init: {
              'FilesAdded': function(up, files) {
                  plupload.each(files, function(file) {
                      // 文件添加进队列后,处理相关的事情
                      msg.append(' FilesAdded 事件(文件添加进队列后,处理相关的事情)<br />');
                  });
              },
              'BeforeUpload': function(up, file) {
                     // 每个文件上传前,处理相关的事情
                     msg.append(' BeforeUpload 事件(每个文件上传前,处理相关的事情)<br />');
              },
              'UploadProgress': function(up, file) {
                     // 每个文件上传时,处理相关的事情
                     var percent = Math.round(file.loaded / file.size * 100);
                     msg.append(' UploadProgress 事件(每个文件上传时,处理相关的事情),已上传:' +  percent + '%<br />');
              },
              'FileUploaded': function(up, file, info) {
                     // 每个文件上传成功后,处理相关的事情
                     // 其中 info 是文件上传成功后,服务端返回的json,形式如
                     // {
                     //    "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
                     //    "key": "gogopher.jpg"
                     //  }
                     // 参考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.html
                     // var domain = up.getOption('domain');
                     // var res = parseJSON(info);
                     // var sourceLink = domain + res.key; 获取上传成功后的文件的Url
                     json = jQuery.parseJSON(info);
                     console.log(json.key);
                     console.log(json.hash);
                     alert("key = "+json.key+", hash="+json.hash);
                     $("#message").html("key = "+json.key+", hash="+json.hash);
                     msg.append(' FileUploaded 事件(每个文件上传成功后,处理相关的事)' + JSON.stringify(info) + '<br />');
              },
              'Error': function(up, err, errTip) {
                     //上传出错时,处理相关的事情<br>
                     msg.append(' Error 事件(上传出错时,处理相关的事情)<br />');
              },
              'UploadComplete': function() {
                     //队列文件处理完毕后,处理相关的事情
                     msg.append(' UploadComplete 事件(队列文件处理完毕后,处理相关的事情)<br />');
              },
              'Key': function(up, file) {
                  // 若想在前端对每个文件的key进行个性化处理,可以配置该函数
                  // 该配置必须要在 unique_names: false , save_key: false 时才生效
                  var key = "";
                  // do something with key here
                  return key
              }
          }
      });

    });
    
    </script>
     
</body>
</html>


表单提交的上传

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form method="post" action="http://upload.qiniu.com/" enctype="multipart/form-data">
  <!-- <input name="x:<custom_name>" type="hidden" value="<custom_value>"> -->
  <input name="token" type="hidden" value="token">  //获取的token
  <input name="file" id="file" type="file" onchange="changeImage(this)"/>
  <input type="submit" value="submit"/>
</form>
<script type="text/javascript">
    function changeImage(image){
        alert(image.files);
        console.log(image.files);
    }
</script>
</body>
</html>

地址:http://developer.qiniu.com/docs/v6/api/overview/up/form-upload.html 有介绍,不多说


图片上传到你的空间之后,会返回你要的key和hash , 这个是用来显示图片所用。要保存到数据库中,方便查看。

以上的图片到七牛服务器介绍完毕。


资源  http://download.csdn.net/detail/supingemail/9109001

中有本文的样例和java实现的样例,可供借鉴。





阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页