plupload上传插件多图片上传操作

最近项目接触到plupload.full.min.js这个插件的使用,网上关于它具体使用很多。

        api可参照Plupload上传插件中文帮助文档.

        带预览功能的上传操作可参照文件上传插件Plupload使用(带图片预览功能)

        这两篇文章几乎可以解决开发人员上手时90%的困惑,然而我们项目需求是这样的,如下图。plupload上传插件多图片上传操作_第1张图片

涉及到多图片上传,且这些图片必填。刚开始思路是这样的,在browse_button中传一个上传按钮对应的id就可以了。

  然而我需要知道你操作的是哪个上传按钮而找api并未发现相关属性(若有大神知道,还请不吝赐教),而且因为这些图都是使用的一个uploader对象,当你修改其中一个的图片时,我们并不好找到它并进行操作。

  最终,找到一种解决方案,思路如下。

  在页面放置一个隐藏按钮 ,然后如图四个上传按钮上绑定一个click事件触发按钮all_upload_btns

  plupload上传插件多图片上传操作_第2张图片

 

  upload实例化时,代码未整理,着重看实现思路。

    plupload上传插件多图片上传操作_第3张图片

 

  图片预览的方法我参考的是文中分享的第二个链接,可以看看。

plupload上传插件多图片上传操作_第4张图片

  

  就这样,曾经的难题解决。

你可能感兴趣的:(前端开发)