xblock实现文件上传功能

各位大神,第一次尝试在讨论区发表,还希望得到各位的帮助。
以下是我想实现的功能,
在xblock中有上传按钮,可将文件暂时上传到本地或内存中,然后在后台实现将文件上传至远端的fastdfs平台,fastdfds将返回一串json串,其中包含文件所在地址,然后将文件地址返回到控件中,图片类似于下面这样子的:

选择文件,点击upload之后 经后后台解析将文件地址返回到src控件中。
实现的步骤为:
1.在html中,添加以下form

**问题1**:action中怎么填才能将关联到后台python代码?需要在url.py文件中添加什么处理吗?

2.在js中添加
$(element).find(‘input[name=uploadvideo]’).bind(‘click’, function() {
});
debug过,这里好像走不到,不知道为什么?

3.在py文件中添加上传代码。

其实不太理解xblock的url机制是怎样的

这个具体的功能我还没有开发过。
建议读一读
http://edx.readthedocs.org/projects/edx-developer-guide/en/latest/
http://edx.readthedocs.org/projects/xblock-tutorial/en/latest//

你还可以找找github上面的xblocklist来看看有没有类似的

嗯嗯 感谢! 目前在看js中能否直接实现,主要对fastdfs了解也比较少:slightly_smiling:

我想你这个问题应该是需要拆解成四个问题:

  1. 如何在xblock中添加上传功能的响应方法,是否需要修改url.py添加路径映射还是?

这个问题比较简单,xblock手册就有说明: @XBlock.json_handler添加相应函数就可以,在JS中请求此url的方法更简单:

    var handlerUrl = runtime.handlerUrl(element, 'student_submit');

这样就可以取到之前 @XBlock.json_handler 定义的方法了。

  1. js中写的选择器,添加click事件无法执行,如何修改?

这个问题有三个要点:

  • xblock在加载javascript资源时需要指定入口方法(此方法有点儿像$(document).ready()方法。
  • 选择器这类事件绑定方法需要写到入口方法中注册,否则不生效。
  • xblock在页面中也是同时存在好多个,所以建议入口函数或者选择器的写法要有变通, 像这样:
function SubjectiveEditBlock_${xblock_id}(runtime, element){
   // 绑定提交按钮事件
   $("#${xblock_id} button[name=submit]").bind('click', function(){
  1. 如上实现上传功能?

实现上传功能其实这里就是异步上传的事儿,这里实现思路有两个:

  1. 将要上传的文件转base64字符方式上传, @XBlock.json_handler 定义的方法中将其另存为文件,这种方法我之前实现时遇到一个问题: 就是base64编码的js实现跟python实现不一致,导致加解密失败的问题,具体参考我的博文: python和javascript共用的base64加解密代码
  2. html5已经支持自定义XMLHttpRequest对象的方式来实现异步上传了,网上资料很多,请自行百度。
  1. 如何将文件上传到fastdfs中

我用fastdfs的机会也不多,目前大都使用第三方的云存储服务了,自己搭建分布式存储服务的机会毕竟很少。
我之前实现fastdfs上传都是分两步:
1.先将文件上传到服务器的临时文件夹或者指定目录。
2.调用fastdfs的api将其上传到fastdfs服务中,将fastdfs返回的组,路径之类的信息存到数据库中保存起来。
这方面的资料也很多,请自行百度。

另外,我建议,一般的课程相关的资料上传,我建议直接上传到mongodb中(当然几百M或者上G的资料另讲),mongodb自身就支持分布式,简单,省事儿。而且如此上传上来之后,只要将key的命名规则跟课程相符,这些上传的资料还可以在CMS中管理。

最后,祝你成功~

谢谢楼上大神正准备开始做!

Powered by eduStack & ifLab