Giter VIP home page Giter VIP logo

form-upload's Introduction

Qiniu Form Upload Demo

Qiniu Logo

这里整理了上传文件到七牛云存储的样例集。这些样例并不需要你基于任何七牛SDK来完成,方便你移植到各种技术框架体系中。

Web (html)

这个其实是最简单的。因为七牛的上传API就是一个multipart form形式的表单。你只需要提交如下这个表单:

<form method="post" action="http://up.qiniu.com/" enctype="multipart/form-data">
  <input name="key" type="hidden" value="<Your file name in qiniu>">
  <input name="x:<custom_field_name>" type="hidden" value="<Value of your custom param>">
  <input name="token" type="hidden" value="<Your uptoken from server>">
  <input name="file" type="file"/>
</form>

关键是 token 字段。这个通常是服务端生成的。比较正常点的做法是需要服务器端配合的,在客户端需要上传或修改文件的时候服务端生成token并提供给客户端。

但如果你的需求非常简单,也可以有不需要服务端的做法:随便找一个语言的 sdk 生成一个 token(token的过期时间可以设置很长,比如50年,这样就得到了一个永不过期的token —— 除非你在 https://portal.qiniu.com/ 里面把生成这个token的accessKey/secretKey作废)。然后把这个 token 写死在以上的表单里就行。当然这样的方案仅仅适用于少数 Web 场景,对于移动端我们不推荐这么做,因为禁止accessKey/secretKey会影响所有客户。

服务端配合的常见样例(会不断补充各种语言的DEMO):

Flash (action script)

能够理解上面 Web 方式的上传过程,用 Flash 只是通过 http 协议把表单发送出去而已。直接贴代码:

var u :URLRequest = new URLRequest('http://up.qiniu.com');
u.method = URLRequestMethod.POST;
u.requestHeaders = [new URLRequestHeader('enctype', 'multipart/form-data')];

var ur :URLVariables = new URLVariables();
ur.key = '<Your file name in qiniu>';
ur.token = '<Your uptoken from server>';
ur['x:<custom_field_name>'] = '<Value of your custom param>';

u.data = ur;
 
f.upload(u, 'file');
// f is File or FileReference is both OK, but UploadDataFieldName must be 'file'

f.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA, uploadedHandler);
 
protected function uploadedHandler(event:DataEvent):void
{
  trace(event.data);
  //{
  //  "hash":"<File etag>",
  //  "key":"<Your file name in qiniu>",
  //  "x:<custom_field_name>":"<Value of your custom param>"
  //}
}

这个样例由 @mani95lisa 提供。原文参见:https://gist.github.com/mani95lisa/7912530

form-upload's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

form-upload's Issues

please add jsonp callback parameter

<iframe id='callback-iframe'  src='/callback.html' frameborder='0' width='0' height='0'></iframe>
<form method="post" action="http://up.qiniu.com/" enctype="multipart/form-data" target='callback-iframe'>
  <input name="key" type="hidden" value="<Your file name in qiniu>">
  <input name="x:<custom_field_name>" type="hidden" value="<Value of your custom param>">
  <input name="token" type="hidden" value="<Your uptoken from server>">
  <input name="file" type="file"/>
 <input name="jsonp" type="hidden" value="<custom javascript function name>">
</form>

低级浏览器不支持ajax上传文件时,要用iframe来做无刷新处理,此时如果七牛api支持JSONP格式应答,可以把key和hash及其他应答传递给用户自定义的jsonp callback函数。

预期应答如下:

Content-Type : application/javascript

body:  
xyzJavascriptCallbackFunction({ /*xyzJavascriptCallbackFunction is the jsonp parameter's value*/
   'key' : 'adhsaljfhdlskf',
   'hash' : 'shflsdfhldshflsd'
   //,.....
});

请问上传的时候有办法指定文件存储的后缀吗

之前看到有朋友讨论说可能会加这样的魔法变量,请问现在有了吗,看文档里还没有呢
因为文件上传后,文件名肯定是唯一的,我这不前端不希望再去弄套规则生成唯一文件名了,如果能直接传一个文件后缀就好了,或者说不传key默认就是上传文件的后缀名就好了 : )

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.