UDN-企业互联网技术人气社区

板块导航

浏览  : 2158
回复  : 12

[原生js] ssi-uploader上传图片插件

[复制链接]
芭芭拉的头像 楼主
发表于 2017-2-8 14:57:38 | 显示全部楼层 |阅读模式
  点击选择文件按钮自动提交表单解决办法

  先介绍一下这款插件,然后再谈使用中可能遇到的问题

  ssi-uploader是一个JQuery的图片上传插件,界面比较美观

  github地址:https://github.com/ssbeefeater/ssi-uploader

  演示地址:http://ssbeefeater.github.io/#ssi-uploader/examples

  使用文档:http://ssbeefeater.github.io/#ssi-uploader/documentation

  这里就不说明怎么使用了,github上面提供有,官网文档上面也有

  本文主要说两个问题,也是我使用时碰到的,后续碰到问题在来补充

  1、中文显示问题(虽然官方说支持中文,但在js文件源码中并没有写这块儿的代码)

  2、当点击选择文件时,自动提交表单<form>的action地址

  问题1解决办法:

  使用文本编辑器(或任何一款代码编辑器)打开ssi-uploader.js文件,滑动至文档几行最后,会看到只有en英文,和希腊文,

  在locale添加如下代码,注意添加逗号。
  1. ,
  2. zh_CN: {
  3.             success: '成功',
  4.             sucUpload: '上传成功',
  5.             chooseFiles: '选择文件',
  6.             uploadFailed: '上传失败',
  7.             serverError: '服务器内部错误',
  8.             error: '错误',
  9.             abort: '终止',
  10.             aborted: '已经终止',
  11.             files: '文件',
  12.             upload: '上传',
  13.             clear: '清空',
  14.             drag: '将文件拖放到这里',
  15.             sizeError: '文件$1,超过限制大小$2',// $1=file name ,$2=max ie( example.jpg has has exceed the size limit of 2mb)
  16.             extError: '不支持$1类型的文件',//$1=file extension ie(exe files are not supported)
  17.             someErrorsOccurred: '发生了一些错误'
  18.         }
复制代码

  然后在使用时这样即可,注意第五行
  1. $('#ssi-upload').ssi_uploader({
  2.         url: '#',
  3.         preview: false,
  4.         maxNumberOfFiles: 1,
  5.         locale: "zh_CN",
  6.         allowed: ['jpg', 'gif', 'txt', 'png', 'pdf']
  7.     });
复制代码

  问题2解决办法:

  根本原因我没有找到,不过我找到一种方法可以解决

  首先在html文档中,给input添加属性data-validate="required:" ,即不可无值
  1. <input data-validate="required:" type="file" multiple id="ssi-upload" />
复制代码

  然后修改ssi-uploader.js文件的67行,将
  1. $input.on('change', function () { //choose files
  2.             thisS.toUploadFiles(this.files);
  3.             $input.val('');
  4.         });
复制代码

  改为
  1. $input.on('change', function () { //choose files
  2.             thisS.toUploadFiles(this.files);
  3.             $input.val('a');
  4.         });
复制代码

相关帖子

发表于 2017-2-8 14:58:07 来自手机 | 显示全部楼层
js太强大了,好多工作前端都可以做了…
使用道具 举报

回复

发表于 2017-2-8 14:58:08 | 显示全部楼层
无论是不是沙发都得回复下
使用道具 举报

回复

发表于 2017-7-25 17:20:44 | 显示全部楼层
额,哥,拿我文章,加个原文链接好吗
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部