ssi-uploader上传图片插件,点击选择文件按钮自动提交表单解决办法
先介绍一下这款插件,然后再谈使用中可能遇到的问题
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
ssi-uploader上传图片插件,点击选择文件按钮自动提交表单解决办法的更多相关文章
- Django---静态文件配置,post提交表单的csrf问题(日后细说),创建app子项目和分析其目录,ORM对象关系映射简介,Django操作orm(重点)
Django---静态文件配置,post提交表单的csrf问题(日后细说),创建app子项目和分析其目录,ORM对象关系映射简介,Django操作orm(重点) 一丶Django的静态文件配置 #we ...
- sublime text2 打开包含中文的文件会自动追加.dump后缀解决办法
用sublime text2 打开.c, .h,.txt等文件会自动追加一个.dump后缀,這样在打开.c,.h等文件时无法正常识别,从而无法正常进行语法着色,网上说是因为安装了GBK Encodin ...
- 异步提交表单插件jquery.form.min.js的使用实例
因为项目中需要达到效果:前台点击按钮弹出文件选择框,选择文件确定之后,上传到后台对文件进行处理并给出响应信息. 尝试过使用$.post,$.ajsx,将表单序列化之后传到后台,但是后台并不能收到文件, ...
- form表单action提交表单,页面不跳转且表单数据含文件的处理方法
在最近的项目中需要将含 input[type='file']的表单提交给后台 ,并且后台需要将文件存储在数据库中.之前所用的方法都是先将文件上传到七牛服务器上,然后七牛会返回文件的下载地址,在提交表单 ...
- 基于ASP.Net +easyUI框架上传图片,实现图片上传,提交表单
<body> <link href="../../Easyui/themes/easyui.css" rel="stylesheet" typ ...
- ajax提交表单、ajax实现文件上传
ajax提交表单.ajax实现文件上传,有需要的朋友可以参考下. 方式一:利用from表单的targer属性 + 隐藏的iframe 达到类似效果, 支持提交含有文件和普通数据的复杂表单 方式二:使用 ...
- java模拟表单上传文件,java通过模拟post方式提交表单实现图片上传功能实例
java模拟表单上传文件,java通过模拟post方式提交表单实现图片上传功能实例HttpClient 测试类,提供get post方法实例 package com.zdz.httpclient; i ...
- 第一百八十六节,jQuery,验证表单插件,Ajax 表单插件,验证和提交表单
jQuery,验证表单插件,Ajax 表单插件,验证和提交表单 HTML <form id="reg" method="post" action=&quo ...
- Django框架之第二篇--app注册、静态文件配置、form表单提交、pycharm连接数据库、django使用mysql数据库、表字段的增删改查、表数据的增删改查
本节知识点大致为:静态文件配置.form表单提交数据后端如何获取.request方法.pycharm连接数据库,django使用mysql数据库.表字段的增删改查.表数据的增删改查 一.创建app,创 ...
随机推荐
- windows下使用pthread
有的时候需要使用多线程来测试代码啥的,在Linux下有pthread,在windows也有. 我这儿是使用MingW作为编译工具,具体如何下载MingW自行在网上搜索. 而pthread是在这里下载的 ...
- Web开发的发展
领导以前是做C的,没有做过Web开发,就问我,Web技术发展的大致过程,我就是简单的说了开发过程的演化,下来后有自己找些资料补充下,如下所示:(着这是个简单的说明,感兴趣的可以再自己找找资料). 1. ...
- ubuntu phone/touch的源码从哪里下载?
这里有人在问ubuntu phone的源码从哪里下载? http://askubuntu.com/questions/237321/where-can-i-get-the-source-code-fo ...
- 【UNIX网络编程(一)】套接字地址结构、网络字节顺序和地址转换功能
介绍:应该用在网络编程实现每个套接字地址结构.所以主套接字地址结构后前提网络计划编制,地址结构可以在两个方向上发送:从工艺到内核和内核处理.构中的二进制值之间进行转换. 大多数套接字函数都须要一个指向 ...
- bootstrap导航菜单,手机和PC端
源代码 <!DOCTYPE html> <html> <head lang="en"> <meta name="viewport ...
- ps入门教程:选择工具、移动工具、索套工具的使用
本节课程主要内容:1.学习矩形选择工具.椭圆选择工具.移动工具.多边形套索工具.套索工具.磁性套索工具和魔术 棒选择工具.2.用套索和磁性套索,实现对人物照片的抠图.----------------- ...
- Android最新支持包Design简介
Android 5.0 Lollipop是曾经最著名的Android发布之一,这样说很大一部分原因是材料设计的引入,而材料设计则是一种刷新了整个Android体验的设计语言.这个详细说明是开始适应材料 ...
- Fitnesse测试用例脚本自动生成设计
Fitnesse是通过wiki形式来展示.管理和执行测试用例,若要在Fitnesse上设计测试用例,前提是必须熟悉一定的wiki语法,虽然wiki语法简单,但是若要设计成百上千的测试用例还是有很大的工 ...
- noip推荐系列:遥控车[字符串+高精+二分答案]
[问题描述] 平平带着韵韵来到了游乐园,看到了n辆漂亮的遥控车,每辆车上都有一个唯一的名字name[i].韵韵早就迫不及待地想玩名字是s的遥控车.可是韵韵毕竟还小,她想象的名字可能是一辆车名字的前缀( ...
- 类图class的关联关系(聚合、组合)
类图class的关联关系(聚合.组合) 关联的概念 关联用来表示两个或多个类的对象之间的结构关系,它在代码中表现为一个类以属性的形式包含对另一个类的一个或多个对象的应用. 程序演示:关联关系(code ...