表单上传适用于文件内容可以在一次 HTTP 请求即可传递完成的场景。该功能非常适合在浏览器中使用 HTML 表单上传资源，或者在不需要处理复杂情况的客户端开发中使用。如果文件较大（大于 1GB），或者网络环境较差，可能会导致 HTTP 连接超时而上传失败。若发生这种情况，您需要考虑换用更安全的分片上传功能。

开发者只要组装一个符合 HTML 文件上传表单规范（参考RFC1867）的 HTTP 请求，并以 POST 方式向域名 upload.qiniu.com 发起这个请求，即可将指定文件上传到服务端。详细使用方法请参考表单上传 API。

使用方法

我们可以用如下的 HTML 表单来描述表单上传的基本用法：

<form method="post" action="http://upload.qiniup.com/"
 enctype="multipart/form-data">
  <input name="key" type="hidden" value="<resource_key>">
  <input name="x:<custom_name>" type="hidden" value="<custom_value>">
  <input name="token" type="hidden" value="<upload_token>">
  <input name="crc32" type="hidden" />
  <input name="accept" type="hidden" />
  <input name="file" type="file" />
  <input type="submit" value="上传文件" />
</form>

关键参数说明：

名称	类型	必填	说明
action	string	是	上传地址，可参考存储区域
resource_key	string	否	资源名，必须是 UTF-8 编码。注意：如果上传凭证中 scope 指定为 <bucket>:<key>，则该字段也必须指定。
custom_name	string	否	自定义变量的名字，不限个数。
custom_value	string	否	自定义变量的值。
upload_token	string	是	必须是一个符合相应规格的上传凭证，否则会返回 401 表示权限认证失败。
crc32	string	否	上传内容的 crc32 校验码。如填入，则七牛服务器会使用此值进行内容检验。
accept	string	否	当 HTTP 请求指定 accept 头部时，七牛会返回 content-type 头部的值。该值用于兼容低版本 IE 浏览器行为。低版本 IE 浏览器在表单上传时，返回 application/json 表示下载，返回 text/plain 才会显示返回内容。
file	file	是	文件本身。

提交示例如下：

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>表单小图片上传</title>
   <script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>

   <script>
           var imgurl = "";
            function getPhoto(node) {
                var imgURL = "";
                try{
                    var file = null;
                    if(node.files && node.files[0] ){
                        file = node.files[0];
                    }else if(node.files && node.files.item(0)) {
                        file = node.files.item(0);
                    }
                    //Firefox 因安全性问题已无法直接通过input[file].value 获取完整的文件路径
                    try{
                        imgURL =  file.getAsDataURL();
                    }catch(e){
                        imgRUL = window.URL.createObjectURL(file);
                    }
                }catch(e){
                    if (node.files && node.files[0]) {
                        var reader = new FileReader();
                        reader.onload = function (e) {
                            imgURL = e.target.result;
                        };
                        reader.readAsDataURL(node.files[0]);
                    }
                }
                creatImg(imgRUL,file.name);
                return imgURL;
            }

            function creatImg(imgRUL,fileName){
                console.log(fileName);
                $("input[name=key]").val(fileName);
                var textHtml = "<img src='"+imgRUL+"'width='40px' height='40px'/>";
                $("span").html(textHtml);
            }

            function upload(){
                document.getElementById('form1').submit();
            }

    </script>
</head>
<body>

    <form id="form1" method="post" action="http://upload-z1.qiniup.com/"
      enctype="multipart/form-data">
      <input name="key"  value="" type="hidden"/>
      <input name="token"  value="bSF1IPT5YKp729o4ietO-M-ONzNcW90snELGm3sv:iPtb7rdYOHLb7Gjsz_ifjeu_t_4=:eyJzY29wZSI6Im91dHNvdXJjZSIsImRlYWRsaW5lIjoxNTM4MDM4NzU0fQ==" type="hidden"/>
      <input id="input-file" name="file" class="upload" type="file" value="" onchange="getPhoto(this)">
      <input type="button" value="上传" onclick="upload()">
    </form>
    <br/>
    <span> </span>

</body>

</html>

参考信息：https://developer.qiniu.com/kodo/manual/1272/form-upload

七牛云实现表单上传

使用方法

猜你喜欢