上传模块自 layui 2.0 的版本开始,进行了全面重写,这使得它不再那么单一,它所包含的不仅是更为强劲的功能,还有灵活的 UI。任何元素都可以作为上传组件来调用,譬如按钮、图片、普通的 DIV 等等,而不再是一个单调的 file 文件域。

  设定一个 URL 地址给url参数,用来告诉 upload 模块的服务端上传接口。像你平时使用Ajax一样。如:

  注意1:你不一定非得按照上述格式返回,只要是合法的 JSON 字符即可。其响应信息会转化成JS对象传递给done回调。

  在文件被选择后触发,该回调会在 before 回调之前。一般用于非自动上传(即auto: false)的场景,比如预览图片等。

  事实上这是一个非常实用的存在,可轻松应对复杂的列表文件上传管理。具体可移步到 示例 页面,里面有一个文件列表的小例子。

  在choose回调之后、done/error回调之前触发。返回的参数完全类似 choose 回调。一般用于上传完毕前的loading、图片预览等。

  在上传接口请求完毕后触发,但文件不一定是上传成功的,只是接口的响应状态正常(200)。回调返回三个参数,分别为:服务端响应信息、当前文件的索引、重新上传的方法

  当请求上传时出现异常时触发(如网络异常、404/500等)。回调返回两个参数,分别为:当前文件的索引、重新上传的方法

  只有当开启多文件时(即 multiple: true),该回调才会被触发。回调返回一个 object 类型的参数,包含一些状态数据:

  在网速一般的情况下,大文件的上传通常需要一定时间的等待,而浏览器并不会醒目地告知你它正在努力地上传中,此时为了提升用户体验,我们可以通过该回调制作一个进度条。注:该回调为 layui 2.5.5 新增

  有时你可能需要对upload.render()实例进行重载,通过改变一些参数(如将上传文件重置为只上传图片等场景)来重置功能。如:

  在执行upload.render(options)方法时,其实有返回一个实例对象,以便对完成重新上传等操作。注意:这是对当前上传队列的全局重新上传,而choose回调返回的obj.upload(index, file)方法则是对单个文件进行重新上传。如:

  有些时候,可能会涉及到文件跨域操作,过去版本的 upload 模块最大的缺陷恰恰在于这里。而从 layui 2.0 的版本开始,我们已经对 跨域做了支持。但鉴于代码的冗余度等多方面考虑,在IE9以下版本环境中,仍然不支持跨域。其它所有版本的IE和Chrome/FireFox等高级浏览器均支持。

  那么,需要你怎么做?通常来说,是借助CORS(跨资源共享)方案,即对接口所在的服务器设置:Access-Control-Allow-Origin详见Google,配置起来还是挺简单的。而至于域名限制,一般是服务端程序中去做处理。这里不做过多赘述。