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

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上传图片插件,点击选择文件按钮自动提交表单解决办法的更多相关文章

  1. Django---静态文件配置,post提交表单的csrf问题(日后细说),创建app子项目和分析其目录,ORM对象关系映射简介,Django操作orm(重点)

    Django---静态文件配置,post提交表单的csrf问题(日后细说),创建app子项目和分析其目录,ORM对象关系映射简介,Django操作orm(重点) 一丶Django的静态文件配置 #we ...

  2. sublime text2 打开包含中文的文件会自动追加.dump后缀解决办法

    用sublime text2 打开.c, .h,.txt等文件会自动追加一个.dump后缀,這样在打开.c,.h等文件时无法正常识别,从而无法正常进行语法着色,网上说是因为安装了GBK Encodin ...

  3. 异步提交表单插件jquery.form.min.js的使用实例

    因为项目中需要达到效果:前台点击按钮弹出文件选择框,选择文件确定之后,上传到后台对文件进行处理并给出响应信息. 尝试过使用$.post,$.ajsx,将表单序列化之后传到后台,但是后台并不能收到文件, ...

  4. form表单action提交表单,页面不跳转且表单数据含文件的处理方法

    在最近的项目中需要将含 input[type='file']的表单提交给后台 ,并且后台需要将文件存储在数据库中.之前所用的方法都是先将文件上传到七牛服务器上,然后七牛会返回文件的下载地址,在提交表单 ...

  5. 基于ASP.Net +easyUI框架上传图片,实现图片上传,提交表单

    <body> <link href="../../Easyui/themes/easyui.css" rel="stylesheet" typ ...

  6. ajax提交表单、ajax实现文件上传

    ajax提交表单.ajax实现文件上传,有需要的朋友可以参考下. 方式一:利用from表单的targer属性 + 隐藏的iframe 达到类似效果, 支持提交含有文件和普通数据的复杂表单 方式二:使用 ...

  7. java模拟表单上传文件,java通过模拟post方式提交表单实现图片上传功能实例

    java模拟表单上传文件,java通过模拟post方式提交表单实现图片上传功能实例HttpClient 测试类,提供get post方法实例 package com.zdz.httpclient; i ...

  8. 第一百八十六节,jQuery,验证表单插件,Ajax 表单插件,验证和提交表单

    jQuery,验证表单插件,Ajax 表单插件,验证和提交表单 HTML <form id="reg" method="post" action=&quo ...

  9. Django框架之第二篇--app注册、静态文件配置、form表单提交、pycharm连接数据库、django使用mysql数据库、表字段的增删改查、表数据的增删改查

    本节知识点大致为:静态文件配置.form表单提交数据后端如何获取.request方法.pycharm连接数据库,django使用mysql数据库.表字段的增删改查.表数据的增删改查 一.创建app,创 ...

随机推荐

  1. [译]Java 设计模式之桥接

    (文章翻译自Java Design Pattern: Bridge) 简单来说,桥梁设计模式是一个两层的抽象. 桥接模式就是从一个抽象中实现中解耦以便两个都可以独立的改变.桥接使用封装聚合而且使用继承 ...

  2. mvc+EF比较好的框架

    个人看了传智播客的一位讲师搭建的框架感觉很好,就自己通过模仿划了一下很不讲究的类图来学习之间的关系(有些地方可能有自己理解不对的地方).很感激那位讲师,我会把这个框架用在我自己的项目中.

  3. javascript模仿块级作用域(第一篇)

    作用域有词法作用域和块级作用域之分,javascript属于词法作用域,而在java.C++中却是块级作用域.在javascript中,只有函数能够创建作用域,作用域是以function作为边界的. ...

  4. NPOI封装

    一.对于Excel的操作封装主要针对对于Excel的写入的封装,对于打印基类的封装主要引入了两个概念 1.打印区域模板类 2.打印集合类 如实例模板中需要打印的区域模块 如实例模板中需要打印的集合类 ...

  5. Map和List

    Map和List 当把Map中的key-value对当成单独的集合元素来对待时,Map和Set就统一起来了. Map集合是一个关联数组,它包含两组值:一组是所有key组成的集合,因为Map集合的key ...

  6. MVC视图中的@Html.xxx(...)

    ASP.NET MVC视图中的@Html.xxx(...)   问题 在视图页中@Html.xxx(...)是什么?如何被执行? 如下图所示: 解疑 视图页中@Html.xxx(...)涉及的内容有: ...

  7. Redis for Windows(C#缓存)配置文件详解

    Redis for Windows(C#缓存)配置文件详解   前言 在上一篇文章中主要介绍了Redis在Windows平台下的下载安装和简单使用http://www.cnblogs.com/aehy ...

  8. github上写个人简历

    随笔- 70  文章- 0  评论- 567  在github上写个人简历——先弄个主页   起因 不知道园友们在使用智联招聘等网站填写简历的时候对要求输入的内容有没有一种无力感,不吐槽了反正就一句话 ...

  9. jquery数据验证插件

    jquery数据验证插件(自制,简单,练手)   一:最近项目中js数据验证比较多,为了统一风格,移植复用,于是顺手封装了Jquery的插件. (function($) { var defaults ...

  10. [转]Building a Basic Fuzzer with GDB: The Five Minute GDB Scripting Tutorial

    link:http://www.praetorian.com/blog/building-a-basic-fuzzer-with-gdb-the-five-minute-gdb-scripting-t ...