ssi-uploader上传图片插件,点击选择文件按钮自动提交表单解决办法
2017-01-16 12:45
561 查看
先介绍一下这款插件,然后再谈使用中可能遇到的问题
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添加如下代码,注意添加逗号。
然后在使用时这样即可,注意第五行
问题2解决办法:
根本原因我没有找到,不过我找到一种方法可以解决
首先在html文档中,给input添加属性data-validate="required:" ,即不可无值
然后修改ssi-uploader.js文件的67行,将
改为
网上这个问题信息比较少,所以希望对大家有帮助,后续遇到问题还会补充
转载请注明地址谢谢:http://www.cnblogs.com/wu-yun-jiang/p/6289206.html
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添加如下代码,注意添加逗号。
, zh_CN: { success: '成功', sucUpload: '上传成功', chooseFiles: '选择文件', uploadFailed: '上传失败', serverError: '服务器内部错误', error: '错误', abort: '终止', aborted: '已经终止', files: '文件', upload: '上传', clear: '清空', drag: '将文件拖放到这里', sizeError: '文件$1,超过限制大小$2',// $1=file name ,$2=max ie( example.jpg has has exceed the size limit of 2mb) extError: '不支持$1类型的文件',//$1=file extension ie(exe files are not supported) someErrorsOccurred: '发生了一些错误' }
然后在使用时这样即可,注意第五行
$('#ssi-upload').ssi_uploader({ url: '#', preview: false, maxNumberOfFiles: 1, locale: "zh_CN", allowed: ['jpg', 'gif', 'txt', 'png', 'pdf'] });
问题2解决办法:
根本原因我没有找到,不过我找到一种方法可以解决
首先在html文档中,给input添加属性data-validate="required:" ,即不可无值
<input data-validate="required:" type="file" multiple id="ssi-upload" />
然后修改ssi-uploader.js文件的67行,将
$input.on('change', function () { //choose files thisS.toUploadFiles(this.files); $input.val(''); });
改为
$input.on('change', function () { //choose files thisS.toUploadFiles(this.files); $input.val('a'); });
网上这个问题信息比较少,所以希望对大家有帮助,后续遇到问题还会补充
转载请注明地址谢谢:http://www.cnblogs.com/wu-yun-jiang/p/6289206.html
相关文章推荐
- 在IE中必须点击input file 控件的浏览按钮才能提交上传,否则没有权限 。js文件报拒绝访问,解决办法是将input file控件定位到你要点击的地方 ,并且input file做成透明的
- layUI中点击按钮选择图片(不自动上传),然后点击上传按钮,上传图片(可以上传多个文件)
- 百度webuploader 插件,选择图片按钮点击无效解决
- swfupload chrome 22.0.XXXXX dev版上传图片按钮点击无返应解决办法
- 4000 Js 点击按钮 选择文件后 自动上传文件
- asp.net 点击一个按钮弹出对话框选择文件然后选择文件完成之后就自动上传文件 input(file)
- 简单解决 multipart/form-data 文件上传表单中 传递参数无法获取的办法! (解决办法:动态更改表单提交URL)
- uploadify上传文件时,如果没有指定按钮图片,出现空请求解决办法
- 页面点击button自动提交form表单的解决办法
- form表单底下的button按钮点击自动提交恶心问题的解决
- 简单解决 multipart/form-data 文件上传表单中 传递参数无法获取的办法! (解决办法:动态更改表单提交URL)
- swfupload在chrome中点击上传图片按钮无反应的解决办法
- 使用SpringMVC配合jQuery文件上传插件ssi-uploader实现多图片可预览上传
- swfupload chrome 22.0.XXXXX dev版上传图片按钮点击无返应解决办法
- webuploader 图片上传插件 配合着表单提交 ajax方式
- 编辑器中点击上传图片选择框反应速度很慢的解决办法。
- WebUploader 上传插件选择上传文件按钮无效问题
- 解决WebUploader 选择文件按钮点击无效问题
- 4000 Js 点击按钮 选择文件后 自动上传文件
- android webview图片文件上传兼容性问题——上传控件点击无效的解决办法