HTML 七牛上传图片

最新推荐文章于 2024-07-05 17:47:06 发布

supingemail

最新推荐文章于 2024-07-05 17:47:06 发布

阅读量6.6k

点赞数 1

分类专栏： JS 文章标签： HTML 图片上传到七牛服务器

本文链接：https://blog.csdn.net/supingemail/article/details/48469013

版权

JS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

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

简介

七牛图片云存储，云操作做的还是很牛叉的，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="token" type="hidden" value="token"> //获取的token
<input name="file" id="file" type="file" οnchange="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>